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 相依套件
基本升級步驟
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
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 之外
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 傳遞狀態到用戶端
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 更新時機
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
相關連結
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
聯絡資訊
Editor's Notes
設定 preserveWhitespaces 移除空白字元
Angular 2 — Take Advantage Of The exportAs Property
https://netbasal.com/angular-2-take-advantage-of-the-exportas-property-81374ce24d26
Angular 5 universal with Transfer State using @angular/cli
https://medium.com/@evertonrobertoauler/angular-5-universal-with-transfer-state-using-angular-cli-19fe1e1d352c