1
AngularJS 開發實戰
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格:http://blog.miniasp.com/
重要的開發觀念與經驗分享
All services from your imperative.
2
ANGULAR 執行生命週期
Angular Application Lifecycle
All services from your imperative.
3
啟動 AngularJS 的過程 (開機: bootstrap)
All services from your imperative.
4
執行 AngularJS 的流程 (執行時期)
All services from your imperative.
5
模組 (Modules) 與 注入器 (Injector)
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
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)
All services from your imperative.
8
相依性注入
Dependency Injection
All services from your imperative.
9
了解與使用相依性注入
 建立物件相依性的三種方式
 透過 new 運算子
 透過全域變數 (根物件下的變數/屬性)
 要使用的時候自動注入 (相依性注入)
 何謂相依性注入 (Dependency Injection)
 一種抽象的執行過程,隱藏複雜的物件關係
 一種詭異的執行模式,自動注入其他元件
 e.g. config, controller, factory, directive, filter, run
All services from your imperative.
10
DI 範例:宣告 Angular 控制器建構式
 宣告控制器建構式
function MainCtrl($scope) {
$scope.name = 'Will';
}
 使用 MainCtrl 的方法
<div ng-controller="MainCtrl">
{{ name }}
</div>
All services from your imperative.
11
關於 Angular Services 物件
 採用獨體模式 (Singleton Pattern)
 取得服務物件後,會自動被快取!
 代表服務物件的程式碼都不會重複執行!
 採用相依性注入模式 (Dependency Injection)
 註冊為 Angular Services 的物件,都可以自動
注入到其他元件上
 管理元件與元件之間的相依性
 採用延遲載入模式 (Lazy Loading)
 只有在第一次使用時,才會建立服務實體
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
All services from your imperative.
13
DI 範例 (1):宣告 Angular 控制器建構式
 宣告控制器建構式
function MainCtrl($scope) {
$scope.name = 'Will';
}
 使用 $inject 註釋語法 (optional)
MainCtrl.$inject = ['$scope', '$http'];
 目的:避免 JS 最小化帶來的影響!
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);
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]);
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) {
...
}]);
All services from your imperative.
17
ANGULAR 程式碼組織原則
How to code in the right way to the right place
All services from your imperative.
18
如何有效組織 Angular 程式碼與樣板
 Views / Templates
 所有的 Scope 物件都應該「唯讀」
 Angular Controllers
 所有的 Scope 物件都應該「唯寫」(讀也可以)
 不應該處理任何跟 DOM 有關的工作 (盡量啦)
 只負責跟 View 溝通
 Angular Services (e.g. factory, service, provider, …)
 不應該處理任何跟 DOM 有關的工作 (盡量啦)
 共於元件之間的資料時(包括控制器)
 只撰寫可以獨立運作的程式碼 (與View無關)
All services from your imperative.
19
如何有效組織 Angular 程式碼與樣板
 Angular Directives
 所有與 DOM 相關的工作,都應該寫在這裡
 Angular Filters
 只應該處理要被過濾的資料
 不應該處理任何跟 DOM 有關的工作
 Angular Config
 定義路由規則
 定義較為底層的 Angular 設定 (providers, …)
 不應該處理任何跟 DOM 有關的工作
All services from your imperative.
20
總結
 Angular 執行生命週期
 了解生命週期,降低除錯時間
 相依性注入
 了解注入邏輯,加快開發速度
 Angular 程式碼組織原則
 將程式碼寫對地方,可以讓你上天堂
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
All services from your imperative.
22
Will 保哥的 YouTube 影音教學中心
 募集 1,000 位訂閱用戶 (使用直播功能)

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

  • 1.
    1 AngularJS 開發實戰 多奇數位創意有限公司 技術總監 黃保翕( Will 保哥 ) 部落格:http://blog.miniasp.com/ 重要的開發觀念與經驗分享
  • 2.
    All services fromyour imperative. 2 ANGULAR 執行生命週期 Angular Application Lifecycle
  • 3.
    All services fromyour imperative. 3 啟動 AngularJS 的過程 (開機: bootstrap)
  • 4.
    All services fromyour imperative. 4 執行 AngularJS 的流程 (執行時期)
  • 5.
    All services fromyour imperative. 5 模組 (Modules) 與 注入器 (Injector)
  • 6.
    All services fromyour 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.
    All services fromyour 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.
    All services fromyour imperative. 8 相依性注入 Dependency Injection
  • 9.
    All services fromyour imperative. 9 了解與使用相依性注入  建立物件相依性的三種方式  透過 new 運算子  透過全域變數 (根物件下的變數/屬性)  要使用的時候自動注入 (相依性注入)  何謂相依性注入 (Dependency Injection)  一種抽象的執行過程,隱藏複雜的物件關係  一種詭異的執行模式,自動注入其他元件  e.g. config, controller, factory, directive, filter, run
  • 10.
    All services fromyour imperative. 10 DI 範例:宣告 Angular 控制器建構式  宣告控制器建構式 function MainCtrl($scope) { $scope.name = 'Will'; }  使用 MainCtrl 的方法 <div ng-controller="MainCtrl"> {{ name }} </div>
  • 11.
    All services fromyour imperative. 11 關於 Angular Services 物件  採用獨體模式 (Singleton Pattern)  取得服務物件後,會自動被快取!  代表服務物件的程式碼都不會重複執行!  採用相依性注入模式 (Dependency Injection)  註冊為 Angular Services 的物件,都可以自動 注入到其他元件上  管理元件與元件之間的相依性  採用延遲載入模式 (Lazy Loading)  只有在第一次使用時,才會建立服務實體
  • 12.
    All services fromyour 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.
    All services fromyour imperative. 13 DI 範例 (1):宣告 Angular 控制器建構式  宣告控制器建構式 function MainCtrl($scope) { $scope.name = 'Will'; }  使用 $inject 註釋語法 (optional) MainCtrl.$inject = ['$scope', '$http'];  目的:避免 JS 最小化帶來的影響!
  • 14.
    All services fromyour 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.
    All services fromyour 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.
    All services fromyour 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.
    All services fromyour imperative. 17 ANGULAR 程式碼組織原則 How to code in the right way to the right place
  • 18.
    All services fromyour imperative. 18 如何有效組織 Angular 程式碼與樣板  Views / Templates  所有的 Scope 物件都應該「唯讀」  Angular Controllers  所有的 Scope 物件都應該「唯寫」(讀也可以)  不應該處理任何跟 DOM 有關的工作 (盡量啦)  只負責跟 View 溝通  Angular Services (e.g. factory, service, provider, …)  不應該處理任何跟 DOM 有關的工作 (盡量啦)  共於元件之間的資料時(包括控制器)  只撰寫可以獨立運作的程式碼 (與View無關)
  • 19.
    All services fromyour imperative. 19 如何有效組織 Angular 程式碼與樣板  Angular Directives  所有與 DOM 相關的工作,都應該寫在這裡  Angular Filters  只應該處理要被過濾的資料  不應該處理任何跟 DOM 有關的工作  Angular Config  定義路由規則  定義較為底層的 Angular 設定 (providers, …)  不應該處理任何跟 DOM 有關的工作
  • 20.
    All services fromyour imperative. 20 總結  Angular 執行生命週期  了解生命週期,降低除錯時間  相依性注入  了解注入邏輯,加快開發速度  Angular 程式碼組織原則  將程式碼寫對地方,可以讓你上天堂
  • 21.
    All services fromyour 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.
    All services fromyour imperative. 22 Will 保哥的 YouTube 影音教學中心  募集 1,000 位訂閱用戶 (使用直播功能)