Angular 2 - Architecture


Advertisements

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.

Anatomy

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.

Component

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.

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


Video

AngularJS Online Training

16 Lectures 1.5 hours

Anadi Sharma

Video

Angular 2 Online Training

28 Lectures 2.5 hours

Anadi Sharma

Video

Step By Step Angular For Beginnners

11 Lectures 7.5 hours

SHIVPRASAD KOIRALA

Video

Ionic & Angular JS: Principles Of Mobile and Web Development

16 Lectures 2.5 hours

Frahaan Hussain

Video

Angular 8 Full Stack Development With Spring Boot

Best Seller

69 Lectures 5 hours

Senol Atac

Video

JWT Role Based Authorization With Spring Boot And Angular 8

53 Lectures 3.5 hours

Senol Atac

Advertisements