Angular Conf 2018 - 原來 Angular 可以這樣玩設定
1 like545 views
"設定"這個動作劃開了環境與程式碼之間的耦合，透過"設定"我們不僅僅能在開發時期更容易的切換測試環境，也可以在系統上線後，讓應用程式根據需求而改變啟動時所需要的設定值。 不論你是在開發產品，或是開發企業需求導向的應用，掌握"設定"的技巧，能讓你的應用程式更有彈性，適應更多元的環境變化。
![[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...](https://cdn.slidesharecdn.com/ss_thumbnails/devopsmanufacture-191214052228-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (13)
Similar to Angular Conf 2018 - 原來 Angular 可以這樣玩設定 (20)
Ad
More from Poy Chang (11)
Ad
Angular Conf 2018 - 原來 Angular 可以這樣玩設定
- 3. DEV QA UAT PROD
- 6. 設定檔情境 4 種玩設定方法 KEY Takeaway
- 7. Poy Chang 目前任職於全美 100 大私人企業，負責企業內部 IT 解 決方案設計與開發，專注於 Angular、ASP.NET Core、 Azure 等技術研究 ✓ Angular Taiwan 社群成員 ✓ Microsoft MVP Developer Technologies ✓ Global Azure Bootcamp@北京 2018 講師 ✓ .NET Conf@台中 2018 講師
- 8. 設定檔在設定甚麼? 資料來源 樣式喜好 起始狀態 行為配置 預覽功能 MISC.
- 10. 環境變數 組態設定檔 • 用於建置時期要套用哪個設定檔 • environment.prod.ts V2-5 V6+ DEV QA UAT PROD
- 11. 組態設定檔的運作
- 12. 組態設定檔的運作
- 13. 組態設定檔的運作 建置之後會用 .prod.ts 替代原本的 environment.ts 並包進 main.js 中
- 14. 組態設定檔的運作
- 15. 組態設定檔的運作
- 16. 啟動程式碼最佳化 輸出檔加上雜湊碼 產生 來源映射檔 提取全域 成單獨檔案 使用檔案名稱命名延遲載入的模塊 啟動 模式 摘錄第三方套件的授權檔成單獨檔案 拆分第三方套件成單獨檔案做載入 搭配 模式做最佳化
- 17. 組態設定檔使用方式 └── src └── app ├── app.component.html └── app.component.ts └── environments ├── environment.prod.ts ├── environment.qa.ts └── environment.ts 你應該只匯入/使用 environment 而不是其他的 environment.xxx 組態設定檔
- 19. 設定檔分兩種 建置時期 執行時期
- 22. 隨時取得設定檔 • Angular 內建依賴注入框架，讓你服務隨注即用 • 透過 Service + HttpClient 輕鬆向伺服器端取得設定值資訊 建立 Service 註冊 Service 注入 Service
- 27. 路由切換時決定 • Angular 內建路由模組，讓你輕鬆建立路由機制 • 路由模組提供路由 3 種傳遞資料的方式 • Router Params • Router Data • Router Resolve 路由參數，可取得文字型別的參數值 路由資料，執行時期不會變動的物件型別 路由解析，為一種可客製的資料解析服務
- 30. 路由切換時決定 (3)取得設定
- 32. 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 啟動前，先決定
- 33. 啟動前，先決定 • Angular 有個 InjectionToken 來提供系統初始化相關作業 • InjectionToken 讓我們可以建立基於文字的標記物件，進而避免遇到 依賴注入機制中的名稱衝突
- 34. 啟動前，先決定 • Angular 有個 InjectionToken 來提供系統初始化相關作業 • InjectionToken 讓我們可以建立基於文字的標記物件，進而避免遇到 依賴注入機制中的名稱衝突
- 35. 啟動前，先決定 • Angular 有個 InjectionToken 來提供系統初始化相關作業 • APP_INITIALIZER • 可以對 APP_INITIALIZER 註冊一系列的動作 https://github.com/angular/angular/blob/7.0.x/packages/core/src/application_init.ts#L19
- 38. 啟動前，先決定 (3)取用設定值
- 39. 執行時期建置時期 VS.
- 40. 選用方式 建置時期 ✓ 基礎建設類的設定 ✓ 與狀態管理無關 ✓ 用於 CI/CD 的設定 執行時期 ✓ 動態的設定值 ✓ 關於使用者資訊 ✓ 機敏資訊的設定值 最終還是以 使用情境來選用
- 41. THANK YOU