Angular 2 - Architettura

Lo screenshot seguente mostra l'anatomia di un'applicazione Angular 2. Ogni applicazione è composta da componenti. Ogni componente è un confine logico di funzionalità per l'applicazione. È necessario disporre di servizi a più livelli, utilizzati per condividere la funzionalità tra i componenti.

Di seguito è riportata l'anatomia di un componente. Un componente è costituito da:

• Class - È come una classe C ++ o Java che consiste di proprietà e metodi.

• Metadata - Viene utilizzato per decorare la classe ed estendere le funzionalità della classe.

• Template - Viene utilizzato per definire la visualizzazione HTML che viene visualizzata nell'applicazione.

Di seguito è riportato un esempio di un componente.

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

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

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

Ogni applicazione è composta da moduli. Ogni applicazione Angular 2 deve avere un modulo radice angolare. Ogni modulo Angular Root può quindi avere più componenti per separare la funzionalità.

Di seguito è riportato un esempio di un modulo radice.

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

Ogni applicazione è composta da moduli di funzionalità in cui ogni modulo ha una caratteristica separata dell'applicazione. Ogni modulo di funzionalità angolare può quindi avere più componenti per separare la funzionalità.