- 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
命令
任務說明
- 請試著用最新版的 Angular CLI 工具建立一個全新的 Angular 4 專案骨架
- 可以嘗試用
ng new
來建立新專案
任務時間
- 預計在 5 分鐘之內可完成
參考連結
進階練習
- 嘗試不同的建立專案方式 (
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
- 啟用 Angular Router 機制
任務說明
- 下載 TodoMVC 網頁版型 ( 純版面 ) ( 只有 HTML + CSS 而已 )
- 將 TodoMVC 版型加入到 Angular 4 專案中
- 確認版型已經加入 Angular 4 專案的 AppComponent 中,並可以在瀏覽器正常顯示
npm start
任務時間
- 預計在 10 分鐘之內可完成
參考連結
進階練習
- 嘗試說明 Angular 4 的啟動生命週期
- 載入
index.html
- 執行
main.ts
- 載入
AppModule
- 載入
AppComponent
- 套用
AppComponent
的selector
- 載入 Directive (
AppComponent
)
- 載入
任務說明
- 建立 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>
- 建立不含
- 嘗試將上述練習建立的多餘元件從專案中移除,並確認目前專案可以在瀏覽器正常顯示
任務說明
- 將
app.component.ts
中的 title 屬性移到title.component.ts
檔案中 - 透過 內嵌繫結 (Interpolation) 將
title
屬性顯示在 Template 的h1
標籤內
任務時間
- 預計在 1 分鐘之內可完成
參考連結
注意事項
- 透過內嵌繫結輸出,無論是甚麼型別的物件,最終都會轉換成「字串」輸出。
- 避免副作用
- 使用內嵌繫結絕對不應該修改任何屬性或對任何元件、屬性進行更新動作!
- 範本表達式看起來像 JS 語法,很多 JS 語法也都是範本表達式的有效語法,但並非全部都能用。
- 在範本表達式中,看起來像是 JS 語法但不能使用的有:
- assignments (
=
,+=
,-=
, ...) new
- chaining expressions with
;
or,
- increment and decrement operators (
++
and--
) - bitwise operators
|
and&
- assignments (
- 以下是範本表達式中獨有的運算子 ( Template expression operators ):
- The pipe operator (
|
) - safe navigation operator (
?.
)
- The pipe operator (
- 其他使用限制
- 不能使用
window
或document
等全域變數/屬性 - 不能使用
console.log
或Math.xxx
等方法 (因為console
與Math
算是全域變數)
- 不能使用
- 在範本表達式中,看起來像是 JS 語法但不能使用的有:
任務說明
- 在
AppComponent
中建立一個inputHint
屬性 - 在
app.component.html
中使用屬性繫結套用inputHint
到<input>
的placeholder
屬性裡
任務時間
- 預計在 1 分鐘之內可完成
參考連結
進階練習
- 試著將屬性繫結的中括號
[
與]
移除,看看會出現甚麼錯誤 - 新增一個 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 的開發者工具查看結果是否正確
- HTML 範例:
注意事項
- 避免副作用
- 使用內嵌繫結絕對不應該修改任何屬性或對任何元件、屬性進行更新動作!
- 要特別注意傳入
[
屬性]
的物件型別必須與元件能傳入的物件型別一致 - 只有符合以下條件,使用屬性繫結時可以不用加上
[
與]
- 目標屬性可以接受「字串」型別的物件
- 傳入屬性的值是固定的
- 傳入屬性的值之後不會再變更
任務說明
- 在
AppComponent
元件中新增一個todos
陣列,型別為any[]
- 在輸入框輸入任何文字,只要按下 Enter 鍵就會自動加入到
todos
陣列中 - 請用 Augury 工具查看 AppComponent 的狀態
任務時間
- 預計在 10 分鐘之內可完成
參考連結
進階練習
- 試著用各種不同方式實作這個任務
- 透過
keyup
+$event.keyCode
- 透過
keyup.enter
- 透過
- 當欄位沒有輸入任何資料直接按下 Enter 時,請不要新增空值到
todos
陣列中
任務說明
- 在
AppComponent
元件中新增一個todo
屬性 (型別為字串) - 設定
<input>
與todo
屬性雙向繫結,並用 Augury 查看 AppComponent 的狀態 - 在按下 Enter 並新增到
todos
陣列後,輸入框上已經輸入的文字必須清除
任務時間
- 預計在 3 分鐘之內可完成
參考連結
進階練習
- 試著將雙向繫結修改為兩個單向繫結 ( 屬性繫結 + 事件繫結 )
- [(x)] 語法事實上是 [x] 與 (xChange) 的結合 (語法糖)
任務說明
- 請將
todos
的內容顯示在版型中- 在
<li class="completed">
套用*ngFor
語法- 先暫時將
class="completed"
類別樣式移除
- 先暫時將
- 在
- 在
<section class="main">
與<footer class="footer">
套用ngIf
語法- 判斷當
todos
數量為 0 時,自動隱藏這兩個區塊的內容
- 判斷當
任務時間
- 預計在 5 分鐘之內可完成
參考連結
注意事項
- 關於
*ngFor
的範本輸入變數 ( template input variable )*ngFor="let hero of heroes"
- 用
let
建立的hero
變數為範本輸入變數 ( template input variable ) - 範本輸入變數僅限於套用
*ngFor
的元素範圍
- 範本輸入變數 與 範本參考變數 是兩個截然不同的東西
- 範本輸入變數 (template input variable)
- 僅限於套用
*ngFor
的範本範圍
- 僅限於套用
- 範本參考變數 (template reference variable)
- 限於目前元件的整個範本範圍
- 在任意標籤上用
#refname
宣告範本參考變數
- 範本輸入變數 (template input variable)
任務說明
- 在每個 TODO 項目上使用
ngClass
套用勾選之後的樣式- 項目勾選時,套用
completed
樣式類別 - 項目沒勾選時,移除
completed
樣式類別
- 項目勾選時,套用
任務時間
- 預計在 5 分鐘之內可完成
參考連結
進階練習
- 改用
ngStyle
修改樣式試試
任務說明
- 建立
FooterComponent
元件 - 將
<section>
下的<footer class="footer">
所有內容移入此FooterComponent
元件 - 顯示總共有多少 TODO 項目被加入
todos
裡面 (0 item left
)
任務時間
- 預計在 15 分鐘之內可完成
參考連結
進階練習
- 自訂輸入屬性名稱 ( 讓元件內的屬性名稱與在範本使用的屬性名稱不一樣 )
@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
修改為紅色粗體
任務說明
- 在
FooterComponent
實作Clear completed
功能
任務時間
- 預計在 25 分鐘之內可完成
參考連結
進階練習
- 直接從
AppComponent
呼叫FooterComponent
中的方法- 提示:透過範本參考變數可以取得範本內的任何一個元件實體
任務說明
- 透過
uppercase
Pipe 將所有 TODO 項目內容轉大寫
任務時間
- 預計在 1 分鐘之內可完成
參考連結
進階練習
- 試試 Angular 2 其他內建的 Pipes
任務說明
- 實作 TodoMVC 的資料過濾功能 (
All
,Active
,Completed
)- 從
FooterComponent
紀錄過濾的狀態,透過自訂的filterPipe
元件過濾todos
資料
- 從
任務時間
- 預計在 40 分鐘之內可完成
參考連結
進階練習
- 當過濾條件選在
Active
的時候,此時新增一筆資料,在 TODO 清單中的項目如果不會更新,請試圖解決這個問題。
任務說明
- 實作全選功能
- 實作刪除功能
- 注入 HttpClient 服務元件 ( 先不用呼叫任何 API )
任務時間
- 預計在 20 分鐘之內可完成
參考連結
進階練習
- 當過濾條件選在
Active
或Completed
的時候,此時新增一筆資料,在 TODO 清單中的項目如果不會更新,請試圖解決這個問題。
任務說明
-
將 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 分鐘之內可完成
參考連結
進階練習
- 設計自動儲存功能 ( 每 15 秒自動儲存一次 )
任務說明
- 建立 DataService 服務元件,將 TODOs 資料全部改用 DataService 元件進行操作與管理
- 改從 JSON Server 取得先前寫入的
todos
資料
任務時間
- 預計在 10 分鐘之內可完成
參考連結
進階練習
- 設計自動儲存功能 ( 只要有任何資料發生異動就會自動儲存 )
任務說明
- 加入 TODO 項目編輯功能,在項目上用滑鼠雙擊就會進入編輯畫面,按下 Enter 代表確認更新
- 即便再輸入框打字到一半,也可以自動儲存資料,下次重新整理網頁時會自動顯示出來
- 可以用
localStorage
儲存資料 - 可以用 JSON Server 儲存資料
- 可以用
任務時間
- 預計在 30 分鐘之內可完成
進階練習
- 設計自動儲存功能 ( 只要有任何資料發生異動,而且在 1s 內沒有連續的異動才會自動儲存 )
- 自動儲存時要顯示提示效果
- 可以用任意框架來實現,就是不能用
alert()
來提示
- 可以用任意框架來實現,就是不能用
在 command line 執行
npm start
是使用 local 環境的@angular/cli
(安裝在專案裡的版本)在 command line 執行
ng serve
是使用 global 環境的@angular/cli
(透過npm install -g @angular/cli
指令安裝)建議直接使用專案裡的
@angular/cli
版本,避免版本差異造成非預期的結果。 (當然大部分的情況下是不會有什麼問題的!)