Angular 2 - 架構

以下螢幕截圖顯示了 Angular 2 應用程式的結構。每個應用程式都由元件組成。每個元件都是應用程式功能的邏輯邊界。您需要擁有分層的服務，這些服務用於在元件之間共享功能。

以下是元件的結構。一個元件包含：

• 類 - 這就像一個 C++ 或 Java 類，包含屬性和方法。

• 元資料 - 用於修飾類並擴充套件類功能。

• 模板 - 用於定義在應用程式中顯示的 HTML 檢視。

以下是一個元件的示例。

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

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

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

每個應用程式都由模組組成。每個 Angular 2 應用程式都需要一個 Angular 根模組。然後，每個 Angular 根模組可以有多個元件來分離功能。

以下是一個根模組的示例。

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

每個應用程式都由功能模組組成，其中每個模組都有應用程式的一個單獨的功能。然後，每個 Angular 功能模組可以有多個元件來分離功能。