2.3瞭解AngularJS模組和依賴注入

標籤：res   ppm   作用   span   table   rtt   bsp   config   set   

 1.模組和依賴注入概述1.瞭解模組

AngularJS模組是一種容器，把代碼隔離並組織成簡潔，整齊，可複用的塊。

模組本身不提供直接的功能：包含其他提供功能的對象的執行個體：控制器，過濾器，服務，動畫

可通過定義其提供的對象構建模組。通過依賴注入將模組串連在一起，構建一個完整的應用程式。

AngularJS建立在模組原理上。大部分AngularJS提供的功能都內建到ng-*模組中。

2.依賴注入

定義依賴對象並動態地把它注入另一個對象，使得所有的依賴對象所提供的功能都能使用。（提供器 注入器服務）

提供器：如何建立一個具有所有必要功能的對象的執行個體（模組的一部分），一個模組把提供器註冊到注入器的伺服器中。（一個提供器對象只建立一個執行個體）

注入器服務：跟蹤提供器對象的執行個體。（提供器模組-注入器服務執行個體）

2.定義AngularJS模組

AngularJS模組實現：設定階段，運行階段

1.建立AngularJS Module對象

建立Module對象，註冊到注入器服務，返回新建立的Module執行個體（實現提供器的功能）

var myapp=angular.module(name,[requires],[configFn]);

name:註冊在注入器服務中的名稱

requires:被添加到注入器服務的供這個模組使用的模組名的數組，若需要另一個模組的功能，需要添加在requires列表（ng模組會預設添加）

configFn:模組設定階段調用的另一個函數

var myModule=angular.module(‘myModule‘,[‘$Window‘,‘$http‘],function(){   $provide.value(‘myValue‘,‘Some Value‘); })

如果沒有requires（依賴），不會建立Module對象，是返回已經建立的執行個體（會覆蓋上面執行個體的定義）

var myModule2=angular.module(‘myModule‘,[]); 

返回上面的執行個體，沒有列出依賴

var myModule3=angular.module(‘myModule‘); 

2.使用配置塊

被定義後，執行模組配置。任何提供器都被註冊到依賴注入器。

injectable:提供器服務函數，如$provide

config(funciton([injectable,...]))

$provide和$filterProvider服務被傳送到config函數。（把命名為startTime的 值提供器 和 命名為myFilter的 過濾器提供器 註冊到 注入器服務）

var myModule=angular.module(‘myModule‘,[])myModule.config(function($provide,$filterProvider){   $provide.value("startTime",new Date());   $filterProvider.register(‘myFilter‘,function(){});    })    

3.使用運行塊

配置完成，可以執行AngularJS模組的運行階段。

運行塊中不能實現任何提供器代碼。（整個模組已經配置完成 註冊到 依賴注入器了）

run(function([injectable,...]))

injectable只是注入器執行個體。

myModule.run(function(startTime){   startTime.setTime((new Date()).getTime()); })

 

專門的AngularJS對象提供器（除了config()  (有相應的 animation controller filter directive 對象定義)）

1. animation(name,animationFactory)
2. controller(name,controlFactory)
3. filter(name,filterFactory)
4. directive(name,directiveFactory)

基本控制器：AngularJS具有 內建控制器對象 並知道所有控制器對象 都必須接受 一個範圍對象 作為第一個參數

var mod=angular.module(‘myMod‘,[]);mod.controller(‘nyController‘,function($scope){   $scope.somevalue=‘somevalue‘; })　　

 

服務提供器

是一類獨特的提供器（不存在已有的特定格式），作為一個服務來提供功能。

1. value(name,object):最基礎的，object參數被簡單分配到name,所以注入器中name值和object之間有直接關係
2. constant(name,object):與value類似，但value不可更改。
3. factory(name,factoryFunction):採用factoryFunction參數構建將通過注入器提供的對象
4. service(name,serviceFactory):添加了更物件導向的方法
5. provider(name,providerFactory):所有其他方法的核心

基本例子：(定義constant value 提供器，方法中定義的值 被註冊在  myMod模組 的 注入器伺服器 中，通過名字訪問)

 

var mod=angular.module(‘myMod‘,[]);mod.constant("ID","ABC");mod.value(‘couter‘,0);mod.value(‘image‘,{name:‘box.jpg‘,height:12,width:20});

 

4.實現依賴注入　　

一旦定義模組和相應的提供器。就可以把該模組作為其他模組，控制器，其他各種AngularJS對象的依賴來添加（依賴於提供器的對象的$jnject屬性值）

var myController=function($scope,appMsg){  $scope.message=appMsg;  };controller[‘$inject‘]=[‘$scope‘,‘appMsg‘];myApp.myController(‘controllerA‘,controller);//第二種表達myApp.control(‘controllerA‘,[‘$scope‘,‘appMsg‘,function($scope,appMsg){   $scope.message=appMsg; }])

jnjector.js:在控制器和模組定義中實現依賴注入　　

 

2.3瞭解AngularJS模組和依賴注入