├── advanced
    ├── custome form control.md
    ├── server side rendering.md
    ├── integrating-third-party-libraries.md
    └── template syntax.md
├── readme.md
├── fundamentals
    ├── 2-0-template-&-data-binding.md
    ├── cors with proxy config.md
    ├── Everything about Router.md
    ├── 0-setup.md
    ├── 3-forms.md
    ├── 5.The Root Module.md
    ├── Everything about http call.md
    ├── How to Form.md
    ├── 4-bootstraping.md
    ├── How to start a new Angular project.md
    ├── 2-1-displaying-data.md
    ├── RxJS in Angular.md
    ├── 7.User Input.md
    ├── 6.Displaying Data.md
    ├── 3-1-user-input.md
    ├── 9.Dependency Injection.md
    ├── 3-2-template-driven-forms.md
    ├── 3-4-reactive-forms.md
    ├── 1-architecture.md
    └── 10.Template Syntax.md
├── tricks.md
└── learning.md


/advanced/custome form control.md:
--------------------------------------------------------------------------------
1 | # Custom Form Controls in Angular
2 | Ref: [Custom Form Controls in Angular](https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html)
3 | 


--------------------------------------------------------------------------------
/advanced/server side rendering.md:
--------------------------------------------------------------------------------
1 | # 伺服器成像
2 | - [如何在 Angular CLI 建立的專案加入 Angular Universal 伺服器渲染功能](http://blog.miniasp.com/post/2017/06/18/How-to-setup-Angular-Universal-in-an-Angular-CLI-project.aspx)
3 | 


--------------------------------------------------------------------------------
/advanced/integrating-third-party-libraries.md:
--------------------------------------------------------------------------------
 1 | # 整合第三方程式庫
 2 | - [Angular 與 JQuery 共舞：整合第三方套件的技巧、陷阱與解決方案](https://www.facebook.com/will.fans/videos/1718120871550383)，[（投影片）](https://www.slideshare.net/WillHuangTW/angular-jquery-3rd-party-js-library-tips-tricks)
 3 | 
 4 | 
 5 | ### 整合 JQuery 到 angular 專案重點
 6 | - 安裝 `jquery @types/jquery`
 7 | - 在 typings.d.ts 中匯入 jquery 定義檔案。
 8 |   ```ts
 9 |   /// <reference path="../node_modules/@types/jquery/index.d.ts" />
10 |   ```
11 | - 進行撰寫程式碼和編譯時，應該就不會出現錯誤。


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Angular 學習筆記
 2 | Angular 學習筆記是一個希望蒐集、整理一些有關 Angular 的　**結　構　化**　的文章。就學習的角度而言，結構化資料能夠循序漸進、由淺入深地進行自學，讓學習者更能夠吸收並建立扎實有序的觀念。然而，台灣因為語言、市場、文化等種種因素，通常很難去提供這樣的學習資源。因此，希望透過這個小小的專案來達成這樣的目標。
 3 | 
 4 | ## 現況
 5 | 現有的文件都是我（t7yang）在自學 Angular 時邊讀官方的文件和網路上的教學，邊整理出來的資料（很多都未有最好的整理和歸納）。若希望可以讓台灣有一個以當地語言和用語更友善的學習 Angular 的環境，也歡迎一起貢獻。未來應該會轉換成組織的型式，以達到多作者都可以掛名。
 6 | 
 7 | ## 目錄
 8 | ```
 9 | /
10 | --learning.md
11 |   整理一些學習資源（可能參雜了一些非 Angular 的東西）。
12 | --/fundametals
13 |   主要是針對官方的基礎教材進行導讀（整理、重新解讀、補充其他資訊），非翻譯。
14 | --/angular advanced
15 |   除了官方指南之外的一些實務上碰到的情況或更進階的技巧整理。
16 | ```
17 | 


--------------------------------------------------------------------------------
/fundamentals/2-0-template-&-data-binding.md:
--------------------------------------------------------------------------------
 1 | # 模板與資料繫結
 2 | 
 3 | MVC 或許是人們經常聽到的一個詞彙， MVC 的歷史沿革非常悠久。而且也是一個因應務實需求所產生的開發模式，意旨能夠將模型、視圖、控制器（model, view, controller）分開處理來達到更容易開發維護的目的。模型代表是資料（的模型）、視圖就是使用者看得到且可以被互動的介面、控制器著作為視圖與資料之間的溝通橋樑。
 4 | 
 5 | 後續人們再根據不同的需求開發出 MVC 的變種， Angular 的開發模式也屬於 MVC 的變種，根據官方的說法是 MVW （模型、視圖、隨便啦）。了解這點後，再回過頭來看 Angular 的技術堆疊就比較好理解。
 6 | 
 7 | - 在開發與語言 Angular 選擇了 TypeScript。
 8 | - 模板仍然選擇 HTML 並加上自訂的模板語言。
 9 | 
10 | 因此要學好 Angular 的視圖開發，熟悉 HTML 和 Angular 自訂的模板語言就是不可或缺的部分。模板的技術又可以概略歸納為：
11 | 
12 | - 模板語法
13 |   - 內容 / 屬性的繫結
14 |   - 事件的繫結
15 |   - 結構控制
16 |   - Pipe
17 |   - 動畫
18 | - 元件的生命週期
19 | 


--------------------------------------------------------------------------------
/fundamentals/cors with proxy config.md:
--------------------------------------------------------------------------------
 1 | # 用@angular/cli在本機開發時透過Proxy Config解決CORS的問題
 2 | 來源：[如何在 Angular CLI 建立的 Angular 2 開發環境呼叫遠端 RESTful APIs](http://blog.miniasp.com/post/2017/02/05/Setup-proxy-to-backend-in-Angular-CLI.aspx)
 3 | 
 4 | 1. 在專案目錄下建立一個proxy.config.json。
 5 | ```json
 6 | {
 7 |   "/api": {
 8 |     "target": "http://140.xxx.xxx.xxx",
 9 |     "secure": false
10 |   }
11 | }
12 | ```
13 | > - 實務上通常會設定為`/api`。
14 | > - `target`的部分則是遠端的API主機位置
15 | >
16 | > 最終我們只需要在服務中以`/api/signin`請求，則Proxy會自動幫我們導向`http://140.xxx.xxx.xxx/api/signin`。
17 | 
18 | 2. 修改`package.json`裡面的`npm start`或自訂一個本機開發用的指令。
19 | ```json
20 | {
21 |   "scripts": {
22 |     "start": "ng serve --proxy-config proxy.config.json"
23 |   }
24 | }
25 | ```
26 | 
27 | 3. 在服務中設定`basedUrl`，用剛剛設定`Proxy.config.json`中第一個KEY值做開頭。
28 | ```javascript
29 | export class SomeService {
30 |   private basedUrl = '/api';
31 | 
32 |   signin(): Observable<Type> {
33 |     return this.http.post(`${basedUrl}/signin`, body, options).map().subscribe();
34 |   }
35 | }
36 | ```
37 | 
38 | 4. 停止並重新啟動`npm start`，就可以看到效果了。
39 | 


--------------------------------------------------------------------------------
/tricks.md:
--------------------------------------------------------------------------------
 1 | # Angular 開發小技巧
 2 | 
 3 | ## @angular/cli
 4 | 
 5 | #### `export interface`
 6 | 需要注意的是，因為JS本身並沒有`interface`的概念，因此就算TS定義並匯出`interface`，編譯後的檔案是不會產生任何程式碼的。這也導致有時時候會發生編輯匯入匯出`interface`後程式編譯失敗。這時只需要`ctrl + c`停止然後`npm start / yarn start`重新啟動編譯即可。
 7 | 
 8 | #### `ng serve` 無法用 IP 連線
 9 | `angular/cli` 為了某些考量，在預設的情況並不允許透過 IP 的方式連線至 `ng serve` 所啟動的伺服器。在某些情況下，要稍微妥協一下的作法是幫 `ng serve` 加上 `--host` 選項。
10 | 
11 | ```json
12 | {
13 |   "scripts": {
14 |     "dev": "ng serve --host 0.0.0.0"
15 |   }
16 | }
17 | ```
18 | 
19 | **注意**：上述的 `0.0.0.0` 請填入電腦的 IP。
20 | 
21 | 來源：https://github.com/angular/angular-cli/issues/2542
22 | 
23 | 
24 | ## debugging
25 | - [Chrome Debugging with Angular CLI](https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI)
26 | 
27 | 
28 | ## Component
29 | 
30 | #### 動態產生 Component
31 | - [Dynamic component loading with Angular2: replace $compile](http://www.smartjava.org/content/dynamic-component-loading-angular2-replace-compile)
32 | - 用一般的 innerHTML 注入 raw HTML，再用事件回呼的方式攔截點選連結事件。
33 | 
34 | 
35 | ## Route
36 | 
37 | #### title service
38 | - 如何實作動態網頁標題 - [Dynamic page titles in Angular 2 with router events](https://toddmotto.com/dynamic-page-titles-angular-2-router-events)
39 | 


--------------------------------------------------------------------------------
/fundamentals/Everything about Router.md:
--------------------------------------------------------------------------------
 1 | # 一切有關路由器的資訊（Router）
 2 | 
 3 | ## 路由守衛（Router Guard）
 4 | 
 5 | ### 守衛的回傳值
 6 | - 如果守衛回傳`true`則導向繼續處理。
 7 | - 如果守衛回傳`false`則導向處理會被停止且使用者會留在原處。
 8 | 
 9 | > 守衛還可以告訴路由器導向其他位置（譬如若在未登入的情況下，轉導向登入頁面）來有效取消目前的導向處理。
10 | 
11 | 
12 | ### 守衛應該回傳甚麼
13 | 上述提到了，就是`true`和`false`。但多數的情況通常需要等待向伺服器請求必要的資訊才能知道是否該回傳`true`或`false`。所以守衛的回傳結果可以是`Observable<boolean>`或`Promise<boolean>`。路由器會自動等待結果再導向處理應該往前或停止。
14 | 
15 | 
16 | ### 守衛的類型
17 | 1. `CanActivate`用於決定是否可以導向某個路由。
18 | 2. `CanActivateChild()`用於決定是否可以導向某個子路由。
19 | 3. `CanDeactivate`用於決定是否可以離開目前的所在的路由。
20 | 4. `Resolve`用於在路由正式被啟動前執行取得路由所須資料。
21 | 5. `CanLoad`用於決定是否可以導向某個以非同步載入的功能模組。
22 | 
23 | Guard|類型|回傳
24 | --|---|--
25 | CanActivate|Service|Observable / Promise / boolean
26 | CanActivateChild|Service|Observable / Promise / boolean
27 | CanDeactivate||Observable / Promise / boolean
28 | Resolve|   |Observable / Promise / boolean
29 | CanLoad|   |Observable / Promise / boolean
30 | 
31 | ### 守衛的行為模式
32 | `http://localhost:3200/home/admin/dashboard/users`
33 | 
34 | <<========  從最深的子路開始檢查到最上層路由  ========
35 | 
36 | - `CanDeactivate()`
37 | - `CanActivateChild()`
38 | 
39 | ========  從最上層路由開始檢查到最深的子路  ========>>
40 | 
41 | - `CanActivate()`
42 | 
43 | 當有非同步請求載入功能模組時，會檢查`CanLoad()`。如果任何一個守衛回傳了`false`，尚未處理的守衛會全部被取消，整個導向處理就會被取消。
44 | 


--------------------------------------------------------------------------------
/fundamentals/0-setup.md:
--------------------------------------------------------------------------------
 1 | ## Setup
 2 | 導讀：[2.Setup](https://angular.io/docs/ts/latest/guide/setup.html)
 3 | 
 4 | 
 5 | ### 快速開始新專案
 6 | Angular專案的結構龐大，需要組態相當多的東西，若再考量到打包（bundle）的問題，就更加複雜。
 7 | 所以建議直接以`@angular/cli`專案自動管理系統來協助我們開發Angular專案。
 8 | 
 9 | ### CLI快速啟動
10 | 確保你的環境有node.js和npm。開啟終端機（terminal），輸入下列指令，你會看到類似的結果：
11 | ```
12 | $ node -v
13 | $ v6.10.0
14 | $ npm -v
15 | $ 4.4.4
16 | ```
17 | 
18 | 安裝@angular/cli非常簡單，利用下列指令，進行全域安裝：
19 | ```
20 | $ npm install -g @angular/cli
21 | ```
22 | 
23 | 建立和啟動伺服專案如下。建立的過程包含npm安裝，需要幾分鐘。
24 | ```
25 | $ ng new my-app
26 | $ ...
27 | $ cd my-app
28 | $ ng serve --open
29 | ```
30 | > ``` --open ```是自動開啟瀏覽器選項，可以不輸入，專案成案被伺服後，你可以從終端機看到伺服的網址。
31 | > 通常是 http://localhost:4200/。你也可以用``` ng serve --port=5000 ```來啟動不同埠號伺服環境。
32 | 
33 | > ``` ng --help ```讓你可以快速瀏覽@angular/cli指令提供了那些選項、標旗（flag）、參數。
34 | 
35 | 
36 | ### ``` src ```資料夾
37 | 你主要的開發內容會放在``` src ```資料夾內，透過``` ng generate xxx ```你可以快速在``` src ```資料夾中建立諸如Component、service、Module、Pipe等Angular項目。
38 | 
39 | 
40 | ### 你還需要知道的事
41 | - 你知道yarn嗎？它被譽為效率更好的npm，透過設定@angular/cli的全域設定，你就可以讓新建立的專案使用yarn當作package管理器。
42 |   ```
43 |   $ ng set --global packageManager=yarn
44 | - 更多有關@angular/cli產生的檔案結構，請參考導讀的連結。
45 | - 因為以TypeScript開發的關係，所以建議使用Visual Studio Code作為開發編輯器，同時安裝好一下套件：
46 |   - Angular Language Service
47 |     - 在模板提供智慧提示（Intellisense）
48 |   - AngularDoc for Visual Studio Code
49 |     - 在側邊欄自動執行ng xxx 指令，`ng generate Component`
50 | 


--------------------------------------------------------------------------------
/fundamentals/3-forms.md:
--------------------------------------------------------------------------------
 1 | ## 表單／表格
 2 | 
 3 | 表單是現代網站不可或缺的一個重要環節，尤其在 Web 2.0 之後強調使用者能夠參與，商業網站的交易行為都必須仰賴表單。
 4 | 
 5 | 
 6 | ## HTML 表單
 7 | 表單開發的基礎就是 HTML，下例是一個簡單範例：
 8 | 
 9 | ```html
10 | <form action="action.php" method="post">
11 |   <label for="name">Name</label>
12 |   <input type="text" name="username" id="name" value="default value">
13 | </form>
14 | ```
15 | 
16 | `<form></form>`這個標籤就代表一個表單，在標籤內會寫入控制項，最常使用的控制項就是`<input>`，它又會根據`type`屬性內容的不同產生不同資料類型的輸入框。[這裡](https://www.w3schools.com/html/html_form_elements.asp)可以查閱其他的表單控制項。
17 | 
18 | ## Angular 表單
19 | 上述的說明相信已經可以建立對表單的基礎認識，但 Angular 表單是另外一個世界。 Angular 為了讓開發者能夠從容應付「雙向繫結」「驗證與狀態追蹤」「錯誤訊息」等開發者會碰到的問題，因此建立起 Angular 自己的表單架構。
20 | 
21 | Angular 的表單基礎單元有三個，他們又分別繼承自`AbstractControl`這個抽象的控制項：
22 | - AbstractControl
23 |   - FormControl（控制項）
24 |   - FormGroup（控制組）
25 |   - FormArray（控制陣列）
26 | 
27 | 控制項是裡面最小的單位，跟 HTML 裡面的控制項相仿。控制組和控制陣列則屬於容器型的項目，兩者都可以承裝任何繼承自 AbstractControl 的項目，而且沒有層數的限制。
28 | 
29 | 一般上基於資料模型，最外層通常是一個控制組，內部在根據資料模型不斷組合。下二例分別是一個簡單和複雜的例子。
30 | 
31 | - FormGroup
32 |   - FormControl
33 |   - FormControl
34 | 
35 | 
36 | - FormGroup
37 |   - FormControl
38 |   - FormGroup
39 |     - FormControl
40 |     - FormArray
41 |       - FormControl
42 |     - FormGroup
43 |       - FormControl
44 |   - FormArray
45 |     - FormGroup
46 |       - FormControl
47 | 
48 | 
49 | ## 模板驅動表單與反應式表單
50 | 在接下來導讀中會陸續介紹到這兩者，這裡先說明在這兩種迥異的 Angular 表單設計模式裡面，只有反應式表單中開發者才會跟上述的基礎單元短兵相接。模板驅動表單因為結構較為鬆散、自由，而且很多事情已經由 Angular 背後幫開發者接管了，所以就算沒有建立起基礎單元概念也無妨。但若要上手反應式表單開發，則是必要搞懂這些基本單位關係。
51 | 


--------------------------------------------------------------------------------
/fundamentals/5.The Root Module.md:
--------------------------------------------------------------------------------
 1 | ## 根模組
 2 | 導讀：[5. The Root Module](https://angular.io/docs/ts/latest/guide/appModule.html)
 3 | 
 4 | 
 5 | Angular 在瀏覽器初始化應用程式時，會去啟動（Bootstrap）根模組，這個根模組的根據慣例會被命名為 AppModule。這是一個典型的根模組。
 6 | ```javascript
 7 | import { NgModule }      from '@angular/core';
 8 | import { BrowserModule } from '@angular/platform-browser';
 9 | import { AppComponent }  from './app.Component';
10 | 
11 | @NgModule({
12 |   imports:      [ BrowserModule ],
13 |   declarations: [ AppComponent ],
14 |   bootstrap:    [ AppComponent ]
15 | })
16 | export class AppModule { }
17 | ```
18 | 
19 | 你會發現在這個根模組的 Metadata（中繼資料／元資料／詮釋資料等）中也有一個其他模組不會有的成員```bootstrap```，因為對根模組而言，在初始化時也需要去啟動一個**根元件**。
20 | 
21 | > 所以「根模組」和「根元件」都是應用程式初始化時對應邀啟動的項目。根元件在根模組的Metadata中指定，而根模組則是透過m```main.ts```中的```platformBrowserDynamic().bootstrapModule(AppModule);```所啟動。
22 | 
23 | ```javascript
24 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
25 | import { AppModule }              from './app/app.Module';
26 | 
27 | platformBrowserDynamic().bootstrapModule(AppModule);
28 | ```
29 | 當啟動根模組後，根模組內的指定根元件也會被啟動，並把根元件的模板放置到```index.html```中由根元件所設定```selector```HTML 標籤中。若你使用`@angular/cli`，通常就會在```index.html```找到以下的內容：
30 | ```html
31 | <!-- index.html -->
32 | <app-root>Loading...</app-root>
33 | ```
34 | 
35 | ### ```@NgModule()```讓 Class 變 Module
36 | 之前說過 Angular 的開發是 Class-based 的而且脫離不了 Decorator 和 ES Module。```@NgModule()```就是讓 Angular 知道這個 Class 是一個模組的關鍵。對根模組而言，在這個 Decorator 中，有三個最重要的成員：
37 | - imports: 匯入```BrowserModule```因為這個模組包含了許多瀏覽器環境中必須要用到的東西，譬如 Directive。
38 | - declarations: 宣告這個模組要用的項目，還記得需要被宣告的三兄弟是誰嗎？Component、Directive、Pipe。
39 | - boostrap: 指定讓 Angular 在初始化時要建立並插入到```index.html```的根元件。
40 | 


--------------------------------------------------------------------------------
/advanced/template syntax.md:
--------------------------------------------------------------------------------
 1 | # 進階模板變數使用
 2 | 
 3 | ## `as`暫存模板中的Async變數
 4 | [ngIf 跟他的新朋友 else 和 then](http://blog.kevinyang.net/2017/04/19/angular-ngIf-else/)
 5 | ```html
 6 | <div *ngIf="user|async">
 7 |   {{ (user|async)?.name }}
 8 | </div>
 9 | 
10 | <div *ngIf="user|async as _user">
11 |   {{ _user.name }}
12 | </div>
13 | ```
14 | 
15 | ## `*ngIf else then`的使用
16 | ```js
17 | @Component({
18 |   selector: 'ng-if-then-else',
19 |   template: `
20 |     <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
21 |     <button (click)="switchPrimary()">Switch Primary</button>
22 |     show = {{show}}
23 |     <br>
24 |     <div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>
25 |     <ng-template #primaryBlock>Primary text to show</ng-template>
26 |     <ng-template #secondaryBlock>Secondary text to show</ng-template>
27 |     <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
28 | `
29 | })
30 | class NgIfThenElse implements OnInit {
31 |   thenBlock: TemplateRef<any> = null;
32 |   show: boolean = true;
33 |   @ViewChild('primaryBlock')
34 |   primaryBlock: TemplateRef<any> = null;
35 |   @ViewChild('secondaryBlock')
36 |   secondaryBlock: TemplateRef<any> = null;
37 |   switchPrimary() {
38 |     this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock;
39 |   }
40 |   ngOnInit() { this.thenBlock = this.primaryBlock; }
41 | }
42 | ```
43 | 
44 | ## `ng-*`三兄弟
45 | - `ng-template`
46 |   - 如同上述的例子，多數的情況下會跟`*ngIf`搭配使用。
47 | - `ng-content`
48 |   - 自訂 Component 時做到 [transclude](https://toddmotto.com/transclusion-in-angular-2-with-ng-content) 的效果。
49 | - `ng-container`
50 |   - 是為了避免使用模板語法時必須放置在一個 HTML 標籤中，進而破壞了 CSS 的設計。
51 |     ```html
52 |       <span *ngIf="condition">value</span>
53 |       <ng-container *ngIf="condition">value</ng-container>
54 |     ```
55 | 


--------------------------------------------------------------------------------
/fundamentals/Everything about http call.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | ## 網址參數
 4 | 你可以手動的方式串聯好所有的網址參數再送出請求：
 5 | ```js
 6 | const queryString = `?search=${term}&action=opensearch&format=json&callback=JSONP_CALL`;
 7 | 
 8 | return this.jsonp
 9 |            .get(wikiUrl + queryString)
10 |            .map(response => <string[]> response.json()[1]);
11 | ```
12 | 
13 | 或是你可以使用內建的`URLSearchParams`來建立網址參數：
14 | ```js
15 | import { URLSearchParams } from '@angular/http';
16 | 
17 | const params = new URLSearchParams();
18 | params.set('search', term);
19 | params.set('action', 'opensearch');
20 | params.set('format', 'json');
21 | params.set('callback', 'JSONP_CALL');
22 | 
23 | return this.jsonp
24 |            .get(wikiUrl, { search: params })
25 |            .map(response => <string[]> response.json()[1]);
26 | ```
27 | 
28 | get方法預期的參數有：`get(url: string|Request, options?: RequestOptionsArgs)`，第二個參數是一個`RequestOptionsArgs`型別的物件，其中的`search`鍵內容會自動轉化成網址參數。利用`URLSearchParams`和`RequestOptionsArgs`會比你自己寫一長串的網址還要方便且更不容易出錯。
29 | 
30 | 
31 | ## `form-urlencoded` 的 Request Body
32 | 在某些形況下，可能會碰到後端無法接收（或開發者不習慣接收）`JSON.stringify`的 Request Payload。這時還是要送`application/x-www-form-urlencoded`的 Request Body，但每次都要用手轉一次嗎？這麼機械式的動作，其實可以用一個轉換函數來解決，然後在其他服務中匯入就好。
33 | 
34 | ```js
35 | // shared.ts
36 | import { URLSearchParams } from '@angular/http';
37 | 
38 | export function GenerateBody() {
39 |     return function generateBody(body: object): string {
40 |       const result = new URLSearchParams();
41 |       Object.keys(body).forEach(key => result.set(key, body[key]));
42 |       return result.toString();
43 |     };
44 | }
45 | 
46 | // logger.service.ts
47 | import { GenerateBody } from './shared';
48 | 
49 | export class LoggerService {
50 | 
51 |   private generateBody = GenerateBody();
52 | 
53 |   somethingPost(toSend: Type): Observable<SomeType> {
54 |     const body = this.generateBody(toSend);
55 | 
56 |     return this.http.post(`url`, body, headers)
57 |       .map(...)
58 |       .catch(...);
59 |   }
60 | }
61 | ```
62 | 


--------------------------------------------------------------------------------
/fundamentals/How to Form.md:
--------------------------------------------------------------------------------
 1 | # Angular 表單和反應式表單（Reactive Form）範例
 2 | 
 3 | ## 建立一個反應式表單和繫結在模板上
 4 | - 建立一個`FormGroup`的實體
 5 |   - 透過自行匯入`FormGroup`的`Class`後`new`一個實體。或
 6 |   - 透過`form = FormBuilder.group({})`產生一個新的`FormGroup`。
 7 | - 繫結到`<form></form>`中。
 8 |   - `<form [formGroup]="form"`
 9 | - `<form></form>`內部`Control`以`formControlName`，子`FormGroup`以`fromGroupName`繫結：
10 |   - `<input formControlName="name">`
11 |   - `<div formGroupName="address">`
12 | 
13 | 
14 | ```javascript
15 | export class FormComponent {
16 |   aFrom: FormGroup;
17 | 
18 |   constructor(private fb: FormBuilder) {
19 |     this.aForm = this.fb.group({
20 |       name: ['', Validators.required],
21 |       address: this.fb.group(new Address()),
22 |       address: this.fb.group({
23 |         zip: ['', Validators.required]
24 |       })
25 |     });
26 |   }
27 | }
28 | ```
29 | 
30 | ```html
31 | <form [formGroup]="aFrom">
32 |   <input type="text" formControlName="name">
33 |   <div formGroupName="address">
34 |     <input type="text" formControlName="zip">
35 |   </div>
36 | </form>
37 | ```
38 | 
39 | 
40 | ## 賦值給`FormGroup`項目
41 | 每個`FormGroup`的實體都一個兩個有關賦值的方法——`setValue({})`和`patchValue({})`（`FormControl`也有）。可以讓你隨需賦值給表單的項目，譬如注入變數有變化時，即時反應到表單內容，透過`ngOnChange`。
42 | 
43 | - `setValue()`：會檢查傳入參數是否符合表單的資料結構，否則會提示錯誤，也就是傳入的物件必須完全符合表單的資料結構。
44 | - `patchValue()`：不會檢查表單的資料結構和提示錯誤，但可以隨意只針對某一項進行賦值。
45 | 
46 | ```javascript
47 | export class AComponet {
48 |   @Inject() hero: Hero;
49 |   aForm: FormGroup;
50 | 
51 |   constructor() {}
52 | 
53 |   ngOnChange() {
54 |     this.aForm.setValue({
55 |       name: this.hero.name,
56 |       address: this.hero.addresses[0] || new Address()
57 |     })
58 |   }
59 | }
60 | ```
61 | 
62 | ## 重設表單
63 | 有時候會想提供重設表單的選項給使用者，尤其當表單太過複雜時。而且整個表單重設可以取消所有項目的狀態（state），讓依賴（pristine或touch）的錯誤提示訊息可以回到最初狀態。一樣可以搭配`ngOnChange`時進行重設。
64 | 
65 | ```javascript
66 | // 可以整個表單都重設
67 | this.aForm.reset();
68 | 
69 | // 或是針對某些項目進行重設
70 | this.aForm.reset({
71 |   name: this.hero.name,
72 |   address: this.hero.addresses[0] || new Address()
73 | })
74 | ```
75 | 
76 | 
77 | ## 動態產生表單內容`FormArray`
78 | 


--------------------------------------------------------------------------------
/fundamentals/4-bootstraping.md:
--------------------------------------------------------------------------------
 1 | # 啟動
 2 | 
 3 | 導讀：https://angular.io/guide/bootstrapping
 4 | 
 5 | Angular 是有一群 Angular 模組所組成的應用程式，最少會有一個根模組，慣例上會命名
 6 | 為 `AppModule`。根據 CLI 所產生的根模組內容如下：
 7 | 
 8 | ```ts
 9 | import { BrowserModule } from '@angular/platform-browser';
10 | import { NgModule } from '@angular/core';
11 | 
12 | import { AppComponent } from './app.component';
13 | 
14 | @NgModule({
15 |   declarations: [AppComponent],
16 |   imports: [BrowserModule],
17 |   providers: [],
18 |   bootstrap: [AppComponent],
19 | })
20 | export class AppModule {}
21 | ```
22 | 
23 | 模組是經由 `@NgModule` 修飾，裡面的項目包含三個所有模組都可使用的屬性
24 | （declarations, imports, providers; exports 在這裡使用是因為根模組通常不會匯出東
25 | 西），還有一個是根模組才會使用的屬性（bootstrap ）。
26 | 
27 | ### `declarations` 陣列
28 | 
29 | 模組就好比一個容器，用於存放和管理內部的零件，Angular 的模組也類似。因此在模組內
30 | 的零件就必須在這裡進行「宣告」，讓容器的零件連結起來，互相知道彼此的存在。需要警
31 | 告宣告的東西分別是「component 、 directive、pipe 」。
32 | 
33 | ### `providers` 陣列
34 | 
35 | Angular 跟其他前端架構比較大的不同是， Angular 運用了相依性注入的方式來注入服務
36 | 。`providers` 陣列就是為了用來「註冊」服務的。
37 | 
38 | ### `imports` 陣列
39 | 
40 | 就如同 JavaScript 的模組一樣，Angular 的模組也可以透過匯入的方式來匯入其他
41 | Angular 模組。除了你自己寫的模組之外，Angular 的程式庫也是透過模組的方式進行開發
42 | ，譬如 `HttpClientModule`。匯入模組後，就可以在這個模組內使用它「註冊」的服務和
43 | 匯出的「component 、 directive、pipe 」
44 | 
45 | ### `bootstrap` 陣列
46 | 
47 | 應用程式在「啟動」根模組時會根據根模組內的（`bootstrap` 陣列）所指示的元件插入到
48 | 瀏覽器的 DOM 裡面。在 `bootstrap` 陣列內指派多個元件是合法的，但這並不是常見的做
49 | 法。
50 | 
51 | ### 在 `main.ts` 中啟動
52 | 
53 | 程式的啟動通常放在另一個檔案中，這是一個有 CLI 產生的 `main.ts`，負責啟動整個應
54 | 用程式。
55 | 
56 | ```ts
57 | import { enableProdMode } from '@angular/core';
58 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
59 | 
60 | import { AppModule } from './app/app.module';
61 | import { environment } from './environments/environment';
62 | 
63 | if (environment.production) {
64 |   enableProdMode();
65 | }
66 | 
67 | platformBrowserDynamic().bootstrapModule(AppModule);
68 | ```
69 | 
70 | 這段程式碼建立一個瀏覽器平台用於動態編譯並啟動上述的 `AppModule`。啟動的過程包含
71 | 建立執行環境、從根模組中找到要被啟動的元件並建立元件的實體再插入到元件所定義的選
72 | 擇器名稱的元素標籤。
73 | 
74 | 以 CLI 所產生的檔案為例，`AppModule` 的選擇器名稱定義為 `app-root` ，那程式啟動
75 | 時 Angular 就會找到 `index.html` 內的 `<app-root></app-root>`，並做相應的動作。
76 | 
77 | 當你的專案逐漸長大後，根據功能進行劃分，建立新的功能模組並考慮以延遲載入的方式設
78 | 定，將大幅改善應用程式的效能。
79 | 


--------------------------------------------------------------------------------
/fundamentals/How to start a new Angular project.md:
--------------------------------------------------------------------------------
 1 | # 開發Angular專案的建議流程
 2 | 來源：[如何在 Angular CLI 建立的 Angular 2 開發環境呼叫遠端 RESTful APIs](http://blog.miniasp.com/post/2017/02/05/Setup-proxy-to-backend-in-Angular-CLI.aspx)
 3 | 
 4 | 1. 用@angular/cli建立一個新的專案，啟動它。
 5 |    ```
 6 |    $ ng new project-name
 7 |    $ cd project-name
 8 |    $ npm start 或是 ng serve
 9 |    ```
10 | 2. 設定Proxy Config，如果有必要向遠端伺服器或本機建立的`json-server`請求資源。
11 |   - 在專案目錄下建立一個`proxy.config.json`檔案
12 |     - `touch proxy.config.json`
13 |   - 設定對應的請求資源url轉換，下例讓所有以`/api`開頭的請求都自動轉換成向`http://140.xxx.xxx.xxx/api`請求。
14 |     ```json
15 |     {
16 |       "/api": {
17 |         "target": "http://140.xxx.xxx.xxx",
18 |         "secure": false
19 |       }
20 |     }
21 |     ```
22 |   - 修改`package.json`裡面的`start`指令，讓程式以proxy的方式啟動更方便。
23 |     ```json
24 |     "scripts": {
25 |       "start": "ng serve --proxy-config proxy.config.json"
26 |     }
27 |     ```
28 |     > **注意：**<br>雖然已使用代理的方式啟動，但你在瀏覽器console看到的訊息仍是向`http://localhost`請求，這並不是設定錯誤。
29 | 
30 | 3. 設定虛擬的RESTful API伺服器。如果在本機端開發時就希望可以完全模擬好介接的遠端API伺服器。以下以`json-server`為例。
31 |   - 全域安裝`json-server`。
32 |     ```
33 |     $ npm install -g json-server
34 |     ```
35 |   - 在專案目錄內或其他任意的地方設定好資料庫。
36 |     - `touch db.json`
37 |       ```json
38 |       {
39 |         "posts": [
40 |           { "id": 1, "title": "javascript" },
41 |           { "id": 1, "title": "typescript" },
42 |           { "id": 1, "title": "actionscript" }
43 |         ],
44 |         "profile": { "name": "typicode" }
45 |       }
46 |       ```
47 |   - 啟動`json-server`，預設埠號是3000，可以透過`--port`或`-p`自訂，避免衝突。還可以透過`--watch`即時觀察`db.json`有手動編輯檔案後，重新啟動伺服器。
48 |     ```
49 |     $ json-server ./db.json --port 3200 --watch
50 |     ```
51 |   - 自訂Routes。一般伺服器都以`/api`作為API的起始位置，若要最大程度的擬真，可以透過`json-server`的自訂Routes。
52 |     - 在`db.json`相同目錄，或其他任意位置，建立一個routes.json設定檔。
53 |       - `tounch routes.json`
54 |     - 編輯`routes.json`，讓`/api`自動指向`/`。
55 |       ```json
56 |       {
57 |         "/api": "/"
58 |       }
59 |       ```
60 |     - 啟動`json-server`。
61 |       ```
62 |       $ json-server --watch ./db.json --routes ./routes.json --port 3200
63 |       ```
64 |     - 嘗試請求`http://localhost:3200/api/posts`，應該就可以拿到正確資料。
65 | 


--------------------------------------------------------------------------------
/fundamentals/2-1-displaying-data.md:
--------------------------------------------------------------------------------
 1 | # 顯示資料
 2 | 導讀：https://angular.io/guide/displaying-data
 3 | 
 4 | 跟傳統的靜態網頁開發不同，當代的架構（framework）都是以動態的方式進行開發和呈現， Angular 也不例外。所以學會如何把在元件中宣告的變數動態的顯示在模板上就是最基礎的馬步。
 5 | 
 6 | ## 插補（interpolation）
 7 | 插補是是模板語法中最基本的用法，用來在模板中插補動態的變數：
 8 | 
 9 | ```js
10 | import { Component } from '@angular/core';
11 | 
12 | @Component({
13 |   selector: 'my-app',
14 |   template: `
15 |     <!-- 在模板中繫結變數 -->
16 |     <h1>{{title}}</h1>
17 |     <h2>My favorite hero is: {{myHero}}</h2>
18 |     `
19 | })
20 | export class AppComponent {
21 |   // 元件內宣告的變數
22 |   title = 'Tour of Heroes';
23 |   myHero = 'Windstorm';
24 | }
25 | ```
26 | 
27 | 插補內可填入的運算式（expression），這表示可以填入任何可以被「執行」式子：
28 | 
29 | ```html
30 | <!-- 字串的結合 -->
31 | <h1>{{title + '2017'}}</h1>
32 | <!-- 數字計算合併字串 -->
33 | <h2>My favorite hero is: {{myHero + (1 + 1)}}</h2>
34 | ```
35 | 
36 | > 最簡便的方式，請使用 `@angular/cli` 建立測試用專案
37 | > `ng new angular-test`
38 | 
39 | 
40 | ## `*ngFor` 顯示一連串的內容
41 | 插補的方式非常便利的在模板中顯示動態的內容，但如果要顯示的不僅僅是一個變數，而是一連串的大量資料呢？這時`*ngFor`就可以派上用，它的語法非常類似於 ES6 的 `for ( of )`。
42 | 
43 | ```js
44 | import { Component } from '@angular/core';
45 | 
46 | @Component({
47 |   selector: 'my-app',
48 |   template: `
49 |     <h1>{{title}}</h1>
50 |     <h2>My favorite hero is: {{myHero}}</h2>
51 |     <p>Heroes:</p>
52 |     <ul>
53 |       <!-- 透過 *ngFor 取得陣列中單一的項目 -->
54 |       <li *ngFor="let hero of heroes">
55 |         <!-- 在 *ngFor 的範疇內使用插補的方式顯示 -->
56 |         {{ hero }}
57 |       </li>
58 |     </ul>
59 |     `
60 | })
61 | export class AppComponent {
62 |   title = 'Tour of Heroes';
63 |   // 要顯示的大量資料
64 |   heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
65 |   myHero = this.heroes[0];
66 | }
67 | ```
68 | 
69 | > ### 可迭（iterable）
70 | > `*ngFor`能夠處理的目標必須是任何具備可迭的變數。
71 | > 所以一般的物件是無法透過`*ngFor`來顯示的。
72 | 
73 | 
74 | ## `*ngIf` 選擇性顯示
75 | 學會單一變數的插補和大量資料的顯示後，再加上根據條件來選擇性顯示內容，那一套基礎的 Angular 模板組合拳就算學會了。
76 | 
77 | `*ngIf`能夠接受布林值或最終可得到一個布林值的運算式（會套用 JavaScript 內建的自動轉型別機制），因此在使用上其實相當地靈活。
78 | 
79 | ```html
80 | <!-- 運算式 -->
81 | <p *ngIf="heroes.length > 3">There are many heroes!</p>
82 | <!-- 布林值 -->
83 | <p *ngIf="true">There are many heroes!</p>
84 | <!-- 0 會自動轉型別為 false -->
85 | <p *ngIf="0">There are many heroes!</p>
86 | ```
87 | 
88 | 
89 | ## 整理
90 | - `{{}}` 雙大括號用於單一變數的插補或顯示運算式結果。
91 | - `*ngFor` 顯示大量的資料，變數必須是可迭的。
92 | - `*ngIf` 根據條件選擇性顯示內容。
93 | 


--------------------------------------------------------------------------------
/fundamentals/RxJS in Angular.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | ## 基本的使用的RxJS
 4 | ```js
 5 | // 匯入要使用的RxJS的項目
 6 | import { Observable } from 'rxjs/observable';
 7 | import 'rxjs/add/operator/catch';
 8 | import 'rxjs/add/operator/map';
 9 | 
10 | getHeroes(): Observable<Hero[]> {
11 |   // 每個http的方法回傳的都是Observable<Response>物件
12 |   return this.http.get(this.heroesUrl)
13 |                   .map(this.extractData)
14 |                   .catch(this.handleError);
15 | }
16 | 
17 | // Response物件會自帶json()方法把body轉成JSON
18 | private extractData(res: Response) {
19 |   let body = res.json();
20 |   return body.data || {};
21 | }
22 | 
23 | private handleError(error: Response | any) {
24 |   let errMsg: string;
25 | 
26 |   if (error instanceof Response) {
27 |     const body = error.json() || '';
28 |     const err = body.error || JSON.stringify(body);
29 |     errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
30 |   }
31 |   else {
32 |     errMsg = error.message ? error.message : error.toString();
33 |   }
34 | 
35 |   // 實務上會回傳到伺服器做錯誤的紀錄
36 |   console.log(errMsg);
37 |   // 強制回傳一個Observable的錯誤，subscrible的時候，用第二個參數接錯誤
38 |   return Observable.throw(errMsg);
39 | }
40 | ```
41 | 
42 | 
43 | ### Observable vs. Promise
44 | 如果你原本就熟悉Promise的運作方式，你會發現兩者方式有點類似，只是在Promise時你期待的是用`then()`的方法去接，而Observable本身是一個**事件流**，所以每次會吐一個事件給你，這時就要用類似`map()`的方式去接（而實際上每一個HTTP請求也只會回傳一個事件回來而已，就那麼一個 XD）。
45 | 
46 | 
47 | 在捕捉錯誤的部分，方法一樣用`catch()`，只是Observable的`catch()`並非原生被JS/TS支援，所以要另外匯入`import 'rxjs/add/operator/catch'`（Map也一樣）。
48 | 
49 | 
50 | ## 回退到Promise的實作方式
51 | 雖然Observable可以帶來不少好處（但如果不會用、不想用就等於沒用），但是你還是可以把Observable重新轉成Promise物件來處理。以上述的`getHeroes()`為例：
52 | ```js
53 | import 'rxjs/add/topromise';
54 | 
55 | getHeroes(): Promise<Hero[]> {
56 |   return this.http.get(this.heroesUrl)
57 |                   .toPromise()
58 |                   .then(this.extractData)
59 |                   .catch(this.handleError);
60 | }
61 | 
62 | private extractData(res: Response) {
63 |   // 這裡拿到的還是Response物件，所以有json()方法
64 |   let body = res.json();
65 |   return body.data || {};
66 | }
67 | 
68 | private handleError(error: Response | any) {
69 |   let errMsg: string;
70 |   if (error instanceof Response) {
71 |     const body = error.json() || '';
72 |     const err = body.error || JSON.stringify(body);
73 |     errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
74 |   } else {
75 |     errMsg = error.message ? error.message : error.toString();
76 |   }
77 |   console.error(errMsg);
78 |   // 回傳一個Promise.reject強制丟出錯誤，後續一樣用catch()接。
79 |   return Promise.reject(errMsg);
80 | }
81 | ```
82 | 


--------------------------------------------------------------------------------
/learning.md:
--------------------------------------------------------------------------------
 1 | # Learning resources
 2 | 
 3 | ## Angular
 4 | - [Angular Docs](https://angular.io/docs/ts/latest/) - Official
 5 | - [Rangle's Angular Training Book](https://www.gitbook.com/book/rangle-io/ngcourse2/details)
 6 | - [Angular 2 + 折騰記](http://blog.csdn.net/bomess/article/category/6769292)
 7 | - [Angular 從 0 到 1](http://www.jianshu.com/p/2a12ddce544e)
 8 | - [Angular 2 之 30 天邁向神乎其技之路](http://ithelp.ithome.com.tw/users/20103745/ironman/1160)
 9 | - [Angular 4.x 修仙之路](https://segmentfault.com/blog/angular4)
10 | - [Angular 2 Fundamentals](http://courses.angularclass.com/p/angular-2-fundamentals)
11 | 
12 | #### 開發環境
13 | - [Angular 4 開發環境說明](https://gist.github.com/doggy8088/15e434b43992cf25a78700438743774a)
14 | - [clang-format](https://forum.angular.tw/t/clang-format/235)
15 | 
16 | #### Blog
17 | - [THOUGHTRAM](https://blog.thoughtram.io/all/)
18 | 
19 | #### 效能檢查
20 | - [Angular Performance Checklist](https://github.com/mgechev/angular-performance-checklist)
21 | 
22 | #### SSR
23 | - [Angular Server-Side Rendering with Angular CLI 1.3.x 基本設定](https://blog.kevinyang.net/2017/08/08/angular-cli-universal/)
24 | 
25 | 
26 | ## RxJS
27 | 
28 | #### Book
29 | - [Learn RxJS](https://www.gitbook.com/book/btroncone/learn-rxjs/details)
30 | - [Online book for RxJS documention](https://xgrommx.github.io/rx-book/index.html)
31 | - [Multicasting operators in RxJS](http://blog.kwintenp.com/multicasting-operators-in-rxjs/#operator-overview)
32 | 
33 | ### Video
34 | - [Observables and Reactive Programming in JS with RxJS](https://www.youtube.com/watch?v=Ah7Zu_lcd3o&list=PLZ66c9_z3umOuPSGsTu3mfzt6PGZeUyQZ)
35 | 
36 | #### Series
37 | - [30 天精通RxJS](http://ithelp.ithome.com.tw/users/20103367/ironman/1199)
38 | 
39 | #### Articles
40 | - [Angular 2 開發實戰：進階開發篇 - RxJS 新手入門](https://youtu.be/SDgX00fHos0) - Video
41 | - [RxJS: Observables, observers and operators introduction](https://toddmotto.com/rxjs-observables-observers-operators)
42 | - [RxJS Observable interop with Promises and Async-Await](https://medium.com/@benlesh/rxjs-observable-interop-with-promises-and-async-await-bebb05306875)
43 | - [What is RxJS? And Why You Should Know About It](https://news.thisdot.co/what-is-rxjs-and-why-you-should-know-about-it-2a5afe58cea)
44 | - [Observer vs Pub-Sub pattern](https://hackernoon.com/observer-vs-pub-sub-pattern-50d3b27f838c)
45 | 
46 | #### Visual
47 | - [RxMarbles](http://rxmarbles.com/)
48 | 
49 | 
50 | ## Redux
51 | - [Angular Service Layers: Redux, RxJs and Ngrx Store - When to Use a Store And Why ?](http://blog.angular-university.io/angular-2-redux-ngrx-rxjs/)
52 | - [Tutorial: Building Redux in TypeScript with Angular 4 (Angular 2+)](http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/)
53 | 


--------------------------------------------------------------------------------
/fundamentals/7.User Input.md:
--------------------------------------------------------------------------------
 1 | ## 使用者輸入
 2 | 導讀：[7. User Input](https://angular.io/docs/ts/latest/guide/user-input.html)
 3 | 
 4 | 
 5 | 前面講過很多如何把已經有資料傳送到介面上去顯示，但是應用程式與使用者的互動往往不是單向的，有時也需要從使用者那裏拿到一些資料。這時單向繫結就已經滿足不了需求了，還需要借助事件繫結和雙向繫結。
 6 | 
 7 | ### 怎麼知道使用者準備好了
 8 | 使用者甚麼時候輸入好資料？甚麼時候決定要送出資料？我們需要利用一些 Angular 提供的機制來讓使用者作出通知的動作。雙向繫結就好比我們隨時觀察使用者輸入了甚麼，事件繫結就是準備好一些按鈕或鍵盤按鍵，當使用者作出相關的動作時，就表示他們準備好要把資料送出了。
 9 | 
10 | > 圍繞使用者輸入最常運用到的技術不外乎是就是 HTML 裡面的表單（Form）元素，譬如```<input> <option> <button>```等，有些是讓使用者輸入資料的（雙向繫結或模板變數），有些則是讓使用者表達「我準備好送出資料了」（的事件繫結）。然後當事件被觸發後，就可以拿到資料做後續的處理。
11 | 
12 | 
13 | ### 雙向繫結 + 事件繫結
14 | 這是一個在處理表單輸入最常見的組合，對一個按鈕繫結```(click)```事件，再對輸入框做雙向繫結。當點選按鈕的事件發生時，我們就把資料寫入到我們要存放的地方```this.heroes```，然後把輸入框的東西清除。
15 | ```html
16 | <button type="button" (click)="onClick()"></button>
17 | <input type="text" name="data" [(ngModel)]="data">
18 | ```
19 | 
20 | ```javascript
21 | export class InputComponent {
22 |   data: string;
23 |   datas: string[];
24 |   onClick() {
25 |     this.datas = [...this.datas, data];
26 |     this.data = '';
27 |   }
28 | }
29 | ```
30 | 
31 | ### ```$event```物件，單純用事件處理呢
32 | 每個 DOM 都可以綁上事件且事件會攜帶一個載物（payload），所以我們可以單純利用這個特點來把 $event這個物件送入到我們要處理的 Method 中，這樣就就可以直接拿到值了。
33 | ```html
34 | <!-- 對輸入框繫結了鍵盤按鍵往上的事件 -->
35 | <input type="text" name="data" (keyup)="onKeyup($event)">
36 | <!-- 在對應要處理的方法中傳入$event這個物件 -->
37 | ```
38 | 
39 | ```javascript
40 | export class KeyUpComponent_v1 {
41 |   values = '';
42 | 
43 |   onKeyup(event: any) { // 這裡為了方便先不指定型別
44 |     this.values += event.target.value + ' | ';
45 |   }
46 | }
47 | ```
48 | 這裡```onKeyup(event)```中的```event```就是一個```$event```物件，每個```$event```物件都有```target```屬性，表示事件發生的目標 DOM。```value```屬性就很容易理解，就是裡面的值。
49 | 
50 | 
51 | 這樣的設計可以讓使用者在不需要多按下任何按鈕的情況下就直接拿到使用者輸入的值囉。但是每當使用者按下任意的鍵盤按鍵，事件就會被觸發，這是想要的效果嗎？
52 | 
53 | > TypeScript 是一個帶型別語言，但為了相容於 JS，在某些不知道參數型別的情況下可以指定```any```型別，但上述範例中傳入的```$event```這個事件物件，TypeScript是有為它提供型別定義的，```onKeyup(event: KeyboardEvent)```，補上型別後你就可以在編輯器中重獲智慧提示（Intellisense）的協助。
54 | 
55 | 
56 | ### 不需要大費周章，用模板變數吧
57 | 與其大費周章傳入一個巨獸般的```$event```事件物件，其實有更便利的做法，就是透過模板變數。
58 | ```javascript
59 | @Component({
60 |   selector: 'key-up3',
61 |   template: `
62 |     <input #box (keyup.enter)="onEnter(box.value)" (blur)="onEnter(box.value)">
63 |     <p>{{value}}</p>
64 |   `
65 | })
66 | export class KeyUpComponent_v3 {
67 |   value = '';
68 |   onEnter(value: string) { this.value = value; }
69 | }
70 | ```
71 | 
72 | 透過```#box```這個寫法為```<input>```綁上一個模板變數```box```，也就是```box```現在就代表著它所繫結的```<input>```這個DOM。透過```box.value```就可以輕易地取得```<input>```的值。
73 | 
74 | 
75 | 另外你會看到繫結的事件已不再使用籠統的```(keyup)```，而是```(keyup.enter)```這個 Angular 提供給你的虛擬事件（pseudo-event）。這樣程式可以很明確的知道當```Enter```被按下時才去取資料。
76 | 
77 | 
78 | 另外一個事件是```blur```（模糊），或許從字面上不好理解，但只要知道它對應的事件是```focus```就好懂多了。```focus```（聚焦）是指我們透過游標點選某個頁面元素，聚焦點就會在那裏。當它失去聚焦時就會發生```blur```事件（失去聚焦就是模糊了嘛）
79 | 
80 | 
81 | ### 整理
82 | - 用模板變數來繫結一個 DOM 元素
83 |   - 不要用傳入```$event```物件的方式來取得元素的值，而是用模板變數。
84 | - 傳遞值而不是元素
85 |   - ```onClick(#box.value)```
86 | - 保持模板狀態簡潔
87 |   - 當把目前的值存入儲存空間後，記得把介面也清理乾淨（以上述的例子就是把暫存文字的變數重設為空字串）。
88 | 


--------------------------------------------------------------------------------
/fundamentals/6.Displaying Data.md:
--------------------------------------------------------------------------------
 1 | ## 顯示資料
 2 | 導讀：[6. Displaying Data](https://angular.io/docs/ts/latest/guide/displaying-data.html)
 3 | 
 4 | 人是視覺動物，大家都喜歡眼見為憑。Component 恰恰就是一個處理和產生介面 Class。在當代前端架構使得SPA（Single Page Application）成為顯學，所以網頁中有很多資料是會變動的、由變數動態產生的，如何讓這些變數動態的顯示在介面或摸板上，就需要借助資料繫結（Data Binding）的技術。
 5 | 
 6 | 
 7 | ![data-binding](https://angular.io/generated/images/guide/architecture/databinding.png)
 8 | 
 9 | 
10 | 透過上述這些資料繫結的技術，我們就可以讓 Component 中的變數動態的顯示在介面上（在模板中繫結）。下面就是一個很典型的範例，在Component Class 中有一些成員，透過資料繫結技術在模板中進行繫結。
11 | ```javascript
12 | import { Component } from '@angular/core';
13 | @Component({
14 |   selector: 'my-app',
15 |   template: `
16 |     <h1>{{title}}</h1>
17 |     <h2>My favorite hero is: {{myHero}}</h2>
18 |     `
19 | })
20 | export class AppComponent {
21 |   title = 'Tour of Heroes';
22 |   myHero = 'Windstorm';
23 | }
24 | ```
25 | 
26 | > 你或許會疑惑，你定義了很多的 Component Class，但卻沒有任何實際使用```new```來產生新的元件實體，但是為什麼介面就會自動產生了。這個「黑魔法」的背後是嚴謹的利用 Decorator 來定義 Metadata，讓 Angular 可以你訂定的 Component 應該長怎樣——```selector: 'my-app'```，當你在模板中插入標籤```<my-app></my-app>```，Angular就會自動地幫你產生新的 Class 實體並插入對應的 HTML 模板。
27 | 
28 | 
29 | ### 行內模板還是模板檔案？
30 | 在上述的例子中你可以看到```@Component({ template: ``})```用了行內模板（template inline）搭配 ES2015 的字串模板——反單引號，可以很方便用行內的方式寫模板，還會可以自動換行。但實務上，更建議以模板檔案的方式切開邏輯和模板，除非你的模板真的很小。```@Component({ templateUrl: 'path' })```。
31 | 
32 | ```javascript
33 | // template inline
34 | @Component({
35 |   template: `
36 |     <div>template inline</div>
37 |   `
38 | })
39 | 
40 | // template file
41 | @Component({
42 |   templateUrl: './Component.html'
43 | })
44 | ```
45 | 
46 | 
47 | ### TypeScript 的建構式與成員宣告
48 | TypeScript 的類別寫法和 JS 不盡然相同，尤其在加入型別的設定後，對於熟悉 C# 的開發者應該就不會陌生。
49 | ```javascript
50 | export class AppCtorComponent {
51 |   title: string; // 這裡只是宣告和型別的定義
52 |   myHero: string = 'Windstorm'; // 把宣告和賦值寫在一起
53 | 
54 |   constructor(private auth: AuthService) { // 注入服務
55 |     this.title = 'Tour of Heroes'; // 這裡才是真正的賦值
56 |     this.someVariable = 'some value'; // 報錯，尚未宣告
57 |     this.auth.signout(); // 服務自動成為成員
58 |   }
59 | }
60 | ```
61 | 如果你寫過 ES2015 的 Class 又沒有接觸過 TypeScript，那應該會對上述的寫法有些許困惑。但籠統地說這些都是 TypeScript 給予開發者們方便的語法糖而已。
62 | 
63 | 
64 | ### ```*ngFor *ngIf``` 雙寶
65 | 這兩個 Directive 之前就介紹過，它們是寫模板時的利器，讓你可以把動態的變數插入到模板中。
66 | - ```*ngIf="boolean"```
67 |   - 如果右邊的運算式（Expression）是「對」的，這個 HTML 標籤就會顯示在模板中，否則不會寫入（不是隱藏喔）
68 |   - ```*ngIf```可接受的不限於 boolean 型別的變數，這裡會運用 JS 的自動轉型別機制。
69 | - ```*ngFor="let variable of array"```
70 |   - 如果你知道 ES2015 的```for ( of )```，那一定就不難理解了。簡單講就是列舉一個具有「可迭」（iterable）屬性的變數，譬如陣列，讓你可以快速產生大量相同結構但不同內容的 HTML 標籤。
71 | 
72 | ```javascript
73 | export class AppComponent {
74 |   heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
75 |   isShow: boolean = true;
76 |   onClick() { this.isShow = !this.isShow; }
77 | }
78 | ```
79 | ```html
80 | <button type="button" (click)="onClick()">Toggle</button>
81 | <ul *ngIf="isShow">
82 |   <li *ngFor="let hero of heroes">{{ hero }}</li>
83 | </ul>
84 | ```
85 | 
86 | 上述是一個很簡單的範例，```*ngIf="isShow"```配合```onclick()```這個方法，控制了```ul```這個無序號清單的顯示與否，```*ngFor```則是大量產生相同的```<li></li>```，但有著不一樣的內容。很方便吧？
87 | 
88 | > ```Angular 4.x.x```在```*ngIf```中新增了```else```，讓```*ngIf```在判斷到「錯」的時候自動顯示另一個模板。
89 | 
90 | ```html
91 | <ng-template #dataHide>Data Hide!!!</ng-template>
92 | <ul *ngIf="isShow" else dataHide>
93 |   <li *ngIf="let hero of heroes">{{ hero }}</li>
94 | </ul>
95 | ```
96 | 


--------------------------------------------------------------------------------
/fundamentals/3-1-user-input.md:
--------------------------------------------------------------------------------
  1 | # 使用者輸入
  2 | 導讀：https://angular.io/guide/user-input
  3 | 
  4 | ## 繫結事件
  5 | 表單所承載的一個任務就是讓使用者不只單向從網站取得訊息，也可以反映自己的想法（Web 2.0）。但是網站無法知道使用者何時想要送出他們的資料。因此我們需要定義好當使用者送出他們的資料時我們該怎麼做（的函數），在把這些函數繫結到使用者送出的事件（HTML 定義好的事件）。
  6 | 
  7 | 好比，通常使用者會在填寫好資料後，會點選某個按鈕。又或者在下拉選單中選擇某個選項會自動對介面產生變化。這些都屬於 [DOM 事件](https://developer.mozilla.org/en-US/docs/Web/Events)，這些標準的事件很多， Angular 網站並不會一一列出，所以當你需要搜尋相關事件時，別忘了到上述的 MDN 查詢。
  8 | 
  9 | 下列是一個簡單的事件繫結的範例：
 10 | ```html
 11 | <!-- html -->
 12 | <button (click)="onClickMe()">Click me!</button>
 13 | ```
 14 | 
 15 | ```js
 16 | // Component
 17 | @Component({
 18 |   selector: 'click-me',
 19 |   template: `
 20 |     <button (click)="onClickMe()">Click me!</button>
 21 |     {{clickMessage}}`
 22 | })
 23 | export class ClickMeComponent {
 24 |   clickMessage = '';
 25 | 
 26 |   onClickMe() {
 27 |     this.clickMessage = 'You are my hero!';
 28 |   }
 29 | }
 30 | ```
 31 | 
 32 | 我們需要先在 Component 中纖定義好當事件發生時（這裡是 click 事件），需要處理的動作。然在模板中繫結到按鈕的「點選」事件，這樣當點選事件被觸發時，就會自動執行預設好的動作。
 33 | 
 34 | 
 35 | ## 取得使用者輸入的 `$event` 物件
 36 | 上面說過，事件是有 HTML 所定義，除了定義事件直接，每當 DOM 事件發生時都會攜帶一個載體（payload），這個載體就是很常看到的`$event`。`$event`所代表的是發生事件的那個 DOM 實體，既一個物件。
 37 | 
 38 | 下例是一個當`(keyup)`（鍵盤按鈕往上）的事件繫結。
 39 | 
 40 | ```js
 41 | template: `
 42 |   <input (keyup)="onKey($event)">
 43 |   <p>{{values}}</p>
 44 | `
 45 | 
 46 | export class KeyUpComponent_v1 {
 47 |   values = '';
 48 | 
 49 |   onKey(event: KeyboardEvent) {
 50 |     this.values += event.target.value + ' | ';
 51 |   }
 52 | }
 53 | ```
 54 | 
 55 | - 當發生`keyup`事件時，會執行`onKey()`函數，同時函數還會得到一個載體。
 56 | - 在`onKey(event: KeyboardEvent)`定義好參數和其型別。
 57 |   - 如果你剛剛有點 MDN 的連結，你應該會發現事件還被細分為很多種，拜 Typescript 所賜，這些分門別類的事件都有其相對應的型別，指定正確的型別，就可以發揮智慧提示。
 58 | - 執行函數後，`this.values`的值被更新，同時也會反應在模板中的`{{ values }}`。
 59 | 
 60 | 
 61 | ## 消除令人混淆的`$event`物件傳遞
 62 | 上述的作法，或許已經相當不錯，但傳遞一個事件的載體總是讓人不易理解，對程設而言，傳遞原始型別更具有意義同時也更容易理解。
 63 | 
 64 | 第一種作法是，可以直接把`$event.target.value`移動到模板中，這樣函數定義時就可以採取更有意義參數型別。
 65 | 
 66 | ```js
 67 | template: `
 68 |   <input (keyup)="onKey($event.target.value)">
 69 |   <p>{{values}}</p>
 70 | `
 71 | 
 72 | export class KeyUpComponent_v1 {
 73 |   values = '';
 74 | 
 75 |   onKey(input: string) {
 76 |     this.values += input + ' | ';
 77 |   }
 78 | }
 79 | ```
 80 | 
 81 | 第二種作法更值得被推薦，利用模板變數進行傳遞，不只在函數中有很好理解的原始型別，就連在模板也可以直接消除`$event.target.value`這個冗長又不直觀的寫法。
 82 | 
 83 | ```js
 84 | template: `
 85 |   <input (keyup)="onKey(box.value)" #box>
 86 |   <p>{{ box.value }}</p>
 87 |   <p>{{ values }}</p>
 88 | `
 89 | 
 90 | export class KeyUpComponent_v1 {
 91 |   values = '';
 92 | 
 93 |   onKey(input: string) {
 94 |     this.values += input + ' | ';
 95 |   }
 96 | }
 97 | ```
 98 | 
 99 | 
100 | ## 以`key.enter`和`blur`事件來改善效能
101 | 以上述例子來看，每一次鍵盤按鍵往上時就會觸發回呼的函數，對效能的影響實在太大了而且使用者往往在打字時會有思考的中斷點，因此何不讓使用者自己決定準備好後再觸發事件。我們直接透過範例進行說明：
102 | 
103 | ```js
104 | @Component({
105 |   selector: 'little-tour',
106 |   template: `
107 |     <input #newHero
108 |       (keyup.enter)="addHero(newHero.value)"
109 |       (blur)="addHero(newHero.value); newHero.value='' ">
110 | 
111 |     <button (click)="addHero(newHero.value)">Add</button>
112 | 
113 |     <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
114 |   `
115 | })
116 | export class LittleTourComponent {
117 |   heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
118 |   addHero(newHero: string) {
119 |     if (newHero) {
120 |       this.heroes.push(newHero);
121 |     }
122 |   }
123 | }
124 | ```
125 | 
126 | - 在同樣`input`標籤中，繫結了兩個事件：
127 |   - `keyup.enter`： Angular 自訂事件，當`Enter`鍵往上時。
128 |   - `blur`： DOM 的標準事件，字面的意思是模糊（focus的相對意思），實際的意思是當焦點離開了這個 DOM。
129 | 
130 | 繫結兩個事件是為了確保使用者就算忘了按下`Enter`鍵就跳開這個輸入框時也會自動觸發回呼函數的貼心設計。這樣的技巧在實務上很常使用。
131 | 
132 | 
133 | ## 整理
134 | - 儘量用模板函數來指向網頁的元素，好處是除了更有語意之外，模板變數可以被字元素和兄弟元素使用。
135 |   - 但別忘了原生的原理和概念——透過 $event.target.value 傳遞。
136 | - 盡量傳遞實際所須的值給回呼函數而不是把整個事件載體傳遞過去。
137 | - 儘量保持模板的陳述式簡單——上述的`blur`事件繫結同時處理了兩件事情，
138 | 


--------------------------------------------------------------------------------
/fundamentals/9.Dependency Injection.md:
--------------------------------------------------------------------------------
  1 | ## 相依性注入
  2 | 導讀：[9. Dependency Injection](https://angular.io/docs/ts/latest/guide/dependency-injection.html)
  3 | 
  4 | 
  5 | ### 為什麼需要相依性注入
  6 | 我們大可以在需要的時候直接使用`new`來產生我們想要的服務：
  7 | 
  8 | ```javascript
  9 | export class Car {
 10 | 
 11 |   public engine: Engine;
 12 |   public tires: Tires;
 13 | 
 14 |   constructor() {
 15 |     this.engine = new Engine();
 16 |     this.tires = new Tires();
 17 |   }
 18 | }
 19 | ```
 20 | 但是這樣會讓我們的元件和服務太過於耦合，使得`Car`這個`class`脆弱、擴充性差、難以測試（Brittle, Inflexible, Hard to Test）。想像以下，今天如果`Engine`這個服務修改實作方式，使得初始化更以往不相容，就會導致`Car`必須要修改寫法，否則就會產生錯誤。此外，透過 DI（相依性注入），我們可以確保服務的唯一性（Singleton），如果服務是用於存放某些需要跨元件的資料，則沒有唯一性就辦不到跨元件之間的資料共用。
 21 | 
 22 | 
 23 | ### Injector
 24 | Angular 內部是透過一個名為 Injector 的儲存器來管理所有註冊注入，確保當你在元件中請求注入時，Angular 會往 Injector 中尋找你要的注入項，如果沒有他們自動產生，如果已經有了，它會回傳，這樣就可以確保你拿到的注入是唯一的（當然 Angular 是支援多層 Injector，你還是可以拿到一個全新的注入）。你不需要操心 Injector，因為 Angular 會自動管理它，並且在程式啟動時就自動產生：
 25 | 
 26 | ```javascript
 27 | platformBrowserDynamic().bootstrapModule(AppModule);
 28 | ```
 29 | 
 30 | 
 31 | ### 註冊服務
 32 | ```javascript
 33 | @NgModule({
 34 |   providers: [
 35 |     {
 36 |       provide: Token // 通常是縮寫 AuthService -> auth
 37 |       useClass: class // 如果是class based
 38 |       useValue: Object // 非class用，這時provide的token需要用new Opaque Token 產生
 39 |     }
 40 |   ]
 41 | })
 42 | ```
 43 | 
 44 | 如果使用 Class-based 的方式可以用語法糖的寫法：
 45 | ```javascript
 46 | import {className} from 'xxx';
 47 | import {className} from 'xxx';
 48 | 
 49 | @NgModule({
 50 |   providers: [className, className]
 51 | })
 52 | 
 53 | import {AuthService} from 'xxx';
 54 | import {UserService} from 'xxx';
 55 | 
 56 | @NgModule({
 57 |   providers: [AuthService, UserService]
 58 | })
 59 | ```
 60 | 
 61 | ### 到底該注入到哪裡呢？
 62 | 模組還是元件？服務應該註冊在哪裡取決於注入服務使用的廣度，如果一個廣泛使用的服務，理應注入到根模組中。但如果僅僅用於某幾個元件，則可以考慮注入到元件即可。
 63 | 
 64 | ### `@Injectable`的意思
 65 | Injector 負責初始化`class`，初始化時如果發現該`class`有依賴注入且沒有加註`@Injectable`，則會丟出錯誤。
 66 | 所以`@Injectable`是指被加註的`class`「可以被注入依賴」而不是這個`class`「可以被當作依賴注入」。
 67 | `@Component`, `@Directive`, `@Pipe`都不需要加註是因為他們是`@Injectable`的 subtype。
 68 | 所以在撰寫服務時，建議最好都加上`@Injectable`修飾，以免出錯。
 69 | 
 70 | ```javascript
 71 | import { Injectable } from '@angular/core';
 72 | 
 73 | @Injectable()
 74 | export class SomeService {
 75 |   constructor(private di: DITYPE) {}
 76 | }
 77 | ```
 78 | 
 79 | 
 80 | ### 注入服務
 81 | 服務通常會注入到元件中，當然也可以注入到服務裡面。注入的方式是寫在`constructor`的參數
 82 | ```javascript
 83 | // Module
 84 | @NgModule({
 85 |   providers: [
 86 |     { provide: TOKEN, useClass: ClassType }
 87 |   ]
 88 | })
 89 | 
 90 | // Component
 91 | constructor(@Inject(TOKEN) private variableName: ClassType) {}
 92 | ```
 93 | 如果是用語法糖的方式去註冊則可以直接寫成
 94 | ```javascript
 95 | // Module
 96 | @NgModule({
 97 |   providers: [AuthService]
 98 | })
 99 | 
100 | // Component
101 | constructor(private authService: AuthService) {}
102 | ```
103 | 
104 | 另外，若只想在單純在某個元件注入服務，你只需要這樣做：
105 | ```javascript
106 | import { Component } from '@angular/core';
107 | import { SomeService } from './some-service';
108 | 
109 | @Component({
110 |   providers: [SomeService]
111 | })
112 | export class SomeComponent
113 | ```
114 | 
115 | 
116 | ### 既然有語法糖，為什麼還需要設定 TOKEN？
117 | TOKEN 的方式讓程式的維護性更高，TOKEN 確保注入的目標名稱保持一致，就算使用的類別不同。
118 | 
119 | ```javascript
120 | import { Logger } from './logger';
121 | @NgModule({
122 |   providers: [
123 |     { provide: 'Logger', useClass: Logger}
124 |   ]
125 | })
126 | 
127 | // 當未來使用了改良版的 Logger，TOKEN 仍然不變
128 | 
129 | import { BetterLogger } from './better-logger';
130 | @NgModule({
131 |   provides: [
132 |     { provide: 'Logger', useClass: BetterLogger }
133 |   ]
134 | })
135 | 
136 | // Component 的注入都一樣
137 | @Component({})
138 | export class SomeComponent {
139 |   constructor(@Inject('Logger') private logger) {}
140 | }
141 | ```
142 | 
143 | 在使用語法糖的情況底下，其實是藉助 TypeScript 的強型別，讓 Angular 在多數情況下都知道該怎麼做。
144 | ```javascript
145 | @NgModule({
146 |   providers: [SomeService]
147 | })
148 | 
149 | // 其實等同於
150 | 
151 | @NgModule({
152 |   providers: [
153 |     { provide: SomeService, useClass: SomeService }
154 |   ]
155 | })
156 | ```
157 | 在注入時，借助 TypeScript 的強型別可以寫得更方便。
158 | ```javascript
159 | constructor(@Inject(SomeService) private someService: SomeService) {}
160 | 
161 | // 簡化為
162 | 
163 | constructor(private someService: SomeService) {}
164 | ```
165 | 
166 | `@Inject`才是實際（手動）指定要注入的目標，變數冒號後的`class`只是 TypeScript 的型別（寫了才會有 Intellisense）。後者就是因為強型別讓 Angular 可以知道要注入的目標是誰。
167 | 
168 | 
169 | ### 可選的注入
170 | 若注入服務可有可無，則可以借助`@Optional` decorator 加註
171 | ```javascript
172 | import { @Optional } from '@angular/core';
173 | 
174 | constructor(@Optional private variableName: Type) {}
175 | ```
176 | 
177 | ### 你還需要知道的東西！
178 | - 如果你想要讓一個 TOKEN 指向一個已經註冊`class`，記得使用`useExisting: {provide: OldLogger, useExisting: NewLogger }`
179 | - 如果你要註冊的對象不是屬於 Class-based，譬如一個紀錄應用程式基本資料物件，記得用`useValue: {provide: OldLogger, useExisting: silentLogger }`
180 |   - TypeScript 的`interface`不是一個有效的 TOKEN，為此你需要使用`OpaqueToken`（Angular4+改為`InjectionToken`）或 TypeScript 的`abstract class`。
181 | - 如果你想要根據不同的情境提供不同注入項目，請參考 factory provider。
182 | 


--------------------------------------------------------------------------------
/fundamentals/3-2-template-driven-forms.md:
--------------------------------------------------------------------------------
  1 | # 模板驅動表單
  2 | 導讀：https://angular.io/guide/forms
  3 | 
  4 | 前面說過，web 2.0  出現讓表單地位變得更為重要，尤其對很多商用網站來說，消費者在訂購商品時勢必得要面對填寫資料的這一步。在 AngularJS 時期，透過雙向繫結和大量內建的表單 Directive 來試圖達到更方便建立表單的目的。同樣的在 Angular 中也保留了下來，且被命名為模板驅動表單（Template Driven Forms）。
  5 | 
  6 | 開發表單是需要一定程度的設計技巧，在配合架構的協助才能事半功倍，那架構需要提供那些協助呢？以下這些是 Angular 所提供開發表單核心功能。這些核心功能將決定你是否能夠得心應手的開發表單。
  7 | 
  8 | - 雙向繫結
  9 | - 狀態追蹤與驗證
 10 | - 錯誤訊息與停用
 11 | 
 12 | 上述這樣核心功能也正是「模板驅動表單」與「反應式表單」在開發表單上的差異之處。顧名思義，模板驅動表單也就是在核心功能的運用上會更多放在模板。
 13 | 
 14 | 
 15 | ## 模板驅動表單
 16 | 如果你熟悉 AngularJS 那你應該不會對 TDF （Template-Driven Forms）感到陌生。顧名思義， TDF 就是從模板下後，去開發表單，上述所提到的架構所提供的協助也都直接體現在模板中，因此 TDF 會把表單大部分的焦點都放在模板中。相對的，後續會提到另一個種表單的開發模式為反應式（Model-Driven）。然而不論是模型還是模板驅動，表單開發大致都需要下列這些東西：
 17 | 
 18 | - 表單的模型。
 19 | - 根據模型建立好模板。
 20 | - 繫結模型與模板中的表單控制項（Form Control）。
 21 | - 當使用者輸入時，驗證控制項的內容是否符合要求。
 22 | - 當不符要求時，顯示易懂的錯誤訊息。
 23 | - 當表單不符合要求，應鎖定「送出」按鈕。
 24 | - 設定好送出事件的回呼函數。
 25 | 
 26 | > #### 表單模組
 27 | > 不論是模板驅動還是反應式的表單，都必須正確的匯入相對的模組。
 28 | > 所有有關表單的 Angular 模組都被歸納到 `@angular/forms` 這個 js 模組內。
 29 | > 要順利使用模板驅動表單，必須先匯入：
 30 | > ```js
 31 | > import { FormsModule }   from '@angular/forms';
 32 | > @NgModule({
 33 | > imports: [ FormsModule ]
 34 | > ```
 35 | 
 36 | 
 37 | ## 模型
 38 | 表單所要填寫的內容通常是固定的，每一個表單都有自己的資料模型，下例就是一個針對超級英雄的資料模型：
 39 | 
 40 | ```js
 41 | export class Hero {
 42 | 
 43 |   constructor(
 44 |     public id: number,
 45 |     public name: string,
 46 |     public power: string,
 47 |     public alterEgo?: string
 48 |   ) {  }
 49 | 
 50 | }
 51 | ```
 52 | 
 53 | 透過 class 定義好模型，就可以清楚的知道模型的資料內容有哪些。
 54 | 
 55 | 
 56 | ## 元件
 57 | 有了模型之後，就可以在元件中針對模型做操作：
 58 | 
 59 | ```js
 60 | import { Component } from '@angular/core';
 61 | import { Hero } from './hero';
 62 | 
 63 | @Component({
 64 |   selector: 'hero-form',
 65 |   templateUrl: './hero-form.component.html'
 66 | })
 67 | export class HeroFormComponent {
 68 | 
 69 |   powers = ['Really Smart', 'Super Flexible',
 70 |             'Super Hot', 'Weather Changer'];
 71 | 
 72 |   model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
 73 | 
 74 |   submitted = false;
 75 | 
 76 |   onSubmit() { this.submitted = true; }
 77 | 
 78 |   newHero() {
 79 |     this.model = new Hero(42, '', '');
 80 |   }
 81 | 
 82 |   // TODO: Remove this when we're done
 83 |   get diagnostic() { return JSON.stringify(this.model); }
 84 | }
 85 | ```
 86 | 
 87 | - powers：為了限制使用者只能從下拉選單中選取預設的選項。
 88 | - models：作為新增超級英雄時雙向繫結的目標。
 89 | - submitted：作為控制送出事件尚未結束的依據。
 90 | - onSubmit：送出事件觸發的回呼函數。
 91 | - get diagnostic：是一種常見偵錯方法，藉由直接在介面顯示當下模型的值來檢視表單的開發是否如預期般理想。
 92 | 
 93 | 
 94 | ## 模板
 95 | 下例的模板，有許多有關模板驅動表單的重要觀念，待一一解釋。
 96 | 
 97 | ```html
 98 | <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
 99 |   <div class="form-group">
100 |     <label for="name">Name</label>
101 |     <input type="text" class="form-control" id="name"
102 |            required
103 |            [(ngModel)]="model.name" name="name"
104 |            #name="ngModel">
105 |     <div [hidden]="name.valid || name.pristine"
106 |          class="alert alert-danger">
107 |       Name is required
108 |     </div>
109 |   </div>
110 | 
111 |   <div class="form-group">
112 |     <label for="alterEgo">Alter Ego</label>
113 |     <input type="text" class="form-control" id="alterEgo"
114 |            [(ngModel)]="model.alterEgo" name="alterEgo">
115 |   </div>
116 | 
117 |   <div class="form-group">
118 |     <label for="power">Hero Power</label>
119 |     <select class="form-control" id="power"
120 |             required
121 |             [(ngModel)]="model.power" name="power"
122 |             #power="ngModel">
123 |       <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
124 |     </select>
125 |     <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
126 |       Power is required
127 |     </div>
128 |   </div>
129 | 
130 |   <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
131 |   <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
132 | </form>
133 | ```
134 | 
135 | ### `ngForm` & `formControl`
136 | 當你在 Angular 模組中匯入 FormsModule 時，其下元件的模板一旦出現`<form></form>`， Angular 就會很雞婆加上一個隱藏的 Directive —— `ngForm`。不只如此，該表單的控制項也會一併接管（譬如 input select）。
137 | 
138 | ```html
139 | <form #heroForm="ngForm">
140 | ```
141 | 
142 | 透過上述模板變數作法，就可以指向這個`ngForm`。接下來會透過一開始說的核心功能來一一剖析。
143 | 
144 | ### 雙向繫結
145 | 雙向繫結指的是元件（ts 檔）所建立的模型實體與模板的表單控制項之間的連動，既任一方有異動時，另一方也會**立 即 跟 著 異 動**。
146 | 
147 | 在元件中，`this.models`已經建立好一個新的表單模型實體。接下來要做的就是把模型繫結到模板中。下列可以看到，透過 Angular 提供的雙向繫結`[(ngModel)]`語法，可以很輕易做到模型與模板之間的繫結。
148 | 
149 | > #### `[(ngModel)]`
150 | > 雙向繫結的寫法乍看相當特殊，但也正如其字面所代表的，
151 | > 正是 `[property binding]` + `(event binding)` 所結合的一種便利型式（語法糖）。
152 | > 使用者可以做到不須關心底層如何實現，只要會用就好。
153 | > 但要特別注意的是，控制項一定要加上`name="something"`屬性。
154 | > 因為在模板驅動表單的情境下， Angular 會依據`name`屬性的值來接管控制項。
155 | 
156 | ### 狀態追蹤與驗證、錯誤訊息與停用
157 | 控制項每分每秒都有可能隨著使用者的輸入產生異動，其狀態也自然不斷地在改變。與其等使用者千辛萬苦填完整份表單後才一次過的顯示所有錯誤訊息，針對每一個控制項即時地告訴使用者狀態是否符合要求更能有好的使用經驗。
158 | 
159 | 還記得取得表單實體時需要建立一個模板變數指派給`ngForm`嗎？控制項的也是類似的，只是 Directive 換成了 ngModel
160 | 
161 | ```html
162 | <input type="text" class="form-control" id="name"
163 |        required
164 |        [(ngModel)]="model.name" name="name"
165 |        #name="ngModel">
166 |        <!-- 透過把模板變數指派給 #name="ngModel" 就可以取得控制項的實體 -->
167 |        <!-- 在透過實體的狀態成員來決定是否顯示錯誤訊息 -->
168 | <div [hidden]="name.valid || name.pristine"
169 |      class="alert alert-danger">
170 |   Name is required
171 | </div>
172 | ```
173 | 
174 | 上述的條件表示，在控制項符合要求（`name.valid`），或控制項尚未被碰觸（`name.pristine`）的情況下隱藏錯誤訊息。當然，你也可以用`*ngIf`搭配`name.invalid && name.touched`，換一種形式來顯示。
175 | 
176 | 
177 | 除此之外，開發者經常會做的一個防呆機制就是避免使用者在表單不符合條件的情況下送出表單。
178 | 
179 | ```html
180 | <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
181 | ```
182 | 
183 | 透過模板變數指派給`ngForm`後，即可以取得模板中的表單實體，同樣透過表單當下的狀態來決定［送出］按鈕是否停用。
184 | 
185 | > #### `ngForm`
186 | > `ngForm`會很智慧逐一檢查表單內的所有控制項，
187 | > 並即時根據每個控制項的狀態來改變自己的狀態。
188 | > 我們只需要會用，剩下的就交給 Angular 的黑魔法。
189 | 
190 | 
191 | ### 表單送出事件`(ngSubmit)`
192 | 最後要提的是表單的送出事件。MDN 文件上有清楚載明`submit`事件，但為何 Angular 還要自訂一個`ngSubmit`事件呢？大致是原生的`submit`事件的機制並非 Angular 所期待的，因此建議開發者們使用`ngSubmit`而非原生的`submit`事件。
193 | 
194 | ```html
195 | <form (ngSubmit)="onSubmit()">
196 | ```
197 | 
198 | ```js
199 | onSubmit() { this.submitted = true; }
200 | ```
201 | 
202 | 跟一般事件繫結的實作方式如出一轍，當事件被觸發後，就會執行預設好的回呼函數（通常是呼叫服務的方法來透過 API 把表單的資料送到伺服器。
203 | 
204 | 
205 | ### 整理
206 | - 要使用模板驅動表單開發，必須匯入`FormsModule`。
207 | - Angular 會接管表單和表單內的控制項：
208 |   - 要指派表單實體給模板變數需要透過`ngForm`。
209 |   - 控制項則是透過控制項的`name`屬性。
210 | - 透過雙向繫結來連動元件的變數和控制項是模板驅動表單必不可少的技巧。
211 | - 表單和控制項的實體都自帶很多的狀態，讓開發者用來顯示錯誤訊息及停用某些控制項。
212 | 


--------------------------------------------------------------------------------
/fundamentals/3-4-reactive-forms.md:
--------------------------------------------------------------------------------
  1 | # 反應式表單
  2 | 導讀：https://angular.io/guide/reactive-forms
  3 | 
  4 | 反應式表單相對於模板驅動表單，是另一個完全迥異的開發表單的模式，其更強調即時地反應、對模型的要求也更高（因此筆者也稱其為「模型驅動表單」）。下文的導讀會儘量以對照模板驅動表單的方式，逐一以核心功能進行（雙向繫結、狀態追蹤與驗證、錯誤訊息與停用）說明。
  5 | 
  6 | 
  7 | ## 反應式表單
  8 | - 需要匯入`ReactiveFormsModule`。
  9 | - 讓開發可以在資料模型與介面導向表單模型之間更輕鬆的管理流向。
 10 | - 更容易測試、驗證。
 11 | - 資料模型可以轉換到反應式表單的基本單位，並且 **即 時** 觀察狀態和異動。
 12 | - 資料模型與表單模型徹底分開，可以輕易保留原本資料。
 13 | - 反應式表單是同步的，模板驅動表單是非同步，也因此在測試時需要跳過一個 tick 後才能確實拿到模板的資料。
 14 | 
 15 | 
 16 | 看完上述的整理後，相信孰優孰劣已經有答案。但 Angular 的結論如是告訴我們兩者的設計哲學不同、架構不同，各有優缺利弊並沒有誰比誰更強的說法。但這種官腔的說法顯然滿足不了各位。因此，從刪去法著手分析：
 17 | - 如果重視測試與驗證：反應式
 18 | - 資料模型越複雜：反應式
 19 | - 越需要動態新增控制項：反應式
 20 | - 程式碼寫得少又好維護：反應式
 21 | - ……
 22 | - 啊你直接告訴我都用反應式表單不就好了！
 23 | - 資料模型越簡單、越不須在意驗證的，用模板驅動反而比較好處理啦。
 24 | 
 25 | 
 26 | 為了能夠讓讀者比較容易理解兩種表單的開發差異，範例將以模板驅動表單的資料為主並加以部分擴充來涵蓋控制陣列的介紹。
 27 | 
 28 | ## 模型
 29 | 資料模型大致與模板驅動表單的模型相仿，唯獨新增了一個`public features: string[]`作為控制陣列的演示用。
 30 | 
 31 | ```js
 32 | export class Hero {
 33 | 
 34 |   constructor(
 35 |     public id: number,
 36 |     public name: string,
 37 |     public power: string,
 38 |     public alterEgo?: string,
 39 |     public features: string[]
 40 |   ) {  }
 41 | 
 42 | }
 43 | ```
 44 | 
 45 | 
 46 | ## 元件與模板
 47 | 有別於模板驅動表單，本文的元件和模板會以拆解的方式來講解。
 48 | 
 49 | ### 匯入`ReactiveFormsModule`
 50 | ```js
 51 | ...
 52 | import { ReactiveFormsModule } from '@angular/forms';
 53 | ...
 54 | 
 55 | @NgModule({
 56 |   imports: [
 57 |     ...
 58 |     ReactiveFormsModule
 59 |     ...
 60 |   ],
 61 |   ...
 62 | })
 63 | export class AppModule { }
 64 | ```
 65 | 
 66 | 
 67 | ### 建立表單模型和它的好朋友`FormBuilder`
 68 | 表單的模型其實就是資料模型用基本單位轉換為表單模型，接著把產生的表單模型存在一個變數內。
 69 | 
 70 | ```js
 71 | import { Component } from '@angular/core';
 72 | import { FormGroup, FormControl, FormArray  } from '@angular/forms'
 73 | 
 74 | @Component({
 75 |   selector: 'hero-form',
 76 |   templateUrl: './hero-form.component.html'
 77 | })
 78 | export class HeroFormComponent {
 79 |   // 通常會把資料模型用 FormGroup 當作容器包起來
 80 |   form = new FormGroup({
 81 |     id: new FormControl(null), // 針對每一個子項目建立對應的基本單位
 82 |     name: new FormControl(null),
 83 |     power: new FormControl(null),
 84 |     alterEgo: new FormControl(null),
 85 |     features: new FormArray([])
 86 |   });
 87 | }
 88 | ```
 89 | 
 90 | 看到這裡或許有些人已經有點卻步了。反應式表單要求開發者一開始就要根據資料結構建立一個對照的表單結構，而且所有項目都必須轉換成 Angular 表單的基本單位，寫法也相當地繁瑣和冗長。但是別擔心， Angular 都幫我們想好了。看看下例，是否覺得一切突然都變得簡單多了。
 91 | 
 92 | ```js
 93 | import { Component } from '@angular/core';
 94 | import { FormGroup, FormControl, FormArray, FormBuilder  } from '@angular/forms'
 95 | 
 96 | @Component({
 97 |   selector: 'hero-form',
 98 |   templateUrl: './hero-form.component.html'
 99 | })
100 | export class HeroFormComponent implements OnInit {
101 | 
102 |   // 別忘了， FormGroup 也是可以用來當作型別的。
103 |   form: FormGroup;
104 | 
105 |   // FormBuilder 是一個可注入項目，所以要透過注入的寫法
106 |   constructor(private fb: FormBuilder) {}
107 | 
108 |   // 在元件初始化時才賦值給 this.form
109 |   ngOnInit() {
110 |     // fb 的寫法和直接使用 class 產生實體的差異不大，但程式碼更簡潔
111 |     this.form = this.fb.group({
112 |       id: null,
113 |       name: null,
114 |       power: null,
115 |       alterEgo: null,
116 |       features: this.fb.array([]) // 所有的基本單位都可以用 fb 來產生
117 |     });
118 |   }
119 | 
120 |   addFeature(newFeature: string) {
121 |     (this.form.get('features') as FormArray)
122 |       .push(new FormControl(newFeature));
123 |   }
124 | 
125 |   get features() {
126 |     return this.form.get('features') as FormArray;
127 |   }
128 | }
129 | ```
130 | 
131 | 
132 | ### 模板上的雙向繫結
133 | Angular 針對每一種基本單位提供了一個用於雙向繫結的 Directive ，來看看：
134 | 
135 | ```html
136 | <!-- 不依賴 ngForm 而是用 [formGroup] 作為屬性繫結 -->
137 | <form (ngSubmit)="onSubmit()" [formGroup]="form" novalidate>
138 |   <div class="form-group">
139 |     <label for="name">Name</label>
140 |     <!-- 雙向繫結直接透過 Directive ，這裡的屬性值是建立 FormGroup 時物件的 key -->
141 |     <input type="text" class="form-control" id="name" formControlName="name">
142 |   </div>
143 | 
144 |   <div class="form-group">
145 |     <label for="alterEgo">Alter Ego</label>
146 |     <input type="text" class="form-control" id="alterEgo" formControlName="alterEgo">
147 |   </div>
148 | 
149 |   <div class="form-group">
150 |     <label for="power">Hero Power</label>
151 |     <select class="form-control" formControlName="power">
152 |       <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
153 |     </select>
154 |   </div>
155 | 
156 |   <!-- 實作一個可以新增 features 的控制項 -->
157 |   <div class="input-group">
158 |     <!-- 透過模板變數取得控制項 -->
159 |     <input type="text" class="form-control" placeholder="add new feature" #newFeature>
160 |     <span class="input-group-btn">
161 |       <!-- 發生事件時把控制項的值傳遞給回呼函數並清空控制項的值 -->
162 |       <button class="btn btn-default" type="button"
163 |               (click)="addFeature(newFeature.value); newFeature.value = ''">
164 |               Add
165 |       </button>
166 |     </span>
167 |   </div>
168 | 
169 |   <div formArrayName="features">
170 |     <ul>
171 |       <!-- 注意：這裡 features 是從元件取得的 -->
172 |       <!-- FormArray.controls 會回傳表單基本單位，這裡取得的是 FormControl -->
173 |       <!-- 因為對照 addFeature() ， push 進去的就是 FormControl -->
174 |       <li *ngFor="let feature of features.controls">
175 |         <!-- 所有的基本單位都有 .value 這個成員用來取得原始型別的資料 -->
176 |         {{ feature.value }}
177 |       </li>
178 |     </ul>
179 |   </div>
180 | </form>
181 | ```
182 | 
183 | > #### novalidate
184 | > 反應式表單的已經有自己的一套開發表單的完整生態系統，
185 | > 不需要額外借助原生 HTML 的驗證機制。
186 | > 因此，通常建議幫 HTML 表單加上 `novalidate` 停用原生的驗證機制
187 | 
188 | 
189 | ### 狀態追蹤與驗證、錯誤訊息與停用
190 | 接下來逐步擴充表單模型，幫它加上驗證的條件，這樣才能讓控制項有狀態的變化。反應式表單的驗證必須靠 **Validators** ，它的功能非常強大，使用也很方便。
191 | 
192 | ```js
193 | import { Component } from '@angular/core';
194 | // 新增了 Validators
195 | import { FormGroup, FormControl, FormArray, FormBuilder, Validators  } from '@angular/forms'
196 | 
197 | @Component({
198 |   selector: 'hero-form',
199 |   templateUrl: './hero-form.component.html'
200 | })
201 | export class HeroFormComponent {
202 |   form: FormGroup;
203 | 
204 |   constructor(private fb: FormBuilder) {
205 |     this.form = this.fb.group({
206 |       id: null,
207 |       // 只針對需要的部分新增驗證條件，並轉換成陣列的型式
208 |       name: [null, Validators.required],
209 |       power: [null, Validators.required],
210 |       alterEgo: null,
211 |       // 當有多個驗證條件時須使用 Validators.compose([])
212 |       features: this.fb.array([], Validators.compose([Validators.required, Validators.minLength(1)]))
213 |     })
214 |   }
215 | 
216 |   addFeature() {
217 |     (this.form.get('features') as FormArray)
218 |       .push(new FormControl(null, Validators.required));
219 |   }
220 | 
221 |   get features() {
222 |     return this.form.get('features') as FormArray;
223 |   }
224 | }
225 | ```
226 | 
227 | 
228 | ```html
229 | <form (ngSubmit)="onSubmit()" [formGroup]="form" novalidate>
230 |   <div class="form-group">
231 |     <label for="name">Name</label>
232 |     <input type="text" class="form-control" id="name" formControlName="name">
233 |     <!-- 一樣不需要透過模板變數就可以取得基本單位的狀態 -->
234 |     <!-- 顧名思義 .get() 方法就是根據參數取得 FormGroup 底下的成員，回傳的也是基本單位 -->
235 |     <!-- 用狀態來決定是否顯示錯誤訊息，所有東西都是即時且自動的 ， Angular 在背後掌控一切 -->
236 |     <div [hidden]="form.get('name').valid || form.get('name').pristine"
237 |          class="alert alert-danger">
238 |       Name is required
239 |     </div>
240 |   </div>
241 | 
242 |   <div class="form-group">
243 |     <label for="alterEgo">Alter Ego</label>
244 |     <input type="text" class="form-control" id="alterEgo" formControlName="alterEgo">
245 |   </div>
246 | 
247 |   <div class="form-group">
248 |     <label for="power">Hero Power</label>
249 |     <select class="form-control" formControlName="power">
250 |       <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
251 |     </select>
252 |     <div [hidden]="form.get('power').valid || form.get('power').pristine" class="alert alert-danger">
253 |       Power is required
254 |     </div>
255 |   </div>
256 | 
257 |   <ng-container formArrayName="features">
258 |     <div class="form-group" *ngFor="let feature of features; index as i">
259 |       <label for="{{i}}">{{ 'feature ' + i }}</label>
260 |       <input type="text" class="form-control" id="{{i}}" formControlName="i">
261 |       <div [hidden]="form.get('name').valid || form.get('name').pristine"
262 |            class="alert alert-danger">
263 |         feature is required
264 |       </div>
265 |     </div>
266 |   </ng-container>
267 | </form>
268 | ```
269 | 
270 | 
271 | ### 整理
272 | - 要使用反應式表單開發，必須匯入`ReactiveFormsModule`。
273 | - Angular 的表單基本單位：
274 |   - FormControl：最小單元
275 |   - FormGroup：物件型容，可裝載任何基本單位
276 |   - FormArray：陣列型容器，可裝載任何基本單位
277 | - 通常會直接把最外層的 FormGroup 容器透過 [property binding] 給 `<form></form>`：
278 |   ```html
279 |     <form [formGroup]="form"></form>
280 |   ```
281 | - 驗證條件應善加利用 Validators，絕對可以事半功倍。
282 | - 雙向繫結全都依賴反應式表單獨有的 Directive：
283 |   - formControlName
284 |   - formGroupName
285 |   - formArrayName
286 | - 所有的基本單位都繼承自 AbstractControl ，意味著取得基本單位的實體就可以呼叫它的狀態。
287 | 


--------------------------------------------------------------------------------
/fundamentals/1-architecture.md:
--------------------------------------------------------------------------------
  1 | # 架構
  2 | 導讀：[4. Architecture](https://angular.io/docs/ts/latest/guide/architecture.html)
  3 | 
  4 | 
  5 | Angular 是一個前端的類 MVC 架構，AngularJS 作為當初最先進的前端架構之一不得不面臨一次革命性的更新，因此 Angular 在整體結構上和 AngularJS 有非常大的變化，如果你沒有 AngularJS 的包袱，那學習上可以免去一些觀念上的轉換。下圖是官方用來闡述 Angular 整體架構的範例圖。
  6 | 
  7 | 
  8 | ![Angular Architecture](https://angular.io/generated/images/guide/architecture/overview2.png)
  9 | 
 10 | 從技術堆疊（technology stack）上來說 Angular 和 AngularJS 最大的差異主要來自於 Angular 全面使用 TypeScript 作為開發階段的語言（最終仍然會編譯為 JavaScript）。由 TypeScript 所帶來的最明顯的變化就是模組化，由 AngularJS 的只需要匯入一個 JS 當可以開始開發執行到，目前 Angular 把不同功能拆分成不同 TypeScript / JavaScript 模組（@angular/core, @angular/forms……）。
 11 | 
 12 | 
 13 | ## 模組
 14 | ### Angular 的模組系統
 15 | Angular 有自身的一套**模組系統（ Module ）**，有別於我們熟悉的 **Javascript 模組系統**。JavaScript 模組是以檔案為單位，每個檔案唯一個模組，所有內部所宣告的項目都屬於該模組，若要公開某些項目則使用 `export` 輸出。相對的， Angular 模組是透過`@NgModule`所修飾的一個 class ，除了 `imports` 和 `exports` 之外，還可以在模組內指名宣告的項目（declarations）和註冊（pproviders）的服務。
 16 | ```
 17 | Module
 18 | |--declarations
 19 |    |--Component
 20 |    |--Directive
 21 |    |--Pipe
 22 | |--providers
 23 |    |--Service
 24 | |--imports
 25 |    |--Module
 26 | |--exports
 27 |    |--Module
 28 | ```
 29 | 
 30 | - Component、Directive、Pipe 需要在模組內「宣告」``` @NgModule({ declarations: [] }) ```，經宣告後，該模組內的所有模板就可以自由地使用。
 31 | - Service 需要在模組內「註冊」``` @NgModule({ providers: [] })```，經註冊後，服務就會被 Injector 接管，當模組內或**模組外**有需要使用相依性注入時， Injector 就會自動判斷並注入對應的依賴目標。
 32 | - Module 可以透過```imports```另一個 Module 來使用該模組內「宣告」和「註冊」的項目，但是謹記被匯入的模組必須在自身的定義中匯出相關的「宣告」和「匯入」，則匯入後的模組才能正確使用這些東西，但「註冊」服務則不需要特別匯出，因為 Injector 會自動接管。
 33 | 
 34 |   ```javascript
 35 |   // 被匯入
 36 |   @NgModule({
 37 |     imports: [ModuleA, ModuleB],
 38 |     declarations: [ComponentA, ComponentB],
 39 |     exports: [ComponentA, ModuleA] // 匯出的部分才能被使用
 40 |   }) export class ModuleToImport {}
 41 | 
 42 |   // 要匯入
 43 |   @NgModule({
 44 |     imports: [ModuleToImport]
 45 |   }) export class ModuleImport
 46 |   ```
 47 | 
 48 | 
 49 | ### 模組（Module）
 50 | 如同上面講述的，Module 是為了管理，把相關東西整理在一起，讓程式碼更好維護。你可以在一個大型的應用程式中把所有東西都寫在 AppModule 中，程式一樣跑得動，只是維護性會很差，執行效率應該也不會好。
 51 | 
 52 | 
 53 | Module 的 Decorator 是``` @NgModule() ```，它的 metadata 如上例所示。一般的 Module 就是 export 後被其他 Module 所 import。
 54 | > 別搞混 ES6（``` import / export ```）和 Angular （``` imports / exports ```）模組匯入匯出。
 55 | >
 56 | > ES6 的模組是以檔案為單位，可以匯入匯出多個項目，不論是物件還是函數甚至是檔案內容。
 57 | >
 58 | > Angular 模組匯入匯出則是寫在``` @NgModule({ imports: [], exports: [] }) ```中。
 59 | >
 60 | > 要把一個 class 定義為一個 Angular 的模組，只需要使用``` @NgModule() ```進行修飾即可。
 61 | 
 62 | 但是 AppModule 屬於「特殊的一個」，你不會在其他地方用``` imports ```的方式匯入 AppModule。AppModule 要透過一個特殊的方法來啟動它。通常寫在``` main.ts ```。
 63 | ```javascript
 64 | // main.ts
 65 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 66 | import { AppModule } from './app/app.Module';
 67 | 
 68 | platformBrowserDynamic().bootstrapModule(AppModule);
 69 | 
 70 | ```
 71 | 
 72 | 
 73 | ### Angular 程式庫
 74 | 我們會用到很多 Angular 定義好的「Angular 模組」，這些東西存放在 npm 的封裝（package）中，我們只需要下載安裝，然後在適當的檔案中``` import ```即可。好比我們會定義很多 Component 的 class，要讓 Angular 知道這個 class 是一個 Angular 的 Component 我們需要用``` @Component ```去修飾這個 class。而正確使用``` @Component ```就需要正確``` import ```。
 75 | ```javascript
 76 | import { Component } from '@angular/core';
 77 | @Component({
 78 |   selector: 'some-tag'
 79 |   template: ``,
 80 |   styles: []
 81 | })
 82 | export class ComponentA {}
 83 | ```
 84 | 
 85 | 這些定義好的東西，都根據功能歸類在不同的程式庫中：
 86 | - ``` @angular/core ```：核心相關
 87 | - ``` @angular/platform-browser ```：瀏覽器相關
 88 | - ``` @angular/http ```：http連線請求相關
 89 | - ``` @angular/forms ```：表單相關
 90 | - ...
 91 | 
 92 | 雖然運用 ES2015 的模組系統讓 Angular 可以更有結構、更靈活，但這往往也是造成初學者很難上手的壁壘。當然為了推廣 Angular 讓 AngularJS 逐步退出歷史舞台，很多人會對你說 Angular 又簡單又容易學（相對 AngularJS），但是相對 AngularJS ， Angular 所須的技術門檻絕對是更高的。
 93 | 
 94 | 
 95 | ### 基於 Class、Decorator、Module 的開發模式
 96 | Angular 全面擁抱最新的Javascript技術，仰賴 ES2015 / ES6 許多革命性的創新，包含像 class、decorator、Module 等，讓程式碼可以更有開發效率。TypeScript 在前瞻創新上走在 ES2015+ 之前，提供了更多新特性而且完全相容於 ECMAScript。籠統地說 TypeScript 就是在 ES2015+ 之上多了型別，讓 ES2015+ 有型別檢查的能力。
 97 | 
 98 | 
 99 | 因為有了 class、decorator、Module，因此 Angular 的程式碼在撰寫C omponent、Directive、Pipe、Service、Module（Angular 的模組，不是 Javascript 的）等時，都是用 **Class-based 的形式**，基本的結構就是這樣：
100 | ```javascript
101 | import { something } from 'ModulePath';
102 | 
103 | @Decorator({
104 | something: []
105 | })
106 | export class Something {
107 | constructor () {}
108 | }
109 | ```
110 | 1. 首先``` import ```一些必要的東西
111 | 1. 透過``` @Decorator ```去修飾要定義``` class ```
112 | 1. ``` export ``` ``` class ```（含定義的內容）
113 | 
114 | 這就是一個很典型的根模組（AppModule）定義：
115 | ```javascript
116 | import { NgModule }      from '@angular/core';
117 | import { BrowserModule } from '@angular/platform-browser';
118 | import { AppComponent } from './app.Module';
119 | import { LoggerService } from './logger.service';
120 | @NgModule({
121 | imports:      [ BrowserModule ],
122 | declarations: [ AppComponent ],
123 | providers:    [ LoggerService ],
124 | exports:      [ AppComponent ],
125 | bootstrap:    [ AppComponent ] // 只會在根模組中用到
126 | })
127 | export class AppModule { }
128 | ```
129 | 
130 | 
131 | ### 元件（Component）
132 | Component 基本上是你寫 Angular 最常碰到的東西，它就是針對模板（template）、樣式（style）、協調服務的一個封裝。你可以想像在應用程式這個大介面上，針對每一小塊的部分都拆開來一個一個的處理。這樣我們可以很專心的針對一小塊介面做處理，測試也更容易，甚至某個切出來的小塊會重複出現多次，我們複製多幾次 Component 就好了。
133 | 
134 | ```javascript
135 | import { Component, OnInit } from '@angular/core';
136 | 
137 | @Component({
138 |   selector: 'some-tag'
139 |   templateUrl: './Component.html',
140 |   styles: ['./Component.css']
141 | })
142 | export class SomeComponent implements OnInit {
143 | 
144 |   constructor() {}
145 | 
146 |   onClick() {}
147 | 
148 |   ngOnInit() {}
149 | }
150 | ```
151 | 
152 | 這是一個很典型的 Component 定義，``` import ```必要的 Decorator。``` @Component({}) ```中提供元件必要的模板檔案路徑和樣式的路徑（樣式為什麼是陣列呢？因為你可以提供多個樣式檔）。底下``` export class ```裡，定義了這個元件中與模板互動必要成員，譬如``` onClick() ```這個方法就可以繫結到某個按鈕，當使用者點選了該按鈕時就觸發這個方法。
153 | 
154 | ```html
155 | <button (click)="onClick()"></button>
156 | ```
157 | 
158 | 另外，你看到一個``` ngOnInit() {} ```的成員，它屬於元件從被產生到銷毀中其中一個生命週期的階段（lifecycle hook），顧名思義，這個方法定義了這個元件在被產生時應該做些甚麼，譬如在元件被產生的時透過api遠端請求一組資料回來顯示。
159 | 
160 | 
161 | ### 父子元件之間的資料傳遞
162 | ![Component-tree](https://angular.io/generated/images/guide/architecture/Component-tree.png)
163 | 
164 | 
165 | 上述我們把介面拆成一個個小元件，但是元件裡面還可以再塞元件，到最後就會長成一棵元件樹。父子之間若有需要做資料或事件的傳遞，是可以透過``` @Input ```來定義傳入的資料和``` @Output ```來傳出要觸發的事件。
166 | 
167 | 
168 | ### 資料繫結／繫結（Data binding）
169 | Data binding 是從 AngularJS 就開始存在的特色，也是 AngularJS 成名的招牌。Angular 的繫結從概念上只有四種：
170 | - ```DOM ← {{ value }}            ← Component```
171 | - ```DOM → [property]="value"     → Component```
172 | - ```DOM → (event)="handler"      → Component```
173 | - ```DOM ← [(ngModel)]="property" → Component```
174 | 
175 | ```html
176 | <h1>{{ title }}</h1>
177 | <hero-detail [hero]="selectedHero"></hero-detail>
178 | <input type="text" [value]="someValue">
179 | <button (click)="onClick()"></button>
180 | <input type="text" [(ngModel)]="hero.name">
181 | ```
182 | 
183 | 上述的例子中``` [property]="value" ```舉了兩個範例，是為了表示 property 的繫結可以是原本HTML標籤的內容（property）也可以是自訂 Component 的內容。
184 | 
185 | 
186 | 另外就是雙向繫結``` [(ngModel)]="hero.name" ```，這表示一旦使用者在介面的```<input>```中輸入了值，還是 Component 修改了```hero.name```，介面和變數立刻反映出值得變化。
187 | 
188 | 
189 | ### Directive
190 | 也是原自 AngularJS 的產物，在Angular中因為有 Property 和 Event 的繫結使得 Directive 的數量驟降。除了上述看到的```[(ngModel)]```之外，一般上在模板中最常見就是這兩個用來控制模板顯示的 Directive。
191 | - ``` *ngIf="expression" ```
192 | - ``` *ngFor="expression" ```
193 | ```html
194 | <li *ngFor="let hero of heroes"></li>
195 | <hero-detail *ngIf="selectedHero"></hero-detail>
196 | ```
197 | 
198 | 顧名思義，``` *ngFor ```就是讓模板根據變數的數量產生大量相同的HTML標籤。```*ngIf```則是根據變數做判斷來從模板中取捨 HTML 標籤。除此之外，尚有類似```ngStyle ngClass```用於控制 HTML 標籤的樣式和 CSS Class，讓介面更美觀。
199 | 
200 | 
201 | ### 服務（Service）
202 | 分工明確在程式設計領域中有一個專有名詞——關注點分離，意思是我們不要打造一個巨無霸的怪獸元件，而是讓元件儘量單純，只管呈現介面和使用者互動。譬如向伺服器請求和寫入資料等管理資料的工作，或是專門用來維護使用者登入狀態這類的事情就把它專門寫成一個 class，Angular 把它歸類為服務。
203 | ```javascript
204 | import { Injectable } from '@angular/core';
205 | import { LoggerService } from './logger.service';
206 | 
207 | @Injectable()
208 | export class SomeService {
209 |   // 注入其他Service
210 |   constructor(private logger: LoggerService) {}
211 | 
212 |   getHeroes() {
213 |     return ...
214 |   }
215 | }
216 | ```
217 | 就像上面說的，所有東西都只是 class 而以，Service 當然也不例外，而且 Service 一樣可以注入其他 Service。透過 Injector 的幫忙，我們不需要煩惱服務是否是唯一的，我們不需要去操心管理它，一切由 Injector 接管。
218 | 
219 | 
220 | ![injector](https://angular.io/generated/images/guide/architecture/injector-injects.png)
221 | 
222 | 
223 | 但是我們在程式中任意的注入服務，Angular 到底怎麼知道你要注入的是哪個呢？一切都需要按照遊戲規則走，寫好的服務需要被註冊，透過注入時所指名的型別， Injector 就可以很聰明幫我們找到這個服務並注入到 class 中，若未有實體存在，則自動建立一個新的，往後則都只注入這次建立的實體。下例中把服務註冊到 AppModule 中，這樣所有底下元件都可以正確被注入。但少數情況下，你也可以選擇只註冊在元件中。
224 | 
225 | ```javascript
226 | // app.moodule.ts
227 | @NgModule({
228 |   providers: [SomeService]
229 | })
230 | 
231 | // SomeComponent.ts
232 | @Component({
233 |   providers: [SomeService]
234 | })
235 | ```
236 | 
237 | 這樣你就可以在```constructor(private someService: SomeService) {}```中注入已註冊服務並使用它。
238 | 
239 | 
240 | ### 你還需要知道的事！
241 | Angular還有很多程式庫，提供多樣性的功能：
242 | - animations
243 |   - 它負責管理動畫效果，自 Angular 4.x.x 後從其他程式庫中分離出來，爾後使用都必須另外安裝和匯入到模組中。
244 | - forms
245 |   - 製作表單的好幫手，ngModel 這個 Directive 就放在這個程式庫中，必須要匯入 FormsModule 才能使用。
246 | - http
247 |   - 涉及與伺服器通訊絕對少不了這個程式庫，匯入 HttpModule，我們才能注入 HttpService 並用它提供的方法來與伺服器通訊。
248 | - route
249 |   - 控制瀏覽器路由（簡單講就是網址）少不了的程式庫。
250 | 
251 | 
252 | Pipe 尚未被提到，但是它的用處極大，它可以讓我們在顯示資料時起到過濾和加工的效果。譬如：
253 | ```html
254 | <div>
255 |   price | currency: 'USD':true
256 | </div>
257 | ```
258 | 若```price```為42.33則介面會自動顯示為```$42.33```。
259 | 
260 | 元件（Component）之間的溝通是所有前端架構都會碰到的問題，資料要如何傳遞？事件發生時改變了資料（Model）該如何連動到其他元件？這些問題都是很典型的元件間通訊問題。拜 ReactiveX 的誕生，這個問題可以用很瀟灑的方式來解決。
261 | 


--------------------------------------------------------------------------------
/fundamentals/10.Template Syntax.md:
--------------------------------------------------------------------------------
  1 | ## 模板語法
  2 | 導讀：[10. Template Syntax](https://angular.io/docs/ts/latest/guide/template-syntax.html)
  3 | 
  4 | 本章主要是針對模板的語法進行說明，部分內容其實在之前的文章中有不少範例了。
  5 | 
  6 | ### 模板中的 HTML
  7 | Angular的模板是以原生 HTML 為主，所以相容於大部分的 HTML 寫法，只是額外多了一些 Directive 等附加功能。
  8 | - `<script></script>`會被直接忽略，以防範指令碼注入攻擊。
  9 | - `<html> <body> <base>`在模板中不會有用處。
 10 | 
 11 | ### Interpolation（{{...}}）
 12 | ```html
 13 | <p>My current hero is {{currentHero.name}}</p>
 14 | ```
 15 | 這個寫法很常見，你可以把它想像成兩個大括號中間可以塞運算式，然後 Angular 會自動把它轉成該有文字放在兩個標籤的中間（實際上並非全然如此）。
 16 | - `{{}}`中間可以塞模板運算式（Template Expression），可以是 Component 的成員或是單純`{{ 1 + 1 }}`。
 17 | - 實際上 Angular 還是運用了 Property Binding 的技術來實現`{{}}`，先計算運算式的最終結果再進行繫結。
 18 | 
 19 | 
 20 | ### 模板運算式（Template Expression）
 21 | 模板運算式對應的是模板敘述式，它代表的是要在模板中呈現資料（給使用者）。模板運算式和模板敘述式是撰寫 Angular 模板時最重要的東西，以下這些都屬於模板運算式的運用：
 22 | ```html
 23 | <!-- HTML元素 -->
 24 | <h1>The title is {{ title }}</h1>
 25 | 
 26 | <!-- Component -->
 27 | <a-Component [list]="items.list"></a-Component>
 28 | 
 29 | <!-- Directive -->
 30 | <ul>
 31 |   <li *ngFor="let item of items.list"></li>
 32 | </ul>
 33 | ```
 34 | 
 35 | > 多數的 javascript 語法都可以相容於模板運算式，但有一些要特別注意的事項
 36 | >
 37 | > - 禁止：指派（assignments）`=, +=, -=, ...`。
 38 | > - 禁止：`new`（`new Class()`）。
 39 | > - 禁止：以`;` or `,`串聯運算式。
 40 | > - 禁止：增值和減值運算子（`++`和`--`）。
 41 | > - 差異：不支援位元運算子`|`和`&`。
 42 | > - 差異：`|`是Angular Pipe，`?`為模板運算式中可空變數判斷。
 43 | 
 44 | 模板運算式內變數或函數的範疇（scope）為何呢？又，還可以在模板運算式中用到哪些東西？
 45 | - 範疇基本上就是 Component 的實體（Instance），在運算式中顯示或呼叫它的成員。
 46 | - 別忘了模板變數也是。
 47 | - 禁止參照到所有全域命名空間，譬如`window, document, console.log, Math.max`。
 48 | 
 49 | 模板運算式的四大守則：
 50 | - 沒有顯而易見的副作用
 51 |   - 不應該有任何改變應用程式狀態（State），除了目標的 Property 的值。這樣才能避免程式在這裡點了一下，卻不知道改了甚麼東西的情況發生。
 52 | - 快速執行
 53 |   - 不要在模板運算式裡面進行複雜的運算。Angular 會在偵測到非同步活動時出發更新模板運算式，譬如 Promise Resolve、HTTP Results，甚至是鍵盤滑鼠的動作，所以記得別把複雜的東西寫在模板運算式中。
 54 | - 盡可能簡單
 55 |   - 在模板運算式中寫 Component 的成員是最常見的，Boolean 的轉換（`!`）也沒問題。除此之外的，就考慮是否你的 Component。
 56 | - 純粹性（Idempotence）
 57 |   - 這個一個電腦科學（Computer Science）的術語，意既相同的輸入做相同的動作，不論執行了多少次都會得到相同的結果。就 Angular 而言就是在模板運算式中的變數無論如何都會取得一樣的值，直到該變數所以依賴值改變了。
 58 | 
 59 | 
 60 | ### 模板敘述式（Template statements）
 61 | 模板敘述式則代表如何回應模板中（被使用者）觸發的事件。籠統的說，想要給使用者看的，要用模板運算式，想要從使用者那裏拿的，要用模板敘述式。下例就是一個點選事件，及其發生後所要執行的函數。
 62 | ```html
 63 | <button (click)="deleteHero()">Delete hero</button>
 64 | ```
 65 | 
 66 | 跟模板運算式不同，敘述式表示有事情發生了，要改變或要接收資料了，因此其自然會產生副作用（跟模板運算式的純粹顯示資料不同）。因此，像指派（`=`）和串聯運算式（`;`或`,`）都是可以合理使用的。
 67 | 
 68 | 然而以下的 javascript 語法仍屬於禁止的：
 69 | - `new`
 70 | - 增值和減值，譬如`+= -=`
 71 | - 位元運算子`| &`
 72 | - 模板運算式的運算子（還記得`|`和`?`，分別代表 Pipe 和可空變數的判斷嗎？）
 73 | 
 74 | 
 75 | 模板敘述式的範疇（Scope）或背景（Context）和模板運算式相當。但因為是呼叫事件的處理函數，所以有可能碰到需要傳入引數的狀況。傳入的引數通常有`$event`事件物件、模板變數、模板輸入變數。
 76 | ```html
 77 | <!-- 事件物件 -->
 78 | <button (click)="onSave($event)">Save</button>
 79 | <!-- 模板輸入變數 -->
 80 | <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">hero.name</button>
 81 | <!-- 模板變數 -->
 82 | <form #heroForm (ngSubmit)="onSubmit(heroForm)">...</form>
 83 | ```
 84 | 
 85 | 全域命名空間的東西一樣不能用（`window document console.log Math.max`），當然也別把複雜的東西寫在裡面。
 86 | 
 87 | 
 88 | ### 繫結語法綜述（Binding syntax）
 89 | 應用程式的首要任務是**提供介面跟使用者互動**，當然自然涉及到如何呈現和取得資料。因此Angular在模板系統中提供資料繫結（Data Binding）的技術，而且它是有方向性，原始資料（Component中的資料）←→視圖資料（模板的資料），同時大致上它可以被分為3大類：
 90 | 
 91 | 資料流向|語法|類型
 92 | --|---|--
 93 | 單向從資料到視圖|`{{expression}}`<br>`[target]="expression"`<br>`bind-target="expression"`|Interpolation<br>Property<br>Attribute<br>Class<br>Style
 94 | 單向從視圖到資料|`(target)="statement"`<br>`on-target="statement"`|事件
 95 | 雙向|`[(target)]="expression"`<br>`bindon-target="expression"`|雙向
 96 | 
 97 | 除了`{{}}`之外，其他的語法要不是在等號左邊的部分包了一堆符號（`[], ()`）就是有`bind-, on-, bindon-`這些前置。目標的名稱是Property（DOM）的名稱而不是Attribute（HTML），這點經常會造成混淆。
 98 | 
 99 | > #### *HTML Attribute 和 DOM Property*
100 | > 兩者確實非常容易造成開發者的混淆，但唯知道差異才能理解Angular繫結的技術。
101 | > #### *Attributes是由HTML所定義。Properties則是由DOM所定義*：
102 | > - 少數的情況下兩者有完全1比1的對照，如`id`。。
103 | > - 有些是HTML沒有對應的定義，如`colspan`。
104 | > - 有些是DOM沒有對應的定義，如`textContent`。
105 | > - 多數情況下HTML的Attributes看起來會對照到DOM的Properties，但不是你想的那樣！
106 | >
107 | > #### Attributes負責初始化DOM的Properties就結束了。Property 的值可以變更但 Attribute 不行
108 | > 假設以`<input type="text" value="Bob">`建立一個 DOM，那 DOM 的`value` Property 會以「Bob」當作初始值，
109 | > 但是當有人修改了`input`的值為「Sally」，那 Property 會改變為「Sally」但 Attribute 的值仍是「Bob」。
110 | 
111 | 繫結的目標通常是Property的（Element|Component|Directive）或Event的（Element|Component|Directive），少數情況下是Attribute的名稱，以下是整理歸納的表格：
112 | Type|Target|Example
113 | --|---|--
114 | Property|Element property<br>Component property<br>Directive property|`html <img [src]="heroImageUrl"`<br>`<hero-detail [hero]="currentHero"></hero-detail>`<br>`<div [ngClass]="{special: isSpecial}"></div>`
115 | Event|Element event<br>Component event<br>Directive event|`<button (click)="onSave()">Save</button>`<br>`<hero-detail (deleteRequest)="deleteHero()"></hero-detail>`<br>`<div (myClick)="clicked=$event" clickable>click me</div>`
116 | Two-way|Event and property|`<input [(ngModel)]="name">`
117 | Attribute|Attribute (特殊情況)|`<button [att.aria-label]="help">help</button>`
118 | Class|`class` property|`<div [class.special]="isSpecial">Special</div>`
119 | Style|`style` property|`<button [style.color]="isSpecial ? 'red' : 'green'">`
120 | 
121 | 
122 | ### Property繫結（[property]）
123 | 顧名思義，Property 的繫結就是把東西繫結到元素的 Property上，這種繫結的方式單向，也就是只能把資料設定到 Property 上：
124 | ```html
125 | <img [src]="heroImageUrl">
126 | <!-- 或是 -->
127 | <img bind-src="heroImageUrl">
128 | ```
129 | 
130 | 然而除了 Property 之外，Angular 其實是先比對繫結是否是 Directive 的`input` Property。
131 | ```html
132 | <div [ngClass]="classes">[ngClass]繫結到Class這個property</div>
133 | ```
134 | 
135 | > 所有的 Component 其實都屬於 Directive，可以可以用`@Input`這個去修飾某個成員，讓他變成在模板中可以幫定的 Property。
136 | 
137 | #### 避免副作用
138 | 簡單講就是安分只用發揮其單向繫結的規範，別試圖在運算式中呼叫函數或執行一些可能會改變狀態的動作。
139 | 
140 | #### 記得回傳對的型別資料
141 | 為了避免可能發生的錯誤，遵守回傳 Property 預期的資料型別，該是字串的就回傳字串，該回傳數字的就回傳數字。
142 | 
143 | #### 記得中括號
144 | 雖然 Angular 允許你在某些情況下不需要寫中括號，但是與其為了這些特例而冒風險不如都多加上中括號。
145 | 
146 | #### Interpolation 還是 Property 繫結
147 | 當繫結的資料型別是字串時，兩者基本上沒有差別，按照你的喜好選擇：
148 | ```html
149 | <img src="{{heroImageUrl}}">
150 | <img [src]="heroImageUrl">
151 | ```
152 | 
153 | #### 內容安全性
154 | 記得，Angular 預設具備防止指令碼注入的行為，不論是 Interpolation 還是 Property 繫結，所有的資料都經過[sanitizes](https://angular.io/docs/ts/latest/guide/security#sanitization-and-security-contexts)才會顯示在介面上。
155 | 
156 | 
157 | ### Attribute, class, style 繫結
158 | 這些都是有關介面的美觀和親和性的繫結。
159 | 
160 | #### Attribute繫結
161 | 還記得上面說的嗎？在只用 Attribute 而沒有 Property 的時候，還是可以對 Attribute 繫結資料的而且也只能這樣做。
162 | ```html
163 | <!-- 錯誤示範：你不能這樣繫結Attribute -->
164 | <tr><td colspan="{{ 1+1 }}"></td></tr>
165 | <!-- 正確的Attribute繫結 -->
166 | <tr><td [atr.colspan]="1 + 1"></td></tr>
167 | <!-- 另一個常見的實務範例，針對盲胞的標籤 -->
168 | <button [atr.aria-label]="actionName"></button>
169 | ```
170 | #### class 繫結
171 | class 的繫結實務上使用率非常高，而且有幾種繫結的方式：
172 | ```html
173 | <!-- 只繫結一個class時建議這樣 -->
174 | <div [class.special]="isSpecial"></div>
175 | <!-- 繫結多個class時這樣比較方便 -->
176 | <div [ngClass]="{ special: isSpecial, cool: isCool }"></div>
177 | <div [ngClass]="binding.object"></div>
178 | <!-- 全數替換成 -->
179 | <div [class]="special"></div>
180 | ```
181 | 
182 | 
183 | #### style 繫結
184 | style的繫結跟class幾乎一樣：
185 | ```html
186 | <!-- 記得嗎？繫結的等號右邊是運算式，所以可以這樣寫 -->
187 | <button [style.color]="isSpecial ? 'red': 'green'">Red</button>
188 | <!-- 針對有單位的部分，寫成這樣 -->
189 | <button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
190 | <button [style.fontSize.%]="!isSpecial ? 150 : 50" >Small</button>
191 | <!-- 自然也可以用ngStyle繫結物件的方式 -->
192 | <div [ngStyle]="currentStyles"></div>
193 | ```
194 | 
195 | 
196 | ### 事件繫結（(event)）
197 | 上面說的都是如何把資料繫結到模板上給使用者看，但使用者可不是僅僅要看而已，他們還需要回應和輸入。事件的繫結就是把資料從介面元素流向 Component 的做法。監聽的事件包含像鍵盤和滑鼠的敲擊、觸控事件、甚至是你自訂的事件。
198 | ```html
199 | <!-- 繫結的都是點選事件，只是寫法不同 -->
200 | <button (click)="onSave()">Save</button>
201 | <button on-click="onSave()">On Save</button>
202 | <!-- 自訂的事件 -->
203 | <div (myClick)="clickMessage=$event" clickable>click with myClick</div>
204 | ```
205 | 
206 | > 跟Property繫結一樣，自訂的部分都是購過@Input/@Output的修飾成員方式實現，他們都屬於Directive。
207 | 
208 | #### `$event`和事件處理敘述式
209 | 如果有設定事件的繫結，Angular 就會設定事件的處理器給目標事件，當事件發生時，處理器會去執行指派模板敘述式，傳遞資料的部分是透過**事件物件**`$event`。`$event`長甚麼樣取決於目標事件，如果是一個原生的 DOM 元素事件，那`$event`就會有`target`和`target.value`這樣的屬性。
210 | ```html
211 | <!-- 這裡很特別的繫結input事件 -->
212 | <input [value]="currentHero.name"
213 |        (input)="currentHero.name=$event.target.value" >
214 | ```
215 | 
216 | #### 透過`EventEmitter`自訂事件
217 | 只有原生的事件通常是滿足不了所有需求的。自訂事件最常用的地方就是父子元件之間的資料傳遞，可以透過Component（也就是 Directive）內產生 EventEmitter 來建立自訂事件：
218 | ```html
219 | <div>
220 |   <img src="{{heroImageUrl}}">
221 |   <span [style.text-decoration]="lineThrough">
222 |     {{prefix}} {{hero?.name}}
223 |   </span>
224 |   <!-- 點選按鈕後呼叫函數去處發事件 -->
225 |   <button (click)="delete()">Delete</button>
226 | </div>
227 | ```
228 | 
229 | ```javascript
230 | // 記得用@Output()修飾建立的事件，<Hero>是設定事件發生時送出的資料型別
231 | @Output() deleteRequest = new EventEmitter<Hero>();
232 | 
233 | delete() {
234 |   // 用emit方法觸發事件（並把送出的資料當作參數）
235 |   this.deleteRequest.emit(this.hero);
236 | }
237 | ```
238 | 
239 | 而在父元件的部分，就會繫結這個自訂的事件和指派事件發生時要負責處理的函數：
240 | ```html
241 | <hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>
242 | ```
243 | 
244 | #### 模板敘述式有副作用
245 | 這點本來是預期的事情，因為當有事件發生時，本來就表示有東西應該被異動，或試圖請求新的資料。這些狀態上的變更都被視為副作用，這點跟 Property 繫結不一樣，因為我們不期待 Property 會有副作用。
246 | 
247 | 
248 | ### 雙向繫結（[(...)]）
249 | 有時候不僅僅是想顯示資料（Property繫結）或監聽事件（事件繫結），你希望這兩者可以有更即時顯示效果，而且是在同樣的Element上。而你在網路上最常看到的範例或許是表單內的`[(ngModel)]="var"`這樣的雙向繫結範例。
250 | ```html
251 | <form (ngSubmit)="onSubmit()">
252 |   <input type="text" name="name" [(ngModel)]="hero.name">
253 |   <span>hero name is {{ hero.name }}</span>
254 | </form>
255 | ```
256 | 
257 | `[(ngModel)]`其實是 Angular 針對表單專門設計的雙向繫結 Directive（而這個 Directive 也正是放在 FormsModule 程式庫裡面）。但其底層的實作方式其實沒有它表象上看得那樣（像一件事，其實是合併兩件事）。
258 | 
259 | ```javascript
260 | import { Component, EventEmitter, Input, Output } from '@angular/core';
261 | @Component({
262 |   selector: 'my-sizer',
263 |   template: `
264 |   <div>
265 |     <- 這裡分別點選按鈕後觸發Method ->
266 |     <button (click)="dec()" title="smaller">-</button>
267 |     <button (click)="inc()" title="bigger">+</button>
268 |     <label [style.font-size.px]="size">FontSize: {{size}}px</label>
269 |   </div>`
270 | })
271 | export class SizerComponent {
272 |   // 這裡分貝修飾輸入的size property和輸出的sizeChange事件
273 |   @Input()  size: number | string;
274 |   @Output() sizeChange = new EventEmitter<number>();
275 |   // 再由Method去觸發resize() Method
276 |   dec() { this.resize(-1); }
277 |   inc() { this.resize(+1); }
278 |   resize(delta: number) {
279 |     this.size = Math.min(40, Math.max(8, +this.size + delta));
280 |     // 這裡才是真正的觸發自訂的事件
281 |     this.sizeChange.emit(this.size);
282 |   }
283 | }
284 | ```
285 | 
286 | 在父元件中則是直接雙向繫結`size`即可。
287 | ```html
288 | <!-- 這裡直接雙向繫結size -->
289 | <my-sizer [(size)]="fontSizePx"></my-sizer>
290 | <!-- 這裡父元件的成員 fontSizePx 會在 size 變更使觸發 sizeChange 事件後自動改變 fontSizePx 值 -->
291 | <div [style.font-size.px]="fontSizePx">Resizable Text</div>
292 | ```
293 | 
294 | 然而謎底就在這裡，`[(size)]`這樣的雙向繫結語法其實只是一種 Angular 提供的語法糖而已：
295 | ```html
296 | <my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
297 | ```
298 | 
299 | > 因為這是一種特殊的語法糖，所以自然要遵循 Angular 所制定的規則，雙向繫結的 Property 和自訂 Event 的**命名方式**必須是***自訂事件的名稱***要是 Property 的名稱加上`Change`。也就是如上例般如果繫結的輸入 Property 的名稱是`size`，那雙向繫結的輸出自訂事件名稱就要是`sizeChange`。然而基本上原生的 HTML 是不有這樣的命名組合
300 | 
301 | 
302 | ### 內建的`Attribute`Directive
303 | 之前就提到過 Attribute 是相對特殊的存在，因此 Angular 針對部分的 Attribute 提供了一些比較方便使用 Directive。而最常使用的部分應該就屬：
304 | - `NgClass` - 以繫結物件的方式增刪 CSS 的 class
305 | - `NgStyle` - 以繫結物件的方式增刪 HTML 的 style
306 | - `NgModel` - **僅針對表單的元素進行雙向繫結**
307 | 
308 | `NgClass`和`NgStyle`的部分上面已經介紹過了，基本上繫結的物件的鍵值組（key / value pair）分別表示 class 或 style 的名稱和一個 Boolean 的變數來決定是否新增。
309 | ```html
310 | <div [ngClass]="hero.class"></div>
311 | ```
312 | 
313 | ```javascript
314 | isHidden = true;
315 | // 繫結的物件，當isHidden是true時，hidden這個class就會新增到div裡面
316 | hero.class = {
317 |   "hidden": isHidden
318 | }
319 | ```
320 | 
321 | #### `NgModel` - 針對表單元素的雙向繫結
322 | 針對`NgModel`這個雙向繫結的 Directive，你必須知道：
323 | - 它只針對表單元素，其他非表單元素都必須自行實作雙向繫結。
324 | - 你必須在模組中匯入`FormsModule`才能正確使用這個 Directive。
325 | 
326 | ```javascript
327 | import { NgModule } from '@angular/core';
328 | // 從程式庫匯入模組
329 | import { FormsModule } from '@angular/forms';
330 | 
331 | @NgModule({
332 |   imports: [
333 |     FormsModule  // <--- 在模組中匯入FormsModule
334 |   ]
335 | })
336 | export class AppModule { }
337 | ```
338 | 
339 | 究竟`[(ngModel)]`裡面在搞甚麼名堂呢？實際上 Angular 在`NgModel`內部針對表單元素都設計雙向繫結的處理步驟，讓我們可以直接拿來用這麼爽。然而除去表象，實際上的運作機制是這樣的。
340 | 
341 | ```html
342 | <!-- 最原始的實作是進行property繫結和事件繫結 -->
343 | <input [value]="currentHero.name"
344 |        (input)="currentHero.name=$event.target.value" >
345 | ```
346 | 
347 | ```html
348 | <!-- 利用 NgModel 加上語法糖時，只需要寫這樣 -->
349 | <input [(ngModel)]="currentHero.name">
350 | 
351 | <!-- 然而實際上是的寫法是這樣 -->
352 | <input
353 |   [ngModel]="currentHero.name"
354 |   (ngModelChange)="currentHero.name=$event">
355 | <!-- 還記得自訂雙向繫結時必須遵守自訂事件名稱要是繫結 Property 的名稱加上 Change 嗎 -->
356 | ```
357 | 
358 | 
359 | ### 內建*結構式*的Directive
360 | 針對模板的元素去新增、刪除、切換顯示這類的 Directive 就被稱為 [Structural Directive](https://angular.io/docs/ts/latest/guide/structural-Directives.html)。最常見三個結構式 Directive 有：
361 | - `NgIf` - 透過指向一個 Booelan 變數來決定是否新增或刪除一個 DOM。
362 | - `NgFor` - 透過指向一個可迭代的目標來重複性的產生一堆相同資料格式但不同內容的 DOM。
363 | - `NgSwitch` - 透過條件的方式來切換顯示DOM的一組 Directive。
364 | 
365 | > 謹記：結構式 Directive 通常都必須冠上星號（`*`，`*ngIf="Boolean"`），千萬不要漏掉了
366 | 
367 | #### NgIf須知
368 | - 語法：`<div *ngIf="Boolean">`。
369 | - `NgIf`不是隱藏或以註解的方式不顯示這些 DOM，而是徹底銷毀這些 DOM。
370 | - 因為是徹底銷毀 DOM，所以`NgIf`可以帶來相對的效能優勢。
371 | - 當指派給`NgIf`的變數是空值（null）時，預設的行為是銷毀。
372 | 
373 | 
374 | #### `NgFor`須知
375 | - 語法：
376 |   - `<div *ngFor="let hero of heroes"`，類似 ES2015 的`for of`，但這屬於 Angular的 [*microsyntax*](https://angular.io/docs/ts/latest/guide/structural-Directives.html#microsyntax)。
377 | - 搭配 Property 繫結：
378 |   - `<hero-detail *ngFor="let hero of heroes" [hero]="hero"></hero-detail>`。
379 | - 取得索引值：
380 |   - `<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>`
381 | - 用`trackBy`來節省效能耗費（**`trackBy`改成只接受函數了**）：
382 |   - `<div *ngFor="let hero of heroes; trackBy: hero?.id">`
383 |     - 直接透過`hero?.id`檢查，記得要加上`?`。
384 |   - `<div *ngFor="let hero of heroes; trackBy: trackByHeroes">`
385 |     - 透過自訂的檢查函數。
386 | 
387 | `trackBy`的用意是在於當羅列的迭代目標內的數量非常大或資料的異動非常頻繁時，讓 Angular 不用每次都重新計算並成像模板，而是根據某個追蹤值去判斷內容是否有改變，如果沒有改變就沿用之前成像好的模板以節省效能耗費。
388 | 
389 | 
390 | ![ngFor-trackBy](https://angular.io/resources/images/devguide/template-syntax/ng-for-track-by-anim.gif)
391 | 
392 | ```javascript
393 | // 定義一個trackBy的指派目標函數，固定有兩個參數，索引值和項目
394 | trackByHeroes(index: number, hero: Hero): number { return hero.id; }
395 | ```
396 | 
397 | ```html
398 | <!-- 在microsyntax中指派目標函數 -->
399 | <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
400 |   ({{hero.id}}) {{hero.name}}
401 | </div>
402 | ```
403 | 
404 | 
405 | #### NgSwitch須知
406 | ```html
407 | <div [ngSwitch]="currentHero.emotion">
408 |   <happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></happy-hero>
409 |   <sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></sad-hero>
410 |   <confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></confused-hero>
411 |   <unknown-hero  *ngSwitchDefault           [hero]="currentHero"></unknown-hero>
412 | </div>
413 | ```
414 | - 語法：
415 |   - 包含`NgSwitch`, `NgSwitchCase`, `NgSwitchDefault`，類似傳統的 Switch 敘述式。
416 | - Switch 的值可以是任意型別，不是只有上例中的字串。
417 | - `NgSwitch`是 Attribute Directive，別嘗試用結構式 Directive 的繫結方式：`*ngSwitch=""`。
418 | - `NgSwitchCase`和`NgSwitchDefault`的行為模式跟一般的 Switch 敘述式一樣。
419 | 
420 | 
421 | ### 模板變數（`#var`）
422 | 模板變數通常用來指向模板的 DOM 元素，然後用於介面上的互動過程。然而它同時也可以指向 Angular 的 Component、Directive、甚至 Web Component。
423 | ```html
424 | <!-- 指向一般的 DOM -->
425 | <input type="text" #phone>
426 | <!-- 當作資料傳遞，模板敘述式 -->
427 | <button (click)="callPhone(phone.value)">Call</button>
428 | 
429 | <!-- 指向 Directive -->
430 | <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
431 |   <div class="form-group">
432 |     <label for="name">Name
433 |       <input class="form-control" name="name" required [(ngModel)]="hero.name">
434 |     </label>
435 |   </div>
436 |   <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
437 | </form>
438 | 
439 | <!-- 可以在模板的其他地方使用，模板運算式 -->
440 | <div [hidden]="!heroForm.form.valid">
441 |   {{submitMessage}}
442 | </div>
443 | ```
444 | 
445 | - 如果模板變數指向的是一般的 DOM，那它就代表那個 DOM
446 |   - 譬如上例的`phone.value`就直接可以取得`input`的`value`。
447 | - 如果指向的是非一般的 DOM，譬如 Directive：
448 |   - 在沒有正確匯入 FormsModule 的情況下，取得式 HTMLFormElement（以上例的`<form></form>`而言）。
449 |   - 反之，則是指向Directive（的實體）。
450 | - 替代語法
451 |   - `<input ref-fax>` === `<input #fax>`
452 | - 範疇（Scope）
453 |   - 宣告的模板變數可以在整個模板中使用，如上例的`!heroForm.form.valid`。
454 | 
455 | 
456 |   ### Input 和 Output Properties（`@Input`和`@Output`）
457 |   重新回顧一下，就目前為止除了 Interpolation（`{{...}}`）之外，所有的繫結形式都是擁有等號和兩側，左側為繫結的目標，右側為繫結的來源：
458 |   ```html
459 |   <input [target-property]="source-data">
460 |   <input (target-event)="source-handler">
461 |   <input [(property)]="source-data">
462 |   ```
463 |   對 Directive 而言（還記得嗎？Component是一種 Directive）所有的成員都允許被繫結，但是你必須確保正確地使用`@Input`和`@Output`修飾這些成員。
464 | 
465 |   ```html
466 |   <!-- 針對繫結的目標，如果是原生的DOM Property，你不需要做甚麼特殊的處理 -->
467 |   <img [src]="iconUrl"/>
468 |   <button (click)="onSave()">Save</button>
469 | 
470 |   <!-- 自訂的Component需要針對繫結目標做處理 -->
471 |   <hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
472 |   </hero-detail>
473 |   ```
474 | 
475 |   ```javascript
476 |   // 可以透過Decorator的方式修飾
477 |   import { Component, Input, Output } from '@angular/core';
478 |   @Component()
479 |   export class SomeComponent {
480 |     @Input() hero: Hero;
481 |     @Output() deleteRequest = new EventEmitter<Hero>();
482 |   }
483 | 
484 |   // 或直接寫在@Component({})裡
485 |   @Component({
486 |     inputs: ['hero'],
487 |     outputs: ['deleteRequest'],
488 |   })
489 |   ```
490 | 
491 |   #### Input / Output Property 的別名
492 |   有時候你想讓自訂Directive所繫結的事件可以和 Directive 的名稱一樣，但這樣取事件的名稱（就是繫結成員的名稱）又不太好。這時你可以選擇用別名的方式做處理：
493 |   ```html
494 |   <div (myClick)="clickMessage=$event" clickable>click with myClick</div>
495 |   ```
496 | 
497 |   ```javascript
498 |   @Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
499 | 
500 |   // 等同於在@Directive修飾器中註明，取一種寫法。
501 |   @Directive({
502 |     outputs: ['clicks:myClick']  // propertyName:alias
503 |   })
504 |   ```
505 | 
506 | 
507 |   ### 模板運算式運算子（Operator）
508 |   還得之前提過，為了讓模板撰寫更有效率，Angular 提供了一些自動的模板運算式運算子。
509 | 
510 |   #### Pipe 運算子
511 |   有時候我們會想對模板運算式中的結果做一些型式的轉換（Transform），譬如繫結的來源資料為了便於管理，以數字`32.21`的型式儲存，但在介面顯示上對使用者來說加上貨幣符號是更好的選擇，這時 Pipe 就派上用場了。Angular 內建了很多很便利的 Pipe，當然，我們也可以自訂自己的 Pipe。
512 |   ```html
513 |   <!-- 大小寫轉換 -->
514 |   <div>Title through uppercase Pipe: {{title | uppercase}}</div>
515 | 
516 |   <!-- 跟 Linux 上常見的 bash 一樣，Pipe 可以一直串聯下去 -->
517 |   <div>{{title | uppercase | lowercase}}</div>
518 | 
519 |   <!-- 複雜的日期格式也可以透過 Pipe 輕鬆處理 -->
520 |   <div>Birthdate: {{ currentHero?.birthdate | date:'longDate' }}</div>
521 |   ```
522 | 
523 | 
524 |   #### 安全導向運算子（`?.`）和 Null Property 路徑
525 |   我們大概有類似的經驗，不經意的存取了`null`或`undefined`的屬性，而得到一個錯誤警告：
526 |   ```javascript
527 |   let hero = { name: 'batman' };
528 |   if (heros.name) {}
529 | 
530 |   TypeError: Cannot read property 'name' of undefined in [undefined].
531 |   ```
532 | 
533 |   你絕對不會想要在應用程式裡面發生這樣的事情，因為整個介面都會垮掉，變得空白一片，使用者一頭霧水。
534 |   或是有時候某些繫結的資料必須經歷一段空窗期，這時值會是`null`或`undefined`，這時也會導致應用程式垮掉。
535 |   但是透過（`?.`）運算子的協助，可以讓 Angular 幫助開發者避免掉這樣的問題。
536 |   ```html
537 |   <!-- 你當然可以用比較傳統的方式來規避 -->
538 |   <h1>The null hero's name is {{ nullHero && nullHero.name }}</h1>
539 | 
540 |   <!-- 但是有了 Angular 的幫忙，可以更瀟灑的處理 -->
541 |   <h1>The null hero's name is {{nullHero?.name}}</h1>
542 |   ```
543 | 


--------------------------------------------------------------------------------