Angular2 架構

 

1. 說明

Angular 2 是一個用 HTML 和 JavaScript （或者能夠編譯成JavaScript）來構建應用程序的框架。該框架包含了一系列的庫。

在 Angular 裏，咱們這樣來構建應用程序：用帶 Angular 擴展語法的 HTML 寫模板 ，用 組件 類管理這些模板，用 服務 添加應用邏輯，

用 根組件 完成 Angular 啓動 。

首先，咱們來看一些總體的結構圖，這個圖來自於官方網站。

 

經過圖能夠看出，Angular 應用中的 8 個主要部分：

l 模塊 (Modules)

l 組件 (Components)

l 模板 (Templates)

l 元數據 (Metadata)

l 數據綁定 (Data Binding)

l 指令 (Directives)

l 服務 (Services)

l 依賴注入 (Dependency Injection)

2. 模塊

典型的模塊是一個內聚的代碼塊，用來實現某種單一的功能。Angular2應用程序本質上是有一系列模塊組成的，

並且Angular 自己就是一組模塊庫。模塊主要是導出一些東西——類，函數，值，供其它模塊導入，而後使用這個類，函數或者值。

好比，從 @angular/core 中導入 Component 函數：

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

3. 組件

組件 一般爲一些屬性和方法組成的類，用來與視圖進行交互。例如，一個組件類可能以下所示，有個屬性name能夠在視圖上顯示，

屬性值可能來自於服務appService，同時，也可能存在 changeName方法，當點擊按鈕的時候執行該方法。

export class AppComponent {     name: string;       constructor(private _appService: AppService) {         this.name = this._appService.defaultName;     }       changeName() {         this.name = 'dory';     } }

4. 元數據

元數據告訴 Angular 如何處理一個類。在 TypeScript 中，用 裝飾器 (decorator) 來附加元數據，給一個類附加上元數據，

就是告訴Angular框架這是一個組件或者服務，給對應的類附加相應的行爲，例如給AppComponent附加組件元數據。

@Component({     selector: 'app',     template: `<h1>hello world</h1>         I am {{name}}         <button (click)="changeName()">更更名稱</button>     `,     providers: [AppService] }) export class AppComponent {

@Component 中的一些常見配置項：

selector ：一個 css 選擇器，它告訴 Angular 在 父級 HTML如何查找及定位該組件。

templateUrl /template：組件模板的地址/組件模板。

directives ：一個數組，包含 此模板須要依賴的組件或指令。

providers ：一個數組，包含組件所依賴的服務。

5. 模板

模板 主要用來定義視圖，以html的形式存在，用來告訴Angular圖和渲染視圖。多數狀況下，模板看起來和標準html很像，例如

<h1>hello world</h1> I am {{name}} <button (click)="changeName()">更更名稱</button>

這個模板有標準html元素 h1 button等，可是還存在一些 Angular自帶的模板語法 {{}} , (click)等，這些之後再詳細說明。

整體來講，Angular模板就是 html+Angular模板語法的結合體。模板和組件同時存在，整個Angular視圖其實是一個Angular組件模板樹。

 

6. 數據綁定

Angular支持數據綁定，經過往模板添加各類標記，讓模板中的標記與組件的各個部分對應起來，相互合做的機制。避免手工代碼來實現將數據值推送到 HTML 控件中，

並把用戶的反饋轉換成動做和值更新，這種枯燥乏味、容易出錯的推/拉邏輯。

Angular 在每一個 JavaScript 事件週期中一次性處理 全部的 數據綁定，它會從組件樹的根部開始，自頂向下處理各個葉節點。

數據綁定的語法有四種形式。

l  插值表達式 ：用{{}}來表示，顯示組件中對應的屬性或者函數。

l 屬性綁定 ：用[]來表示，將對應的值綁定到模板元素的屬性上。

l 事件綁定：用()來表示，用來執行對應的函數事件。

l 雙向數據綁定 ：通常使用 ngModel 指令來表示，同時實現了屬性綁定和事件綁定的功能，常見用在表單中。

 

7. 指令

指令 用來對 DOM 進行相應的修改。 指令 和 組件 很是相似，也是一個帶有「指令元數據」的類。在 TypeScript 中，要經過 @Directive 裝飾器把元數據附加到類上，@Component 裝飾器實際上就是一個 @Directive 裝飾器，只是擴展了一些面向模板的屬性，組件於是也能夠稱之爲一個特殊的指令。

經常使用的指令有兩種， 「結構型」指令和「屬性 (attribute) 型」指令。

結構型指令：經過在 DOM 中添加、移除和替換元素來修改佈局。例如：ngFor,ngIf, ngSwitch等

 

「屬性 (attribute) 型」指令：每每像屬性 (attribute) 同樣出如今元素標籤中，偶爾會以名字的形式出現但多數時候仍是做爲賦值目標或綁定目標出現。

例如：ngStyle,ngClass,ngModel等

8. 服務

服務 分爲不少種，包括：值、函數，類以及應用所需的特性。幾乎任何東西均可以是一個服務。典型的服務就是一個類，

用來實現某種或某一類的應用或功能。一般狀況下，服務做爲組件的提供者，來提供特定的功能。例如，以下的AppService做爲一個服務提供了一個默認的名稱。

export class AppService {     defaultName: string = "timo"; }

9. 依賴注入

依賴注入是提供類的新實例的一種方式，同事還能夠處理好類所需的所有依賴。大多數依賴注入都是服務，

Angular 使用依賴注入提供咱們須要的組件以及這些組件所需的服務。Angular經過構造函數參數的類型，來得知須要哪些組件服務的。當 Angular 建立組件時，

會首先爲組件所需的服務找一個 注入器（Injector）。

注入器是一個維護服務實例的容器，存放着之前建立的實例。

若是容器中尚未所請求的服務實例，服務提供商必須註冊一個服務Provider到注入器中，註冊服務的方式主要有兩種：

1.在應用引導程序中註冊，這樣改服務的同一個實例在Angular整個應用程序都是可用的。

2. 在 @Component 元數據中的 providers 屬性中註冊，這樣該服務只能在當前組件以及當前組件的子組件中進行訪問

注入器根據該服務Provider來建立並返回對應的服務實例，而且添加到容器中，而後把這個服務返回給 Angular。當全部的服務都被解析完並返回時，

Angular 會以這些服務爲參數去調用組件的構造函數。這就是依賴注入。