Why I Chose My Journey To Angular
Make your mind an Angular Library
- generation of a single-page web app using Angular CLI
- creation a web app that contains a set of components which can communicate with each other
- client-side navigation using router
- data communication via replacing services and classes
- state management via injectable singleton services
Anatomy of an Angular Application
Angular is a component based framework. It is a set of components and services. Every angular app has one root component, it may have child components and each child component may have its own children. Services provide the functionality across these components. The root component is specified in the bootstrap property.
Main Artifacts of An Angular Application
A component can be created using command
ng generate component or ng g c
Each component in an Angular app will contain the template, class and meta data.
Template is of HTML which defines the view for the application.The template can have the inline HTML and the styles property as inline css. But when the templates are getting complex we have to face lot of issues in automating format, syntax checking. So it is better to use a linked template with html in its own file and css file for that linked html file.
Class which contains the code associated with the view. It contains the data elements which are used in the view and methods which performs actions on the view. Class will have an empty constructor when it was generated and it may implement the OnInit which is one of the lifecycle interface. when the component implemented the OnInit then it should implement the ngOnInit() which will be invoked after the code in the constructor.
Here metadata is the additional information of the class. In angular the class become an angular component when we give the @Component decorator which adds metadata to the class. It provides the information to angular that how to instantiate the component, construct the view and interact with the component.
Here, the selector defines the component directive name. Other components can include a specific component template in their templates using the selector directive name as an html tag. In this instance we are using a component as a directive into another.
Ok… We have discussed about angular components but, how these components are organised in the application. Here the module comes into play.
An angular module is a container for a group of related components, services, directives and pipes. It is a class annotated with the @NgModule() decorator to make it as an angular module. Each angular application has at least one angular module which is called root angular module. It can have any other additional angular modules like feature modules that consolidate the component for particular feature in an application.
Module can be create in Angular app using
ng generate module or ng g m
Angular module has declarations, imports, bootstrap, entryComponents, providers etc.
Components of the application that can be exposed to the Angular module are declared in the declarations array of Angular module. A component can be declared only once. External angular modules which perform the functions of Angular framework are imported according to the need under the imports array. The bootstrap array defines the start up(root) component of the application.
Angular module performs functions of organising the application into cohesive blocks of functionality, providing boundaries within the application, providing a template resolution environment. When compiling, the angular compiler sees a directive then it will look into angular module for the definition.
There can be feature modules in angular in addition to root module, in the sense of adding features to your application. These feature modules are differ from root module as they can’t have the bootstrap property in @NgModule(). Feature modules can be imported by other modules.
When we are building our components and when they are let to communicate then there is a player come into play “Service”.
Normally when building an angular application developers maintain their data handling in an injectable service rather than in a component.
common notation for generating a service
ng generate service or ng g s
Service is a class with a focused purpose. We can notice, @Injectable() decorator is annotated in the generated service. This Injectable() makes the service to inject into any components which needs it. The injector can be a root injector or component injector. Registering a service with root injector, is available for all components in an Angular application. Else it is available for its component and that component’s child or nested components. A service includes functions which are independent from any specific component.
We do the dependency injection(making an instance of a service) in needed component’s constructor with a private access modifier parameter.
We have seen how an angular application works based on its artifacts. Service is used to communicate within components. But, Do you have any idea that how a component communicate with its template?
There is an important mechanism called “Data Binding” in Angular which sync the communication between the component’s class and its template.
Yes, in my next episode I will play you Data Binding. See you !!!