Angular 2 - Architecture


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


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

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

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

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


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 application is made up of modules. Each Angular 2 application needs to have one Angular Root Module. Each Angular Root module can then have multiple components to separate the functionality.


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 application is made up of feature modules where each module has a separate feature of the application. Each Angular feature module can then have multiple components to separate the functionality.

Each Application

Useful Video Courses


AngularJS Online Training

16 Lectures 1.5 hours

Anadi Sharma


Angular 2 Online Training

28 Lectures 2.5 hours

Anadi Sharma


Step By Step Angular For Beginnners

11 Lectures 7.5 hours



Ionic & Angular JS: Principles Of Mobile and Web Development

16 Lectures 2.5 hours

Frahaan Hussain


Angular 8 Full Stack Development With Spring Boot

Best Seller

69 Lectures 5 hours

Senol Atac


JWT Role Based Authorization With Spring Boot And Angular 8

53 Lectures 3.5 hours

Senol Atac