Understand Angular 2 or Angular 4 basic architecture

In this article we will discuss on Angular 2 or Angular 4 which is basic part and equivalently very- very important to know if you are learning Angular 2 or Angular 4. Having knowledge how the framework works before you start using it. In this article let us look at some of the important Angular 2 building blocks & Architecture of Angular 2.

Let us quickly recap around Angular then we will move on to get to know nitty-gritty of Angular architecture. Angular basically is a platform for developing web application and also to create revolution with intention to support mobile effectively. Angular 2 is not at all an update of Angular 1.x but Angular 2.0 is completely re-written which create milestone. Angular 2 or newly arrived Angular 4 is created to work with TypeScript in order to meet ES 6 specifications. Due to this there are lots and new learning for the developers of Angular 2 same follows with the architecture of Angular 2 which is very much different than Angular 1.x. So here need arises for us to first understand the architecture of Angular 2 and then get familiar with some of the key important concepts of Angular 2 then moving on to the next.

Angular Architecture overview

Angular 2 is built on module based approach, an Angular 2 app consist of one or fewer components, which gets connected with the help of routing or the selectors, it may happen that these components have templates attached to it which successfully displays component properties while attaching events to communicate with the properties. A component can make use of service, to get access of a specific feature or perform a very distinct task. Services if required then it has to be injected into components before they gets used within the component, this is referred to as Dependency Injection, but this feature is nothing new as it was also been a key feature of old Angular 1.x.

Angular 2 or Angular 4 stands on 8 building blocks following are the names and brief explanation to it

Modules: Modules are codes of line represented in blocks of code and they perform various type of task. A module sends or does exports some sort of value in the main code, such as class. When you do the study of Angular very foremost and the most common module that you will see is the one that exports Component Class.

export class MyAppComponent { }

Here represented in the above line of code "MyAppComponent" is a module. Since we are discussing about Modules we would also like let you know about Libraries.

Libraries: In Angular when we add "@" at the start it becomes ‘Libraries' in short if we add prefix like this "@angular". Modules can also be a library of other modules. If you see within Angular 2 or Angular 4 itself has many of the modules that are libraries of others like @angular/core is the most important library that contains most of the modules that we need.

Components: Basically component is a class which helps to display an element on the screen. Components consist of some properties and with that we can manipulate how the element should look and respond on the screen. We can create and do various activities where we can create component, destroy, and update as per user activity done within in the application. We would like to add that Life Cycle hooks are the modules that we use for this purpose.

export class MyCompComponent { }

Here represented in the above line of code "MyCompComponent" is a component.
 

• Templates: It helps us to define "View" part of the Component. In simple words Templates are basically HTML which is used to show on our page. Unlike plain HTML, we can create angular templates which understand how to communicate with other backing components. We can make use plain HTML tags and component tags. These templates ultimately create DOM structure on web browser. Data in templates is held by backing components.
• Metadata: In Angular Metadata is responsible to how a class should be processed and represented on the screen. Decorator is added ("@") to tell Angular that we are using a component with certain metadata, we attach a decorator to it. Here @Component will be identified as a component class. Selector tells Angular to process the HTML that templateURL has at this tag <xxxx-xxx></xxxx-xxx> Directives are other components that this Component will require to process and providers are the services required. The template, metadata, and component together describe a view. Templates and components can communicate with the help of metadata.
• Data binding: The main and powerful feature of JavaScript framework – Angular 2 or Angular 4 is data binding. Earlier version Angular 1 also supported data binding so is the same with our new Angular 2 or Angular 4. There are 4 ways of binding a data according to the direction to the DOM, from the DOM, or in both directions:

<input [(ngModel)]="toy.name">
<li>{{toy.name}}</li>
<toy-detail [toy]="selectedToy"></toy-detail>
<li (click)="selectToy (toy)"></li>

1. Interpolation: The {{toy.name}} interpolation display "toy.name" value within tag.
2. Property Binding: The [toy] property binding passes the selected value of the toy value from parent to child component.
3. Event Binding: It shoots for the event when we click on the components method name. The (click) event binding calls the "selectedToy" function when a user clicks on it.
4. Two-way data binding: It is a very important and the fourth way which combines property and event binding with the help or use of "ngModel" directive.
5. Directives: Directives are the ones which helps us to add behavior to the DOM elements. They are the extension to HTML attributes. Attaching multiple directives to the DOM elements is also possible. When using TypeScript we define decoratives by @decorative decorator.

There are 3 types of decorative:

1. Decorator Directive – As the name says it decorates (@Directive) the elements with the help of add-on behavior. One nice example we can say that is built-in directives like ngModel etc.
2. Component Directive - It is just an extension of @Directive decorates with template orientation based features.
3. Template Directive - It does the conversion of HTML into very own reusable template. This type of directive is as termed as Structural directive.
4. Services: Angular 2 or Angular 4 service provides a function or an object which helps to share the data and the behavior across the application. It is JavaScript function which is used to perform a specific task. It does inclusion of the values, function, or any other feature needed by the application. Typical examples of services are data, logging, message service etc. Kindly note that services do not have any no base class.

export class ToyService {
 getToy(): Toy[] {
   return Toy;
 }
}

1. Dependency Injection: It is a kind of Design Pattern which is capable of passing objects as dependencies. It does work of decoupling and removes tight coupling with that removal of hard coded dependencies, and makes dependencies configurable. Main benefits or purpose of using Dependency Injection is that we can make components maintainable, reusable, and testable. It is triggered into the Angular framework so that it can be use anywhere in an application. The injector mainly is a technique to maintain service instance. It is created using a provider. The provider is the way of creating a service. Registering providers along with injectors is also possible.

Thanks for your effort and time spending in reading the article based on Angular architecture. Also view below practical project video from Angular series: -