AngularJS 開發實戰:重要的開發觀念與經驗分享 (COSCUP 2013)

9,616 views

Published on

這是 Will 保哥 2013/8/3 在 COSCUP 2013 演講內容

Published in: Technology
0 Comments
77 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,616
On SlideShare
0
From Embeds
0
Number of Embeds
290
Actions
Shares
0
Downloads
0
Comments
0
Likes
77
Embeds 0
No embeds

No notes for slide

AngularJS 開發實戰:重要的開發觀念與經驗分享 (COSCUP 2013)

  1. 1. 1 AngularJS 開發實戰 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/ 重要的開發觀念與經驗分享
  2. 2. All services from your imperative. 2 ANGULAR 執行生命週期 Angular Application Lifecycle
  3. 3. All services from your imperative. 3 啟動 AngularJS 的過程 (開機: bootstrap)
  4. 4. All services from your imperative. 4 執行 AngularJS 的流程 (執行時期)
  5. 5. All services from your imperative. 5 模組 (Modules) 與 注入器 (Injector)
  6. 6. All services from your imperative. 6 模組 (Modules) 與 注入器 (Injector)  注入器 (Injector)  是一個 service locator (服務物件尋找器)  一個 ng-app 只會有一個 injector  injector 負責維護一群內部服務物件快取  每一個註冊在 injector 的物件都會有個名稱  如果透過名稱找不到物件,會透過 instance factory 自動建立  模組 (Modules)  一個設定注入器 instance factory 的管道  http://docs.angularjs.org/api/AUTO.$provide
  7. 7. All services from your imperative. 7 使用 angular.module 配置執行環境  透過 angular.module 宣告模組 (Module)  配置 Angular 應用程式的唯一方法 (易於了 解)  run(initializationFn)  config(configFn)  controller(name, constructor)  directive(name, directiveFactory)  filter(name, filterFactory)  animation(name, animationFactory)  constant(name, object)
  8. 8. All services from your imperative. 8 相依性注入 Dependency Injection
  9. 9. All services from your imperative. 9 了解與使用相依性注入  建立物件相依性的三種方式  透過 new 運算子  透過全域變數 (根物件下的變數/屬性)  要使用的時候自動注入 (相依性注入)  何謂相依性注入 (Dependency Injection)  一種抽象的執行過程,隱藏複雜的物件關係  一種詭異的執行模式,自動注入其他元件  e.g. config, controller, factory, directive, filter, run
  10. 10. All services from your imperative. 10 DI 範例:宣告 Angular 控制器建構式  宣告控制器建構式 function MainCtrl($scope) { $scope.name = 'Will'; }  使用 MainCtrl 的方法 <div ng-controller="MainCtrl"> {{ name }} </div>
  11. 11. All services from your imperative. 11 關於 Angular Services 物件  採用獨體模式 (Singleton Pattern)  取得服務物件後,會自動被快取!  代表服務物件的程式碼都不會重複執行!  採用相依性注入模式 (Dependency Injection)  註冊為 Angular Services 的物件,都可以自動 注入到其他元件上  管理元件與元件之間的相依性  採用延遲載入模式 (Lazy Loading)  只有在第一次使用時,才會建立服務實體
  12. 12. All services from your imperative. 12 建立 Angular Services 物件 (Providers)  provider(name, providerType) 建立一個 provider 物件  傳入一個含有 this.$get 方法的建構式  factory(name, providerFunction) 建立一個 provider 物件  傳入一個函式,然後會自動包進一個 $get 並建立 provider  會透過 providerFunction.apply() 建立物件 ($injector.instantiate)  service(name, constructor) 建立一個 provider 物件  傳入一個建構式,建立物件實體後,透過 factory 包成一個 provider  value(name, object) 建立一個 provider 物件  傳入一個值,透過 factory 包成一個 provider  constant(name, value)  直接儲存於 providerCache 與 instanceCache 內部物件之中  decorator(serviceName, decoratorFn)  用來作為特定 service 的修飾函式,傳入 $delegate 為原先的服務實體 ※ 比較 service & factory & provider 的差異 http://jsbin.com/oceyon/1/edit
  13. 13. All services from your imperative. 13 DI 範例 (1):宣告 Angular 控制器建構式  宣告控制器建構式 function MainCtrl($scope) { $scope.name = 'Will'; }  使用 $inject 註釋語法 (optional) MainCtrl.$inject = ['$scope', '$http'];  目的:避免 JS 最小化帶來的影響!
  14. 14. All services from your imperative. 14 DI 範例 (2):透過 module 宣告物件  宣告自訂模組 var app = angular.module('myApp', []);  宣告控制器建構式 function MainCtrl($scope) { $scope.name = 'Will'; }  使用 $inject 註釋語法  MainCtrl.$inject = ['$scope', '$http'];  將控制器註冊進模組  app.controller('MainCtrl', MainCtrl);
  15. 15. All services from your imperative. 15 DI 範例 (3):使用內置註釋語法  宣告自訂模組 var app = angular.module('myApp', []);  宣告控制器建構式 function MainCtrl(renamed$scope, renamed$http) { renamed$scope.name = 'Will'; }  將控制器註冊進模組 使用內置註釋語法 (Inline Annotation)  app.controller('MainCtrl', ['$scope', '$http', MainCtrl]);
  16. 16. All services from your imperative. 16 可以使用 DI 的地方 angular.module('myModule', []). controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) { }). config(['depProvider', function(depProvider){ ... }]). factory('serviceId', ['depService', function(depService) { ... }]). directive('directiveName', ['depService', function(depService) { ... }]). filter('filterName', ['depService', function(depService) { ... }]). run(['depService', function(depService) { ... }]);
  17. 17. All services from your imperative. 17 ANGULAR 程式碼組織原則 How to code in the right way to the right place
  18. 18. All services from your imperative. 18 如何有效組織 Angular 程式碼與樣板  Views / Templates  所有的 Scope 物件都應該「唯讀」  Angular Controllers  所有的 Scope 物件都應該「唯寫」(讀也可以)  不應該處理任何跟 DOM 有關的工作 (盡量啦)  只負責跟 View 溝通  Angular Services (e.g. factory, service, provider, …)  不應該處理任何跟 DOM 有關的工作 (盡量啦)  共於元件之間的資料時(包括控制器)  只撰寫可以獨立運作的程式碼 (與View無關)
  19. 19. All services from your imperative. 19 如何有效組織 Angular 程式碼與樣板  Angular Directives  所有與 DOM 相關的工作,都應該寫在這裡  Angular Filters  只應該處理要被過濾的資料  不應該處理任何跟 DOM 有關的工作  Angular Config  定義路由規則  定義較為底層的 Angular 設定 (providers, …)  不應該處理任何跟 DOM 有關的工作
  20. 20. All services from your imperative. 20 總結  Angular 執行生命週期  了解生命週期,降低除錯時間  相依性注入  了解注入邏輯,加快開發速度  Angular 程式碼組織原則  將程式碼寫對地方,可以讓你上天堂
  21. 21. All services from your imperative. 21 聯絡資訊  The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享  http://blog.miniasp.com/  Will 保哥的技術交流中心 (臉書粉絲專頁)  http://www.facebook.com/will.fans  ★ ★ ★ Will 保哥的噗浪 ★ ★ ★  http://www.plurk.com/willh/invite
  22. 22. All services from your imperative. 22 Will 保哥的 YouTube 影音教學中心  募集 1,000 位訂閱用戶 (使用直播功能)

×