Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Angular Conf 2018 - 原來 Angular 可以這樣玩設定

155 Aufrufe

Veröffentlicht am

"設定"這個動作劃開了環境與程式碼之間的耦合,透過"設定"我們不僅僅能在開發時期更容易的切換測試環境,也可以在系統上線後,讓應用程式根據需求而改變啟動時所需要的設定值。

不論你是在開發產品,或是開發企業需求導向的應用,掌握"設定"的技巧,能讓你的應用程式更有彈性,適應更多元的環境變化。

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Angular Conf 2018 - 原來 Angular 可以這樣玩設定

  1. 1. 原來 Angular 可以這樣玩設定 Poy Chang
  2. 2. DEV QA UAT PROD
  3. 3. DEVELOP TEAM OPERATION TEAM BUILD OPERATE MONITOR DEPLOY RELEASE CODE TEST PLAN
  4. 4. DEVELOP TEAM OPERATION TEAM BUILD OPERATE MONITOR DEPLOY RELEASE CODE TEST PLAN
  5. 5. 設定檔情境 4 種玩設定方法 KEY Takeaway
  6. 6. Poy Chang 目前任職於全美 100 大私人企業,負責企業內部 IT 解 決方案設計與開發,專注於 Angular、ASP.NET Core、 Azure 等技術研究 ✓ Angular Taiwan 社群成員 ✓ Microsoft MVP Developer Technologies ✓ Global Azure Bootcamp@北京 2018 講師 ✓ .NET Conf@台中 2018 講師
  7. 7. 設定檔在設定甚麼? 資料來源 樣式喜好 起始狀態 行為配置 預覽功能 MISC.
  8. 8. 設定檔分兩種 建置時期 執行時期
  9. 9. 環境變數 組態設定檔 • 用於建置時期要套用哪個設定檔 • environment.prod.ts V2-5 V6+ DEV QA UAT PROD
  10. 10. 組態設定檔的運作
  11. 11. 組態設定檔的運作
  12. 12. 組態設定檔的運作 建置之後會用 .prod.ts 替代原本的 environment.ts 並包進 main.js 中
  13. 13. 組態設定檔的運作
  14. 14. 組態設定檔的運作
  15. 15. 啟動程式碼最佳化 輸出檔加上雜湊碼 產生 來源映射檔 提取全域 成單獨檔案 使用檔案名稱命名延遲載入的模塊 啟動 模式 摘錄第三方套件的授權檔成單獨檔案 拆分第三方套件成單獨檔案做載入 搭配 模式做最佳化
  16. 16. 組態設定檔使用方式 └── src └── app ├── app.component.html └── app.component.ts └── environments ├── environment.prod.ts ├── environment.qa.ts └── environment.ts 你應該只匯入/使用 environment 而不是其他的 environment.xxx 組態設定檔
  17. 17. 組態設定檔用於建置時期 根據情境/階段作切換
  18. 18. 設定檔分兩種 建置時期 執行時期
  19. 19. 想在執行時期即時取得設定值 https://angularconftw2018-demoapi.azurewebsites.net/api/AppConfig/Demo
  20. 20. 隨時取得設定檔 https://stackblitz.com/edit/ngtw2018-config-service
  21. 21. 隨時取得設定檔 • Angular 內建依賴注入框架,讓你服務隨注即用 • 透過 Service + HttpClient 輕鬆向伺服器端取得設定值資訊 建立 Service 註冊 Service 注入 Service
  22. 22. 隨時取得設定檔 (1)自訂 ConfigService
  23. 23. 隨時取得設定檔 (2)註冊 ConfigService
  24. 24. 隨時取得設定檔 (3)注入 ConfigService
  25. 25. 路由切換時決定 https://stackblitz.com/edit/ngtw2018-config-resolver
  26. 26. 路由切換時決定 • Angular 內建路由模組,讓你輕鬆建立路由機制 • 路由模組提供路由 3 種傳遞資料的方式 • Router Params • Router Data • Router Resolve 路由參數,可取得文字型別的參數值 路由資料,執行時期不會變動的物件型別 路由解析,為一種可客製的資料解析服務
  27. 27. 路由切換時決定 (1)自訂 ConfigResolver
  28. 28. 路由切換時決定 (2)註冊並設定路由
  29. 29. 路由切換時決定 (3)取得設定
  30. 30. 啟動前,先決定 https://stackblitz.com/edit/ngtw2018-app-initializer
  31. 31. node_module SPA Application Namespace index.html @angular/core { NgModule } @angular/core { Component } import import Injection Service Core Service Module Service Component Bootstrap Application Module Application Component import import main.js 啟動前,先決定
  32. 32. 啟動前,先決定 • Angular 有個 InjectionToken 來提供系統初始化相關作業 • InjectionToken 讓我們可以建立基於文字的標記物件,進而避免遇到 依賴注入機制中的名稱衝突
  33. 33. 啟動前,先決定 • Angular 有個 InjectionToken 來提供系統初始化相關作業 • InjectionToken 讓我們可以建立基於文字的標記物件,進而避免遇到 依賴注入機制中的名稱衝突
  34. 34. 啟動前,先決定 • Angular 有個 InjectionToken 來提供系統初始化相關作業 • APP_INITIALIZER • 可以對 APP_INITIALIZER 註冊一系列的動作 https://github.com/angular/angular/blob/7.0.x/packages/core/src/application_init.ts#L19
  35. 35. 啟動前,先決定 (1)自訂 ConfigService
  36. 36. 啟動前,先決定 (2)修改 AppModule
  37. 37. 啟動前,先決定 (3)取用設定值
  38. 38. 執行時期建置時期 VS.
  39. 39. 選用方式 建置時期 ✓ 基礎建設類的設定 ✓ 與狀態管理無關 ✓ 用於 CI/CD 的設定 執行時期 ✓ 動態的設定值 ✓ 關於使用者資訊 ✓ 機敏資訊的設定值 最終還是以 使用情境來選用
  40. 40. THANK YOU

×