Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

10,573 views

Published on

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

Published in: Technology
  • Be the first to comment

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 位訂閱用戶 (使用直播功能)

×