1. 1
AngularJS 開發實戰
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/
重要的開發觀念與經驗分享

2. All services from your imperative.
2
ANGULAR 執行生命週期
Angular Application Lifecycle

3. All services from your imperative.
3
啟動 AngularJS 的過程 (開機: bootstrap)

4. All services from your imperative.
4
執行 AngularJS 的流程 (執行時期)

5. All services from your imperative.
5
模組 (Modules) 與 注入器 (Injector)

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. 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. All services from your imperative.
8
相依性注入
Dependency Injection

9. All services from your imperative.
9
了解與使用相依性注入
 建立物件相依性的三種方式
 透過 new 運算子
 透過全域變數 (根物件下的變數/屬性)
 要使用的時候自動注入 (相依性注入)
 何謂相依性注入 (Dependency Injection)
 一種抽象的執行過程，隱藏複雜的物件關係
 一種詭異的執行模式，自動注入其他元件
 e.g. config, controller, factory, directive, filter, run

10. All services from your imperative.
10
DI 範例：宣告 Angular 控制器建構式
 宣告控制器建構式
function MainCtrl($scope) {
$scope.name = 'Will';
}
 使用 MainCtrl 的方法
<div ng-controller="MainCtrl">
{{ name }}
</div>

11. All services from your imperative.
11
關於 Angular Services 物件
 採用獨體模式 (Singleton Pattern)
 取得服務物件後，會自動被快取！
 代表服務物件的程式碼都不會重複執行！
 採用相依性注入模式 (Dependency Injection)
 註冊為 Angular Services 的物件，都可以自動
注入到其他元件上
 管理元件與元件之間的相依性
 採用延遲載入模式 (Lazy Loading)
 只有在第一次使用時，才會建立服務實體

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. All services from your imperative.
13
DI 範例 (1)：宣告 Angular 控制器建構式
 宣告控制器建構式
function MainCtrl($scope) {
$scope.name = 'Will';
}
 使用 $inject 註釋語法 (optional)
MainCtrl.$inject = ['$scope', '$http'];
 目的：避免 JS 最小化帶來的影響！

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. 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. 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. All services from your imperative.
17
ANGULAR 程式碼組織原則
How to code in the right way to the right place

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. All services from your imperative.
19
如何有效組織 Angular 程式碼與樣板
 Angular Directives
 所有與 DOM 相關的工作，都應該寫在這裡
 Angular Filters
 只應該處理要被過濾的資料
 不應該處理任何跟 DOM 有關的工作
 Angular Config
 定義路由規則
 定義較為底層的 Angular 設定 (providers, …)
 不應該處理任何跟 DOM 有關的工作

20. All services from your imperative.
20
總結
 Angular 執行生命週期
 了解生命週期，降低除錯時間
 相依性注入
 了解注入邏輯，加快開發速度
 Angular 程式碼組織原則
 將程式碼寫對地方，可以讓你上天堂

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. All services from your imperative.
22
Will 保哥的 YouTube 影音教學中心
 募集 1,000 位訂閱用戶 (使用直播功能)