###### tags: `tutorials`
# Angular


* **介紹**

Angular的核心所在為**數據驅動**，理念是想要透過**數據綁定**來消除傳統的DOM(註釋1)操作，進而減少複雜的操作以及避免錯誤的產生。當然Angular想做的事情不僅只是數據綁定而已。其他的像是：MVC的設計模式、依賴注入(DI，Dependency Injection)、完整的測試環境等等，都是Angular跟以往過去所有的函式庫不同的地方，Angular想提供的其實是一個**完整的開發平台**。

Angular 應用程式由一棵元件樹組成，每個 Angular 元件都有一個明確的用途和責任。

---

**註釋1：何謂DOM?**
DOM，全名是文件物件模型（Document Object Model）。根據MDN的說明，它提供了一個結構化的表示法，並讓程式可以存取與改變文件架構、風格和內容的方法。


舉例來說，我們可以透過使用 JavaScript/jQuery ，操作如上圖所示的 DOM，就可以拿到我們想要拿的文字如 My link。所以一般我們如果想要將 My link 改為 My favorite 的話，就要用上述的操作來取得並更新其文字。

---

# 開發工具和環境建置

以前的前端套件大多數是函式庫的形式，每次引用的時候都是將事先到官網下載好的檔案引入，或是直接引入線上的連結(CDN)。像是：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="assets/js/lib/jquery.min.js"></script>

而在[Node.js](https://nodejs.org/en/)與其套件管理系統NPM（Node Package Manager）的蓬勃發展下，現今的前端框架已大多是基於這套系統的架構上開發。
安裝完node.js後可以使用命令提示工具輸入 `node -v` 來查看版本並確認已安裝好。
其實安裝Node.js的時候，也一併把NPM安裝好了（Node.js 0.6.3版後將NPM內建）cmd輸入`npm -v` 確認是否安裝。

---

# Angular CLI

Angular CLI 是 Angular 的命令列工具。如果 Angular 沒有了它，Angular 都不 Angular 了

安裝指令 `npm install -g @angular/cli`
確認 `ng -v` `ng version` `ng v`


開始建立前，建議先將終端機的當前目錄移動到你想要的位置之後，再輸入以下指令：
`ng new HelloAngular`
輸入完等它跑完之後，先輸入以下指令進入剛剛新建的專案目錄裡：
`cd HelloAngular`
接著再輸入:
`ng serve` (開啟Angular服務的感覺)
打開瀏覽器並在網址列輸入localhost:4200後，會看到類似下圖的畫面。


---

# VScode

安裝完 VSCode 之後，下載Angular Extension Pack的擴充套件。這個擴充套件是作者Will保哥將很多好用的Angular相關擴充套件都整合進一個擴充套件裡，只要安裝一個套件就能連帶安裝好其他相關套件，方便又好用。

---
# Augury

Augury 是 Angular 官方出版的開發者工具，透過 Chrome 或是 Firefox 的擴充功能來安裝。這套工具可以幫我們分析頁面中所用元件的狀態與方法。
安裝方式很簡單，以Chrome來說，只要到線上應用程式商店之後，選擇擴充功能，在搜尋的文字框中輸入Augury，即可找到並安裝。

---

# Angular Component
元件是 Angular 應用的主要構成要素。每個元件包括如下部分：
* 一個 HTML 範本，用於宣告頁面要渲染的內容
An HTML template that declares what renders on the page
* 一個用於定義行為的 Typescript 類別
A Typescript class that defines behavior
* 一個 CSS 選擇器，用於定義元件在範本中的使用方式
A CSS selector that defines how the component is used in a template
* （可選）要應用在範本上的 CSS 樣式
Optionally, CSS styles applied to the template

---

# Angular template語法 <ng-template>

*ngFor 是一個"結構型指令"。結構型指令會透過新增、刪除和操縱它們的宿主元素等方式塑造或重塑DOM的結構。帶有星號*的指令都是結構型指令。

* ***ngFor**：它就像一般程式裡常用到的 for-loop 一樣，當我們將資料交給它時，它就會將它所在的 HTML 元素的位置跟資料筆數逐筆產生出來。
* 使用NgFor時，我們可以同時搭配使用五個不同的變數，分別是：
**index**：整數值；代表目前資料在陣列中的index
**first**：Boolean；代表目前資料是否為第一筆
**last**：Boolean；代表目前資料是否為最後一筆
**even**：Boolean；代表目前資料的index是否為第偶數筆
**odd**：Boolean；代表目前資料的index是否為第奇數筆
* 要使用這五種變數，必須在*ngFor="let item of items"中在加上let ooo = xxx的指派，把NgFor的變數指派給前面let設定的變數，例如：
`*ngFor="let item of items;let recordIndex = index;let firstRecord = first;let lastRecord = last; let evenRecord = even; let oddRecord = odd"`
也可以使用下麵作法：
`index as recordIndex`
* 接下來就可以使用這五個變數做變化：

        <li *ngFor="let item of items;let recordIndex = index;let firstRecord = first;let lastRecotd = last; let evenRecord = even; let oddRecord = odd">
            <label htmlFor="chk_{{item.id}}">
                <input id="chk_{{item.id}}" type="checkbox" checked]="item.done" (click)="itemClick(item)">
                <span [ngClass]="{'done' : item.done, 'text-danger': firstRecord, 'text-warning': lastRecotd, 'bg-info': evenRecord, 'bg-success': oddRecord}">
                {{ recordIndex }} . {{ item.value }}
                </span>
            </label>
            <a href="#" (click)="delete(item)">刪除</a>
            <span *ngIf="item.done">(已完成)</span>
        </li>
    </ul>```   

---

* **{ { } }** - 一種資料綁定的方式。
    
---

* Angular有提供一個原生的管道pipe(註釋2) "**date**" 給我們使用。使用方式像是這樣：
`<td>{{ item.UpdateTime | date: 'yyyy-MM-dd HH:mm:ss' }}</td>`

---

**註釋2 : 管道(pipe)**
可以將其想像成，當資料經過這個管道流出來之後，會變成另一種資料或資料格式。

---

* ***ngIf**