【轉】 定義模板和服務

標籤：

1.模組和服務的概念與關係

 

總的來說，模組是組織業務的一個框框，在一個模組當中定義多個服務。當你引入了一個模組的時候，就可以使用這個模組提供的一種或多種服務了。

比如 AngularJS 本身的一個預設模組叫做 ng ，它提供了 $http ， $q 等等服務。

服務只是模組提供的多種機制中的一種，其它的還有命令（ directive ），過濾器（ filter ），及其它配置資訊。

然後在額外的 js 檔案中有一個附加的模組叫做 ngResource ， 它提供了一個 $resource 服務。

定義時，我們可以在已有的模組中新定義一個服務，也可以先新定義一個模組，然後在新模組中定義新服務。

使用時，服務是需要顯式地的聲明依賴（引入）關係的，而服務則可以讓 ng 自動地做注入，然後直接使用。

2.定義模組

定義模組的方法是使用 angular.module 。調用時聲明了對其它模組的依賴，並定義了“初始化”函數。

 

[javascript] view plaincopy 

1. var my_module = angular.module(‘MyModule‘, [], function(){  
2.     console.log(‘here‘);  
3. });  

這段代碼定義了一個叫做 MyModule 的模組， my_module 這個引用可以在接下來做其它的一些事，比如定義服務。

 

3.定義服務

 

服務本身是一個任意的對象。但是 ng 提供服務的過程涉及它的依賴注入機制。在這裡呢，就要先介紹一下叫 provider 的東西。

簡單來說， provider 是被“注入控制器”使用的一個對象，注入機制通過調用一個 provider 的 $get() 方法，把得到的東西作為參數進行相關調用（比如把得到的服務作為一個 Controller 的參數）。

在這裡“服務”的概念就比較不明確，對使用而言，服務僅指 $get() 方法返回的東西，但是在整體機制上，服務又要指提供了 $get() 方法的整個對象。

 

[javascript] view plaincopy 

1. //這是一個provider  
2. var pp = function(){  
3.   this.$get = function(){  
4.     return {‘haha‘: ‘123‘};  
5.   }  
6. }  
7.   
8. //我在模組的初始化過程當中, 定義了一個叫 PP 的服務  
9. var app = angular.module(‘Demo‘, [], function($provide){  
10.   $provide.provider(‘PP‘, pp);  
11. });  
12.   
13. //PP服務實際上就是 pp 這個 provider 的 $get() 方法返回的東西  
14. app.controller(‘TestCtrl‘,  
15.   function($scope, PP){  
16.     console.log(PP);  
17.   }  
18. );  

 

 

上面的代碼是一種定義服務的方法，當然， ng 還有相關的 shortcut， ng 總有很多 shortcut 。

第一個是 factory 方法，由 $provide 提供， module 的 factory 是一個引用，作用一樣。這個方法直接把一個函數當成是一個對象的 $get() 方法，這樣你就不用顯式地定義一個 provider 了：

 

[javascript] view plaincopy 

1. var app = angular.module(‘Demo‘, [], function($provide){  
2.   $provide.factory(‘PP‘, function(){  
3.     return {‘hello‘: ‘123‘};  
4.   });  
5. });  
6. app.controller(‘TestCtrl‘, function($scope, PP){ console.log(PP) });  

在 module 中使用：

 

 

[javascript] view plaincopy 

1. var app = angular.module(‘Demo‘, [], function(){ });  
2. app.factory(‘PP‘, function(){return {‘abc‘: ‘123‘}});  
3. app.controller(‘TestCtrl‘, function($scope, PP){ console.log(PP) });  

第二個是 service 方法，也是由 $provide 提供， module 中有對它的同名引用。 service 和 factory 的區別在於，前者是要求提供一個“構造方法”，後者是要求提供 $get() 方法。意思就是，前者一定是得到一個 object ，後者可以是一個數字或字串。它們的關係大概是：

 

 

[javascript] view plaincopy 

1. var app = angular.module(‘Demo‘, [], function(){ });  
2. app.service = function(name, constructor){  
3.   app.factory(name, function(){  
4.     return (new constructor());  
5.   });  
6. }  

這裡插一句，js 中 new 的作用，以 new a() 為例，過程相當於：

 

1. 建立一個Null 物件 obj
2. 把 obj 綁定到 a 函數的上下文當中（即 a 中的 this 現在指向 obj ）
3. 執行 a 函數
4. 返回 obj

 

service 方法的使用就很簡單了：

[javascript] view plaincopy 

1. var app = angular.module(‘Demo‘, [], function(){ });  
2. app.service(‘PP‘, function(){  
3.   this.abc = ‘123‘;  
4. });  
5. app.controller(‘TestCtrl‘, function($scope, PP){ console.log(PP) });  

4.引入模組並使用服務

結合上面的“定義模組”和“定義服務”，我們可以方便地組織自己的額外代碼：

 

[javascript] view plaincopy 

1. angular.module(‘MyModule‘, [], function($provide){  
2.   $provide.factory(‘S1‘, function(){  
3.     return ‘I am S1‘;  
4.   });  
5.   $provide.factory(‘S2‘, function(){  
6.     return {see: function(){return ‘I am S2‘}}  
7.   });  
8. });  
9.   
10. var app = angular.module(‘Demo‘, [‘MyModule‘], angular.noop);  
11. app.controller(‘TestCtrl‘, function($scope, S1, S2){  
12.   console.log(S1)  
13.   console.log(S2.see())  
14. });  

from ：http://blog.csdn.net/violet_day/article/details/16918673

【轉】 定義模板和服務