Rachit Bhardwaj

Components of Angular2 Architecture

After beta version and so many of RC’s finally Angular 2 got released. So I thought before diving into ng2, it’s a good time to understand the architecture of Angular 2.

Angular 2 is quite different from its predecessor. It is component based, use of controllers and scope has been depreciated. Syntax and structure have also changed.

Angular 2 vs Angular 1

  • It is faster than its predecessor. As said in ng-conf it is 2 to 5 times better than angular 1.
  • It took mobile first approach.
  • Changed Structure and Syntax. It is simpler in structure. The component structure makes it easy to use.
  • Changed Dependency Injection.
  • More Language choices i.e you can use Typescript, Dart or JavaScript for your implementation.
  • Difficult to set up. In angular 1 you just have to add the reference of the library but in angular 2 you have to set different node modules to make it work.

There are basically 8 building blocks of angular 2. These are-

  1. Modules
  2. Components
  3. Templates
  4. Metadata
  5. Data binding
  6. Directives
  7. Services
  8. Dependency Injection

Lets understand each one of them one by one.

Angular2 Architecture

MODULES

Modules are the block of code that do certain type of task. A module exports some value in the main code, such as class. The first and the most common module that you will study is the one that exports Component Class.

app/app.component.ts (excerpt)

export class AppComponent { }

Here app.component is a module.

Libraries

Libraries names start with @angular prefix.  Modules can be a library of other modules. Angular 2 itself has many modules that are libraries of others.

@angular/core is the most important library that contains most of the modules that we need.

COMPONENTS

A component is basically a class that is used to show an element on the screen. The components have some properties and by using them we can manipulate how the element should look on the screen and behave. We can create a component, destroy and update as the user moves in the application. Life Cycle hooks are the modules that we use for this purpose. Like ngOnInit()

app/app.component.ts (excerpt)

export class blogComponent { }

Here blogComponent is a component

TEMPLATES

The view of the component is defined through templates. Templates are basically the HTML we use,, to show on our page.

app/hero-list.component.html

   <h2>Hero List</h2>
  
   <p><i>Pick a hero from the list</i></p>
   <ul>
    <li *ngFor="let food of foods" (click)="selectedFood(food)">
      {{food.name}}
    </li>
   </ul>
  
<food-detail *ngIf="selectedFood" [food]="selectedHero"></food-detail>

This is a simple HTML file but you may have the question what are these elements.
*ngFor,{{food.name}}, (click), [food], and <food-detail>?

METADATA

Metadata tells angular how a class should be processed on the screen. For ex.

@Component({

 selector: 'food-list',

 templateUrl: 'app/food-list.component.html',

 directives:  [FoodDetailComponent],

 providers:   [FoodService]

})

To tell angular 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 render the HTML that templateURL has at this tag
<food-list></food-list>

Directives are other components that this Component will require to render and providers are the services required.

The template, metadata, and component together describe a view.

DATA BINDING

The Main feature of any Javascript Framework is data binding. As angular 1, angular 2 also support data binding.

There are 4 ways of binding a data according to the direction : to the DOM, from the DOM, or in both directions

<input [(ngModel)]="food.name">

<li>{{food.name}}</li>

<food-detail [food]="selectedFood"></food-detail>

<li (click)="selectFood(food)"></li>
  1. The {{hero.name}} interpolation display food.name value in li tag.
  2. The [hero] property binding passes the selected food value from parent to child component.
  3. The (click) event binding calls the selected Food function when a user click on it.
  4. Two way data binding is an important 4th way that combine  property and event binding by ngModel directive.

DIRECTIVE

Directive helps us to add behavior to the DOM elements. We can attach multiple directives to the DOM elements. In TypeScript we define decoratives by @decorative decorator.

There are 3 types of decorative

  1. Directive-with-a-template
  2. Structural
  3. Attribute

A component is a directive-with-a-template

Structural directives add, delete and replace DOM elements. For e.g.

<li *ngFor = "let food of foods></li>

<food-detail *ngIf="selectedFood"></food-detail>

Attribute directives changes the appearance of DOM elements. For e.g.

<input [(ngModel)]="hero.name">

 

SERVICES

A service is a class containing any function, feature with a defined and specific purpose. For e.g.

export class FoodService {
 getfoodies(): Food[] {
   return FOODIES;
 }
}

 

DEPENDENCY INJECTIONS

Dependency injection allows to inject dependency as a service throughout the web application. To inject a dependency we do not create a service but we have a constructor to request the service. The framework then provides it. For e.g.

constructor(private service: HeroService) { }

 
WHAT NEXT?
Angular 2 can be written in TypeScript, Dart or Plain Javascript. But recommended way is to use TypeScript as of now because the documentation is written well in that. To understand each of the layer separately or diving more into it  you can see the official documentation which is available in all of the three mentioned languages.

https://angular.io/docs/ts/latest/

 

Related Articles

#Tech

NHibernate, Linq and Lazy Collections

For the past few months we have been busy building a services framework for one of our clients so that they can build all of their enterprise web services without ever having to worry about the cross cutting concerns and... Read more
#Tech

Page Redirects using Spring.NET

Who is responsible for page redirects in ASPNET MVP – The View or the Presenter None of the above, it is you :) On a serious note, it is the View as one shouldn’t pollute the Presenter with the page navigation... Read more