開發環境建置步驟

Ionic 開發環境與 Angular 雷同，我們需要安裝：

• Node.js 6 LTS & npm 3.x.x 以上版本

• Ionic CLI

• Cordova

• Visual Studio Code (簡稱：VS Code)

安裝方式請參考參考 Angular 開發環境(Windows 版)？。
最大差別是 Angular 需要安裝 Angular CLI，Ionic 則是安裝 Ionic CLI。

服務(Service)

隨著功能的增加邏輯也會相對越來越複雜，上帝對象(God object)就會油然而生，維護性也會越來越困難，所以程式碼(TypeScript)以及樣板(HTML)的切割工作就會變得很重要，對於程式碼來說最常見的方式就是將資料邏輯與介面操作給分割開來。

單向繫結(One-Way Binding)

我們在 Angular 事件 中演練了 事件繫結 的應用，在 Angular 指令 & 資料繫結 中演練了 內嵌繫結 與 屬性繫結，這3種資料繫結方式正是 Angular 所提供的單向繫結，其差異如下：

指令 (Directive) & 資料繫結 (Binding)

在 Angular UI：Clarity Design System 中，透過修改 tslint.json 檔的 component-selector 屬性來讓我們可以自訂元件 selector 屬性，現在同樣的來調整 first-app 專案，將 employee 資料夾內的元件改成 emp 開頭，將 home 資料夾內的元件改成 home 開頭。
修改 tslint.json 的 component-selector 設定。

Clarity Design System

因為多個一個新案子，所以就順便試試 VMware 所開發的 Clarity Design System

建立 Angular 專案

不知道怎麼建立的可以參考 建立 Angular 專案。
目前環境：

• Node.js：8.4.0

• Angular CLI：1.4.0

• Angular：4.4.0-RC.0

事件 (EventEmitter)

事件繫結 (Event Binding)

事件(Event) 可以說是一種狀態的描述，它提供一個主動通知的機制，讓我們可以在發生的當下去做一些額外的處理，例如：按下按鈕，這應該是我們最常用了事件，在點擊按鈕後我們可能儲存目前資訊、切換目前頁面、顯示額外訊息…等等。

標題列 (Header)

接續之前的進度，開始將網頁上方的 Header 區塊加入一些內容，瀏覽 Angular Material2 網站可看已經有一個現成的元件-Toolbar，我們在 src\app\custom-material.module.ts 加入2個元件-MdToolbarModule、MdTooltipModule。

延遲載入 (Lazy loading)

一般來說我們會將 JavaScript 直接撰寫在網頁內或是另外儲存成 js 檔再透過連結方式引用，但是隨著功能的增加檔案也會逐漸變大，因而導致使用者需要等待載入的時間也逐漸變長。

模組化

在 Angular 模組 我們練習先建立一個模組(NgModule)，然後在上面建立元件(Component)，今天我們試著反過來將既有的元件包覆到一個模組內。

子路由 (Child Routing)

在 Angular UI：Angular Flex-Layout 我們透過 ng g m home --routing 建立 HomeModule，因為多加了 --routing 參數，所以 CLI 多幫我們建立一個路由模組 home-routing.module.ts。