Angulaire 2 - Architecture

La capture d'écran suivante montre l'anatomie d'une application Angular 2. Chaque application se compose de composants. Chaque composant est une limite logique de fonctionnalité pour l'application. Vous devez disposer de services en couches, qui sont utilisés pour partager les fonctionnalités entre les composants.

Voici l'anatomie d'un composant. Un composant se compose de -

  • Class - C'est comme une classe C ++ ou Java qui se compose de propriétés et de méthodes.

  • Metadata - Ceci est utilisé pour décorer la classe et étendre les fonctionnalités de la classe.

  • Template - Ceci est utilisé pour définir la vue HTML qui est affichée dans l'application.

Voici un exemple de composant.

import { Component } from '@angular/core';

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

export class AppComponent { 
   appTitle: string = 'Welcome';
}

Chaque application est composée de modules. Chaque application Angular 2 doit avoir un module racine angulaire. Chaque module de racine angulaire peut alors avoir plusieurs composants pour séparer la fonctionnalité.

Voici un exemple de module racine.

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 { }

Chaque application est composée de modules de fonctionnalités où chaque module a une fonctionnalité distincte de l'application. Chaque module de fonctionnalité angulaire peut alors avoir plusieurs composants pour séparer la fonctionnalité.