jzlin/Angular 4 開發實戰：新手實作篇 (手冊).md Secret

## Angular 4 開發實戰：新手實作篇 (手冊).md

      
    Raw
  

              Angular 4 開發實戰：新手實作篇 (手冊).md
            
          
    Angular 4 開發實戰：新手實作篇 (手冊)

課程實作時間


2017/10/1 (日) 9:00 ~ 17:00

學員實作準備


Angular 4 開發環境說明 (必裝)
Angular 4 開發實戰：新手實作篇 實作主題說明 (影片) (必看)

版型下載: https://github.com/coolrare/todomvc-template (請學員下載這個)
版型來源: TodoMVC

TodoMVC 的需求規格書: Application Specification
官方 TodoMVC App Template 下載方式

git clone https://github.com/tastejs/todomvc-app-template.git
cd todomvc-app-template
npm install
lite-server         ( 需先安裝 lite-server 全域套件: npm install -g lite-server )


進擊的前端工程師：今天就自己打造 API 吧！ (影片) (必看)
如何在 Angular CLI 建立的 Angular 2 開發環境呼叫遠端 RESTful APIs (必讀)
透過 Angular CLI 建立的專案，請使用 npm start 來啟動開發伺服器，不要用 ng serve 命令

學員實作手冊

任務 01：建立 Angular 4 專案

任務說明

請試著用最新版的 Angular CLI 工具建立一個全新的 Angular 4 專案骨架
可以嘗試用 ng new 來建立新專案

任務時間

預計在 5 分鐘之內可完成

參考連結

Angular CLI
angular/angular-cli: CLI tool for Angular
The Ultimate Angular CLI Reference Guide

進階練習

嘗試不同的建立專案方式 ( ng help new )

啟用 Angular Router 機制

ng new --routing


改用 SCSS 處理樣式

ng new --style scss


改用 Inline 的方式實作樣式與範本

ng new --inline-style --inline-template


跳過 npm install 動作

ng new --skip-install
npm install 或 yarn


跳過建立 Git 本地儲存庫

ng new --skip-git


跳過自動建立單元測試程式

ng new --skip-tests


任務 02：加入 HTML 網頁版面

任務說明

下載 TodoMVC 網頁版型 ( 純版面 ) ( 只有 HTML + CSS 而已 )

https://github.com/coolrare/todomvc-template


將 TodoMVC 版型加入到 Angular 4 專案中
確認版型已經加入 Angular 4 專案的 AppComponent 中，並可以在瀏覽器正常顯示

npm start


任務時間

預計在 10 分鐘之內可完成

參考連結

GUIDE - NgModules

進階練習

嘗試說明 Angular 4 的啟動生命週期

載入 index.html
執行 main.ts
載入 AppModule
載入 AppComponent
套用 AppComponent 的 selector
載入 Directive ( AppComponent )


任務 03：切割網頁為多個子元件

任務說明

建立 TitleComponent 元件
將 AppComponent 元件範本中的 <h1>todos</h1> 移至全新的 TitleComponent 元件中
將 TitleComponent 元件 Directive 加入到 AppComponent 元件裡

任務時間

預計在 5 分鐘之內可完成

參考連結

Generating Components, Directives, Pipes and Services
AngularDoc for Visual Studio Code - Visual Studio Marketplace

進階練習

嘗試不同參數建立元件 ( ng help generate )

建立不含 *.spec.ts 的單元測試程式碼

ng g c --spec=false <ComponentName>


不要建立元件資料夾

ng g c --flat <ComponentName>


建立 Inline 的樣式與範本

ng g c --inline-style --inline-template <ComponentName>


嘗試將上述練習建立的多餘元件從專案中移除，並確認目前專案可以在瀏覽器正常顯示


任務 04：套用內嵌繫結 (Interpolation)

任務說明

將 app.component.ts 中的 title 屬性移到 title.component.ts 檔案中
透過 內嵌繫結 (Interpolation) 將 title 屬性顯示在 Template 的 h1 標籤內

任務時間

預計在 1 分鐘之內可完成

參考連結

GUIDE - Template Syntax - Interpolation

注意事項

透過內嵌繫結輸出，無論是甚麼型別的物件，最終都會轉換成「字串」輸出。
避免副作用

使用內嵌繫結絕對不應該修改任何屬性或對任何元件、屬性進行更新動作！


範本表達式看起來像 JS 語法，很多 JS 語法也都是範本表達式的有效語法，但並非全部都能用。

在範本表達式中，看起來像是 JS 語法但不能使用的有：

assignments ( = , += , -= , ...)
new
chaining expressions with ; or ,
increment and decrement operators ( ++ and -- )
bitwise operators | and &


以下是範本表達式中獨有的運算子 ( Template expression operators )：

The pipe operator ( | )
safe navigation operator ( ?. )


其他使用限制

不能使用 window 或 document 等全域變數/屬性
不能使用 console.log 或 Math.xxx 等方法 (因為 console 與 Math 算是全域變數)


任務 05：套用屬性繫結 (Property Binding)

任務說明

在 AppComponent 中建立一個 inputHint 屬性
在 app.component.html 中使用屬性繫結套用 inputHint 到 <input> 的 placeholder 屬性裡

任務時間

預計在 1 分鐘之內可完成

參考連結

GUIDE - Template Syntax - Property binding

進階練習

試著將屬性繫結的中括號 [ 與 ] 移除，看看會出現甚麼錯誤
新增一個 table 在頁面中 (如下)，試著用屬性繫結將 colspan 修改為從 AppComponent 元件中取得

      <table>
        <tr>
          <td colspan="2">Two Column</td>
          <td>One Column</td>
        </tr>
      </table>


試著在 <input> 加上一個自訂的 HTML 擴充屬性 ( data-myhint )

HTML 範例：<input data-myhint="TEST DATA">
將這個 HTML5 data-myhint 擴充屬性內容設定為 AppComponent 內的 inputHint 屬性內容
請用 Angular 2 屬性繫結 (Property Binding) 來完成任務
請用 Google Chrome 的開發者工具查看結果是否正確


注意事項

避免副作用

使用內嵌繫結絕對不應該修改任何屬性或對任何元件、屬性進行更新動作！


要特別注意傳入 [屬性] 的物件型別必須與元件能傳入的物件型別一致
只有符合以下條件，使用屬性繫結時可以不用加上 [ 與 ]

目標屬性可以接受「字串」型別的物件
傳入屬性的值是固定的
傳入屬性的值之後不會再變更


任務 06：套用事件繫結 (Event Binding)

任務說明

在 AppComponent 元件中新增一個 todos 陣列，型別為 any[]
在輸入框輸入任何文字，只要按下 Enter 鍵就會自動加入到 todos 陣列中
請用 Augury 工具查看 AppComponent 的狀態

任務時間

預計在 10 分鐘之內可完成

參考連結

GUIDE - Template Syntax - Event binding
Key event filtering (with key.enter)

進階練習

試著用各種不同方式實作這個任務

透過 keyup + $event.keyCode
透過 keyup.enter


當欄位沒有輸入任何資料直接按下 Enter 時，請不要新增空值到 todos 陣列中


任務 07：套用雙向繫結 (Two-way Binding)

任務說明

在 AppComponent 元件中新增一個 todo 屬性 (型別為字串)
設定 <input> 與 todo 屬性雙向繫結，並用 Augury 查看 AppComponent 的狀態
在按下 Enter 並新增到 todos 陣列後，輸入框上已經輸入的文字必須清除

任務時間

預計在 3 分鐘之內可完成

參考連結

FormsModule is required to use ngModel
GUIDE - Template Syntax - Two-way binding

進階練習

試著將雙向繫結修改為兩個單向繫結 ( 屬性繫結 + 事件繫結 )

[(x)] 語法事實上是 [x] 與 (xChange) 的結合 (語法糖)


任務 08：套用結構指令 (Structure Directives)

任務說明

請將 todos 的內容顯示在版型中

在 <li class="completed"> 套用 *ngFor 語法

先暫時將 class="completed" 類別樣式移除


在 <section class="main"> 與 <footer class="footer"> 套用 ngIf 語法

判斷當 todos 數量為 0 時，自動隱藏這兩個區塊的內容


任務時間

預計在 5 分鐘之內可完成

參考連結

GUIDE - Template Syntax - Built-in structural directives

注意事項

關於 *ngFor 的範本輸入變數 ( template input variable )

*ngFor="let hero of heroes"
用 let 建立的 hero 變數為範本輸入變數 ( template input variable )
範本輸入變數僅限於套用 *ngFor 的元素範圍


範本輸入變數 與 範本參考變數 是兩個截然不同的東西

範本輸入變數 (template input variable)

僅限於套用 *ngFor 的範本範圍


範本參考變數 (template reference variable)

限於目前元件的整個範本範圍
在任意標籤上用 #refname 宣告範本參考變數


任務 09：套用屬性指令 (Attribute Directives)

任務說明

在每個 TODO 項目上使用 ngClass 套用勾選之後的樣式

項目勾選時，套用 completed 樣式類別
項目沒勾選時，移除 completed 樣式類別


任務時間

預計在 5 分鐘之內可完成

參考連結

GUIDE - Template Syntax - Built-in attribute directives

進階練習

改用 ngStyle 修改樣式試試


任務 10：套用 @Input() 裝飾器 (Decorator)

任務說明

建立 FooterComponent 元件
將 <section> 下的 <footer class="footer"> 所有內容移入此 FooterComponent 元件
顯示總共有多少 TODO 項目被加入 todos 裡面 ( 0 item left )

任務時間

預計在 15 分鐘之內可完成

參考連結

GUIDE - Template Syntax - Input and output properties
GUIDE - Component Interaction

進階練習

自訂輸入屬性名稱 ( 讓元件內的屬性名稱與在範本使用的屬性名稱不一樣 )

@Input('master') masterName: string;


實作 OnChanges 介面，並實作 ngOnChanges 方法

當傳入 FooterComponent 的 todos 資料筆數大於 5 項時，要將 5 item left 透過 ngStyle 修改為紅色粗體


移除 ngOnChanges() 方法，改用 TypeScript 的 getter/setter 來自訂 todos 的傳入方式

改用 setter 來套用 @Input() 裝飾器 (decorator)
當傳入 FooterComponent 的 todos 資料筆數大於 5 項時，要將 5 item left 透過 ngStyle 修改為紅色粗體


任務 11：套用 @Output() 裝飾器 (Decorator)

任務說明

在 FooterComponent 實作 Clear completed 功能

任務時間

預計在 25 分鐘之內可完成

參考連結

GUIDE - Template Syntax - Input and output properties
GUIDE - Component Interaction

進階練習

直接從 AppComponent 呼叫 FooterComponent 中的方法

提示：透過範本參考變數可以取得範本內的任何一個元件實體


任務 12：使用 Pipe 元件

任務說明

透過 uppercase Pipe 將所有 TODO 項目內容轉大寫

任務時間

預計在 1 分鐘之內可完成

參考連結

GUIDE - Template Syntax - The pipe operator
GUIDE - Pipes
API Reference

進階練習

試試 Angular 2 其他內建的 Pipes


任務 13：自訂 Pipe 元件

任務說明

實作 TodoMVC 的資料過濾功能 ( All , Active , Completed )

從 FooterComponent 紀錄過濾的狀態，透過自訂的 filterPipe 元件過濾 todos 資料


任務時間

預計在 40 分鐘之內可完成

參考連結

GUIDE - Pipes - Custom pipes
GUIDE - Component Interaction

進階練習

當過濾條件選在 Active 的時候，此時新增一筆資料，在 TODO 清單中的項目如果不會更新，請試圖解決這個問題。


任務 14：注入 HttpClient 服務元件

任務說明

實作全選功能
實作刪除功能
注入 HttpClient 服務元件 ( 先不用呼叫任何 API )

任務時間

預計在 20 分鐘之內可完成

參考連結

GUIDE - HttpClient

進階練習

當過濾條件選在 Active 或 Completed 的時候，此時新增一筆資料，在 TODO 清單中的項目如果不會更新，請試圖解決這個問題。


任務 15：使用 HttpClient 服務元件呼叫 RESTful APIs

任務說明


將 TODOs 資料寫入 JSON Server

JSON Server 使用方式請參考 進擊的前端工程師：今天就自己打造 API 吧！
執行 json-server https://gist.githubusercontent.com/ryan10328/44cbc3a4a23c73e79c1a6bedc0e6a07f/raw/9f6b9e8b9d3cfa3053906178383760a57649ff31/db.json
使用瀏覽器訪問 http://localhost:3000 位址，如成功顯示 You're successfully running JSON Server 即可開始使用 JSON Server


請善用 Postman 測試你的 API


任務時間

預計在 30 分鐘之內可完成

參考連結

GUIDE - HTTP Client

進階練習

設計自動儲存功能 ( 每 15 秒自動儲存一次 )


任務 16：自訂服務元件

任務說明

建立 DataService 服務元件，將 TODOs 資料全部改用 DataService 元件進行操作與管理
改從 JSON Server 取得先前寫入的 todos 資料

任務時間

預計在 10 分鐘之內可完成

參考連結

GUIDE - Component Interaction

進階練習

設計自動儲存功能 ( 只要有任何資料發生異動就會自動儲存 )


任務 17：秘密關卡

任務說明

加入 TODO 項目編輯功能，在項目上用滑鼠雙擊就會進入編輯畫面，按下 Enter 代表確認更新
即便再輸入框打字到一半，也可以自動儲存資料，下次重新整理網頁時會自動顯示出來

可以用 localStorage 儲存資料
可以用 JSON Server 儲存資料


任務時間

預計在 30 分鐘之內可完成

進階練習

設計自動儲存功能 ( 只要有任何資料發生異動，而且在 1s 內沒有連續的異動才會自動儲存 )

Rx.Observable.prototype.debounce


自動儲存時要顯示提示效果

可以用任意框架來實現，就是不能用 alert() 來提示