Angular 2 - Architecture

The following screenshot shows the anatomy of an Angular 2 apppcation. Each apppcation consists of Components. Each component is a logical boundary of functionapty for the apppcation. You need to have layered services, which are used to share the functionapty across components.

Following is the anatomy of a Component. A component consists of −

Class − This is pke a C++ or Java class which consists of properties and methods.

Metadata − This is used to decorate the class and extend the functionapty of the class.

Template − This is used to define the HTML view which is displayed in the apppcation.

Following is an example of a component.

import { Component } from  @angular/core ;

@Component ({ 
   selector:  my-app , 
   templateUrl:  app/app.component.html  
}) 

export class AppComponent { 
   appTitle: string =  Welcome ;
} 

Each apppcation is made up of modules. Each Angular 2 apppcation needs to have one Angular Root Module. Each Angular Root module can then have multiple components to separate the functionapty.

Following is an example of a root module.

import { NgModule }      from  @angular/core ; 
import { BrowserModule } from  @angular/platform-browser ; 
import { AppComponent }  from  ./app.component ;  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { } 

Each apppcation is made up of feature modules where each module has a separate feature of the apppcation. Each Angular feature module can then have multiple components to separate the functionapty.