2020-6-4 Angular 問題集

[hsiaofung]

製作Angular應用程式(建置、部署、效能最佳化)

• 如何建置最佳化版本?
• 如何部署?
• 如何設定應用程式上線的位置?
• 快取策略?
• 如何解決CORS?
• 如何解決測試和上線環境不同的問題?
• 若想從瀏覽器直接輸入特定路徑，該如何解決問題?
• 如何懶載入?
• 如何在伺服端繪製應用程式?

[hsiaofung]

Angular 路由

• 如何新增導向(路徑)?
• 如何處理不同類型的路徑(空，不存在路徑)?
• 如何解決點擊聯結整個網頁重新載入?(當路徑改變只有對應的元件載入並執行相對應的API呼叫)?
• 如何解決網頁帶參數(必要性路徑參數)?
• 如何透過路由瀏覽應用程式?
• 如何解決網頁帶參數(選擇性路徑參數)?
• 如何保護路徑，例如登入後才能存取?(防止路徑開啟)
• 如何保護路徑，確保離開頁面不會讓表單資料跑掉?(跳離頁面先確認)(防止路徑關閉)
• 如何啟用一個路徑前先載入資料?(確保開啟頁面前，所有資料都已存在?)
• 除了snapshot 之外，如何用可觀察訂閱路徑?

[hsiaofung]

Angular 服務

• 什麼是Angular 服務?
• 如何建構Angular的服務?
• 如何跨元件共用資料?
• 如何在模組層定義服務?
• 如何在元件層定義服務?
• Angular 如何設置相依注入系統?
• 請說明Angular 相依注入的行為?
• 如何處理伺服器回傳的資料? (非同步的處理)
• 請說明Observable 運算子 throw和of的用法?
• 如何使用subscribe處理成功和錯誤的情況?
• 如何使用async取代手動訂閱?

[hsiaofung]

Angular HTTP

• 如何使用Angular 的HttpClient 發出HTTP呼叫?
• 如何處理同源政策(CORS)的問題?
• 如何使用HttpClient的標頭與查詢參數?
• 如何設定不同的回應細節及不同的回應型別。
• 如何建構一個攔截程序以處理HTTP請求與回應?
• 如何共用一個可觀察，避免多次的呼叫API?
• 如何利用可觀察完成複雜的工作與搜尋範例?(如何根據搜尋條件取得股票清單?)
• 使用同一個可觀察載入清單、搜尋產品、重新載入清單?

[hsiaofung]

Angular 單元測試服務

• 如何測試Angular服務與使用服務的元件?
• 如何對服務進行單元測試?
• 如何以相依服務測試使用Angular服務的元件?
• 如何使用Angular 的相依注入系統在單元測試中模擬服務相依?
• 如何在測試中使用真正的服務來測試元件?
• 如何在測試中模擬相依的服務來測試元件?
• 如何在測試中以假服務來測試元件?
• 如何撰寫HttpClient單元測試?
• 如何使用async與fakeAsync處理非同步測試?
• 如何撰寫處理非同步流程的服務的測試?
• 如何處理XHR與HTTP的測試。
• 如何模擬伺服器呼叫 ?
• 如何利用Angular內建的測試工具測試HTTP通訊?
• 如何測試從伺服器取得股票清單的初始化邏輯? 確保整個呼叫流程、取得股票清單、然後顯示?
• 如何模擬XHR呼叫，只檢查XHR呼叫是否發出。(想要測試XHR呼叫的流程，但不想發出真正的呼叫。)
• 如何處理POST呼叫，以及如何從伺服器發送非200回應?

[hsiaofung]

Angular 模板表單

• 如何建構模板驅動表單?
• 如何使用ngModel進行雙向資料連結?
• 模板驅動表單連結資料的三種寫法?
• 如何處理不同類型的表單元素並將值連結到元件，並允許我們提交表單後獲取使用者輸入?
• 什麼是Angular控制項狀態?
• 如何取得與使用狀態?
• 什麼是模板參考變數? 要如何使用?
• 如何檢驗輸入欄位與顯示錯誤訊息?
• 如何使用模板參考變數與檢驗程序，控制何時與如何顯示檢驗訊息?
• 如何選擇在模板或在元件類別自行決定如何顯示，或自行建構檢驗訊息並從元件類別控制?
• 如何使用FormGroup ?
• 如何處理表單的輸入、顯示初始值、重置、欄位狀態、檢驗/錯誤訊息、提交?

[hsiaofung]

Angular 反應式表單

• 反應式表單和模板表單的不同?
• 如何使用FormControl建立反應式表單?
• 如何使用FormGroup建立表單群組?
• 如何使用FormBuilder建立反應式表單?
• 如何使用FormArray建構表單?
• 如何顯示表單的狀態?
• 如何檢驗與顯示錯誤?
• 如何使用表單與資料模型，以及兩者如何互動?(create, load, patch, reset)
• 如何使用getter讓程式碼更簡潔?
• 反應式表單如何分離使用者所見與互動，和資料模型?

[hsiaofung]

Angular 元件

• 如何定義元件?
• 什麼是樣式封裝?
• 描述元件與模組的關係?
• 如何使用@input、@output?(如何從父元件傳資料給子元件，從子元件傳事件給父元件)(或是如何在元件上新增自訂屬性與自定行為?)
• 什麼是變更檢測?
• 什麼是Angular元件的生命週期及相關的函式?
• 什麼是視圖投射?

[hsiaofung]

Angular 測試元件

• 為何要單元測試?
• 元件的單元測試有哪些項目?
• 如何撰寫元件類別與Angular無關的隔離單元測試?
• 如何測試元件邏輯?(Angular 生命週期的測試)
• 如何測試元件互動?
• 如何使用TestBed測試個別元件與跨元件整合?
• 如何執行測試與除錯?

[hsiaofung]

Angular 內建指令

• 什麼是內建指令?
• 內建指令有哪些分類?
• 內建指令與元件有什麼差別?
• 使用的時機?
• 如何使用常見指令: ngClass、ngStyle、ngIf、ngFor、ngSwitch?
• 什麼是trackBy? 如何使用?
• 如何使用ngFor讓偶數項目背景色改變?
• 什麼是多姊妹結構指令? 該如何避免?

[hsiaofung]

Angular CLI & 元件初探

• 設定Angular的開發環境
• CLI有哪些功能?
• 如何執行應用程式?
• 描述CLI產生的應用程式的結構?
• 如何建構及使用新元件?
• 如何資料連結?
• 如何屬性連結?
• 如何事件連結?
• 如何使用$event?
• 如何將資訊封裝在TypeScript的類別中，以確保程式碼的清晰與模組化?

[hsiaofung]

Kata

• 招式一: 商品列表
• 招式二: 商品細節
• 招式三: 啟用一個路徑前，預載資料
• 招式四: 攔截
• 招式五: 傳遞頁數，顯示正確的頁
• 招式六: 註冊
• 招式七: 登入
• 招式八: 保護
• 招式九: 建立商品
• 招式十: 離開前確認
• 招式十一: 搜尋
• 招式十二: 同一個觀察

[hsiaofung]

Angular redux (ngrx)

• 什麼是ngrx ?