前端框架有如洪水一般滾滾而來，每套框架無不使出全力，不斷進化。當然 Angular 也不惶多讓，今年 10 月 Angular 即將推出全新 v5.0 版本，在新的版本中將帶來更多另人振奮的消息，本次演說將鉅細靡遺帶來 Angular 5 各種全新特性與效能改進，體驗完整的 SPA 網站開發體驗。

1. An gu la r
User Group Taiwan
Angular 5 全新功能探索
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/

2. An gu la r
User Group Taiwan
Angular 5.0.0 (pentagonal-donut) CHANGELOG
• https://github.com/angular/angular/blob/master/CHANGELOG.md
Angular CLI 1.5 (Turing) Release Notes
• https://github.com/angular/angular-cli/releases/tag/v1.5.0
Version 5.0.0 of Angular Now Available
• https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced
Angular 5 升級攻略 (教學影片)
• https://www.facebook.com/will.fans/videos/1870546876307781/
查看版本資訊
• ng -v
Angular 與 Angular CLI 新版資訊

3. An gu la r
User Group Taiwan
Angular 5 升級攻略
https://www.facebook.com/will.fans/videos/1870546876307781/

4. An gu la r
User Group Taiwan
查詢目前 Angular 版本
• ng -v
查詢 @angular/core 最新版本編號
• npm show @angular/core@* version --json
修正 package.json 特定套件版號
• 將所有 @angular/* 套件版本修改為 "^5.0.0"
升級其他 Angular 5 相依套件
基本升級步驟

5. An gu la r
User Group Taiwan
升級 @angular/cli 到 1.5 以上版本
• npm install @angular/cli@1.5
升級 TypeScript 到 2.4 以上版本
• npm install typescript@2.4
升級 rxjs 到 5.5 以上版本
• npm install rxjs@5.5
升級 codelyzer 到 4 以上版本
• npm install codelyzer@4
重新安裝所有套件
• npm install
升級其他 Angular 5 相依套件

6. An gu la r
User Group Taiwan
Angular CLI 1.5 全新特性

7. An gu la r
User Group Taiwan
https://github.com/angular/angular-cli/wiki/new
ng new --help
ng new demo5 --routing
ng new demo5 --routing --minimal
ng new demo5 --routing --skip-test
ng new demo5 --routing --style scss
ng new demo5 --routing --skip-commit
ng new 預設建立 Angular 5.0.0 專案

8. An gu la r
User Group Taiwan
ng build --prod
ng build 預設啟用 Build Optimizer

9. An gu la r
User Group Taiwan
在 Angular CLI 1.4 時為實驗性功能
• ng build --prod --build-optimizer
Build Optimizer 有兩個主要任務
1. 標示所有 "pure" 的元件，以強化 tree shaking 效果
2. 移除所有用不到的 Angular Decorators 程式碼
大幅減少 bundle 過後的 JS 原始碼
• 不用特別修正程式碼，打包後的 JS 檔案直接比前版減少 15% ~ 30%
關於 Build Optimizer 的基本原理

10. An gu la r
User Group Taiwan
Angular CLI 1.4.9 + Angular 4.4.6

11. An gu la r
User Group Taiwan
Angular CLI 1.5.0 + Angular 5.0.0

12. An gu la r
User Group Taiwan
Angular 5 編譯器

13. An gu la r
User Group Taiwan
TypeScript 2.3 公開 Transformation API 技術
• http://blog.scottlogic.com/2017/05/02/typescript-compiler-api-revisited.html
Angular 編譯器改採 TS 的 Transform API 實現增量編譯
• 透過增量編譯的 AOT 建置，最高可縮減 95% 編譯時間
• 目前 ng serve 預設並沒有啟動 --aot 選項 (建議加上)
ng serve --aot
• 未來的 Angular CLI 版本，將會預設啟用 --aot 選項
大幅改進 AOT 編譯效能

14. An gu la r
User Group Taiwan
Angular 5 效能提升

15. An gu la r
User Group Taiwan
新的 Decorator 屬性: preserveWhitespaces
https://angular.io/api/core/Component#preserveWhitespaces

16. An gu la r
User Group Taiwan
src/tsconfig.app.json
修改 preserveWhitespaces 全域設定

17. An gu la r
User Group Taiwan
在 HTML 範本中保留特定標籤中的空白

18. An gu la r
User Group Taiwan
預設的情況下，Zone 會監聽所有的「非同步事件」
• DOM Events
• XMLHttpRequest (AJAX)
• Timers
如何調整 Zone 以提升效能

19. An gu la r
User Group Taiwan
修正 main.ts
platformBrowserDynamic()
.bootstrapModule(AppModule, {ngZone: 'noop'})
.then( ref => {} );
範例程式
• https://stackblitz.com/edit/ng-component-state
NG5 可以把整個 App 排除在 Zone 之外

20. An gu la r
User Group Taiwan
Angular 5 元件化技術

21. An gu la r
User Group Taiwan
三個內建的 Pipes 元件已提供新版 (有破壞性更新)
• date
• number
• currency
Angular 5 不再使用 intl API (也不用再匯入 Polyfills 了)
• 以前這些 Pipes 非常依賴瀏覽器的 intl API 實作
• 不支援 intl 的瀏覽器就要載入 Polyfills 但卻導致結果不如預期
• Angular 5 重新製作一套以 CLDR 為主的 i18n 支援
• comparing the pipe behavior between v4 and v5
詳細的變更紀錄
• https://github.com/angular/angular/blob/master/CHANGELOG.md#i18n-pipes
全新的國際化 Pipes 元件 (intl)

22. An gu la r
User Group Taiwan
匯入 DeprecatedI18NPipesModule 模組即可 (範例)
若要繼續使用舊的 Pipes 元件

23. An gu la r
User Group Taiwan
Angular 5 已經標示淘汰 Http 元件，下個版本可能會移除
建議使用新的 HttpClient 服務元件 (Angular 4.3+)
• 範例：https://stackblitz.com/edit/angular-http-client
升級方式
• app.module.ts
• 將 @angular/http 修改為 @angular/common/http
• 將 HttpModule 修改為 HttpClientModule
• 建構式注入 HttpClient 服務元件
• 改掉前版常用的 map(res => res.json()) 使用習慣 (不需要了)
請升級 Http 服務元件

24. An gu la r
User Group Taiwan
從範本取得 ngForm 物件實體
• <form name="form1" #f="ngForm">
以上 ngForm 就是從 "form" 這個 directive 匯出的名稱
Angular 5 支援多重 exportAs 名稱
exportAs 可以匯出多個名稱

25. An gu la r
User Group Taiwan
Angular 5 Universal
Server Side Rendering (SSR)

26. An gu la r
User Group Taiwan
不支援 Browser 端的 DOM 物件，造成許多第三方套件無法使用
• 例如：window、document、navigator、…
頁面開啟後 HttpClient 發出的 API 要求會在瀏覽器端重複呼叫一次！
• 也就是 Server 及 Client 端都會各呼叫一次
當 SSR 需要額外呼叫 API 時，網頁回應時間會拉長！
Angular CLI 沒有自動產生 SSR 相關檔案的功能
• 快有了：https://github.com/angular/devkit/pull/254
早期 Angular SSR 常見的問題

27. An gu la r
User Group Taiwan
加入了 Domino 到 platform-server
• Server-side DOM impl. based on Mozilla's dom.js
支援在伺服器端可以直接呼叫與執行 DOM 的 API
• 可以更順利地呼叫第三方函式庫
支援伺服器端 DOM 介面實作

28. An gu la r
User Group Taiwan
保存伺服器狀態的模組
• ServerTransferStateModule
取得伺服器狀態的模組
• BrowserTransferStateModule
範例程式：https://github.com/evertonrobertoauler/universal-demo-v5
git clone https://github.com/evertonrobertoauler/universal-demo-v5.git
cd universal-demo-v5
npm install
npm run build
node dist/server.js
更輕易從 Server 傳遞狀態到用戶端

29. An gu la r
User Group Taiwan
Angular 5 表單功能

30. An gu la r
User Group Taiwan
控制表單資料繫結/驗證的時間點
• 預設事件
• change
• 新增事件
• blur
• submit
支援 Reactive Forms 控制項選項中設定 asyncValidators
Angular 5 表單功能

31. An gu la r
User Group Taiwan
早期的寫法
• <input name="firstName" ngModel>
新版的寫法
• <input name="firstName" ngModel
[ngModelOptions]="{updateOn: 'blur'}">
• <form
[ngFormOptions]="{updateOn: 'submit'}">
設定 Template Driven Forms 更新時機

32. An gu la r
User Group Taiwan
早期的寫法
• new FormGroup(value);
• new FormControl(value, [], [myValidator])
新版的寫法
• new FormGroup(value, {
updateOn: 'blur'
});
• new FormControl(value, {
updateOn: 'blur',
asyncValidators: [myValidator]
})
設定 Reactive Forms 更新時機

33. An gu la r
User Group Taiwan
Angular 5 其他增強

34. An gu la r
User Group Taiwan
採用全新的 lettable operators 可以大幅解決 side effects
大大增加 code splitting / tree shaking 的功效！
參考資料：Build and Treeshaking
支援 RxJS 5.5
早期寫法 新版寫法

35. An gu la r
User Group Taiwan
以下為全新的路由事件 (依照順序執行)
• GuardsCheckStart
• ChildActivationStart
• ActivationStart
• GuardsCheckEnd
• ResolveStart
• ResolveEnd
• ActivationEnd
• ChildActivationEnd
完整版事件執行順序：https://angular.io/api/router/Event
全新的路由生命週期事件

36. An gu la r
User Group Taiwan
全新的路由生命週期事件 (範例程式)

37. An gu la r
User Group Taiwan
Version 5.0.0 of Angular Now Available – Angular Blog
5.0.0 pentagonal-donut (2017-11-01)
Release 1.5 – Turing · angular/angular-cli
Angular 5 升級攻略 (影片)
Angular Update Guide
Angular Universal: server-side rendering
ASP.NET Core 2.0 & Angular 5 (+) advanced starter
相關連結

38. An gu la r
User Group Taiwan
Thank you

39. An gu la r
User Group Taiwan
The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
• http://blog.miniasp.com/
Will 保哥的技術交流中心 (臉書粉絲專頁)
• http://www.facebook.com/will.fans
Will 保哥的噗浪
• http://www.plurk.com/willh/invite
Will 保哥的推特
• https://twitter.com/Will_Huang
聯絡資訊