Angular 2 - Arquitectura

La siguiente captura de pantalla muestra la anatomía de una aplicación Angular 2. Cada aplicación consta de componentes. Cada componente es un límite lógico de funcionalidad para la aplicación. Necesita tener servicios en capas, que se utilizan para compartir la funcionalidad entre componentes.

A continuación se muestra la anatomía de un componente. Un componente consta de:

  • Class - Es como una clase C ++ o Java que consta de propiedades y métodos.

  • Metadata - Esto se utiliza para decorar la clase y ampliar la funcionalidad de la clase.

  • Template - Se utiliza para definir la vista HTML que se muestra en la aplicación.

A continuación se muestra un ejemplo de un componente.

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

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

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

Cada aplicación está compuesta por módulos. Cada aplicación de Angular 2 debe tener un módulo raíz angular. Cada módulo de raíz angular puede tener varios componentes para separar la funcionalidad.

A continuación se muestra un ejemplo de un módulo raíz.

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

Cada aplicación se compone de módulos de funciones donde cada módulo tiene una función separada de la aplicación. Cada módulo de funciones de Angular puede tener varios componentes para separar la funcionalidad.