AngularJS2

AngularJS2

Angular 1.x 的更新版本，性能上得到顯著的提高，能很好的支援 Web 開發元件。

AngularJS2 釋出于2016年9月份，它是基于ES6來開發的。

目前各種環境（浏覽器或 Node）暫不支援ES6的代碼，是以需要一些shim和polyfill（IE需要）讓ES6寫的代碼能夠轉化為ES5形式并可以正常運作在浏覽器中

web app 軟體架構

Web App
     Angular2                  es6 browswer
     systemjs
traceur  es6-module-loader
     es5 browser
           

Es5 浏覽器下需要以下子產品加載器：

systemjs - 通用子產品加載器，支援AMD、CommonJS、ES6等各種格式的JS子產品加載。

es6-module-loader - ES6子產品加載器，systemjs會自動加載這個子產品。

traceur - ES6轉碼器，将ES6代碼轉換為目前浏覽器支援的ES5代碼，systemjs會自動加載 這個子產品。

架構:

Angular 2 應用程式主要由以下 8 個部分組成：

1、子產品 (Modules)

2、元件 (Components)

3、模闆 (Templates)

4、中繼資料 (Metadata)

5、資料綁定 (Data Binding)

6、指令 (Directives)

7、服務 (Services)

8、依賴注入 (Dependency Injection)

模闆 (Templates)是由 Angular擴充的HTML文法組成

元件 (Components)類用來管理這些模闆，應用邏輯部分通過服務

(Services — 實作特定功能，通過注入方式供其它子產品使用的獨立子產品）來完成

子產品 打包服務與元件，最後通過引導根子產品來啟動應用

子產品：

Angular 應用是由子產品化的，它有自己的子產品系統：NgModules。

Angular 至少要有一個子產品(即根子產品)，一般可以命名為：AppModuleAngular

Angular 子產品是一個帶有 @NgModule 裝飾器的類

元件：

元件是一個模闆的控制類，用于處理應用和邏輯頁面的視圖部分。

元件是構成 Angular 應用的基礎和核心，可用于整個應用程式中。

元件知道如何渲染自己及配置依賴注入。

元件通過一些由屬性和方法組成的 API 與視圖互動。

Angular 應用至少有一個根元件AppComponent

建立 Angular 元件的方法有三步：

從 @angular/core 中引入 Component 修飾器

建立一個普通的類，并用 @Component 修飾它

在 @Component 中，設定 selector 自定義标簽，以及 template 模闆

應用執行過程：

Angular調用bootstrapModule函數，讀取AppModule的中繼資料，在啟動元件中找到AppComponent并找到my-app選擇器，

在HTML中定位到一個名字為my-app的标簽元素，然後再這個标簽之間的載入内容

資料綁定(Data binding)

顯示資料以及資料互動，它是管理應用程式裡面數值的一種機制

插值

在 HTML 标簽中顯示元件值

屬性綁定

把元素的屬性設定為元件中屬性的值。

事件綁定

文法: 左側小括号内的目标事件click和右側引号中的模闆聲明onSave()組成

<button (click)="onSave()">Save</button>
<button on-click="onSave()">On Save</button> //字首形式：on- 
           

雙向資料綁定NgModel

[]實作了資料流從元件到模闆，

()實作了資料流從模闆到元件，兩者一結合[()]就實作了雙向綁定

<input [value]="current.Name"
       (input)="current.Name=$event.target.value" >
<input [(ngModel)]="current.Name">
<input bindon-ngModel="current.Name"> //字首形式：bindon-
           

指令（Directives）

— 指令是一個帶有”指令中繼資料”的類

Angular中包含三種類型的指令：

屬性指令：

以元素的屬性形式來使用的指令。

結構指令：

用來改變DOM樹的結構

元件：

作為指令的一個重要子類，元件本質上可以看作是一個帶有模闆的指令。

css類綁定

包括一個 class 字首，緊跟着一個點 (.) ，再跟着 CSS 類的名字組成。 其中後兩部分是可選的。如： [class.class-name]

style樣式綁定

包括一個style.，緊跟着css樣式的屬性名，如：[style.style-property]

Angular 的内置指令有 NgClass、NgStyle、NgIf、NgFor、NgForTrackBy、NgSwitch等

模闆引用變量

模闆引用變量是模闆中對 DOM 元素或指令的引用

它能在原生 DOM 元素中使用，也能用于 Angular 元件——實際上，

它可以和任何自定義 Web 元件協同工作。

可以在同一進制素、兄弟元素或任何子元素中引用模闆引用變量

<!-- phone 引用了 input 元素，并将 `value` 傳遞給事件句柄 -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

<!-- fax 引用了 input 元素，并将  `value` 傳遞給事件句柄  -->
<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>