本篇介紹angular中的模塊:module
在筆記(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已經講到過模塊,這篇主要講模塊的 '服務' 功能:
什么是 '服務' 呢? 看一下下面這個例子:
比如一個購物車的應用:
function ItemsViewController($scope){ //向服務器發起請求 //解析響應,獲得數據 $scope.items = 獲得的數據; }
那么,如果我在其它的控制器里也需要同樣的一組數據,那么,我還得在另外的控制器里寫一遍一樣的代碼,用於獲取這組數據,
這樣不利於維護修改,因此,我們就可以把 '獲取這一段數據' 這個功能給封裝成一個 '服務' , 這樣就可以在多個不同的控制器中使用它.
function ItemsViewController($scope,Items){ $scope.items = Items.query(); }
比如這里的Items就是一個被封裝好的 '服務' .
下面來看看如果創建服務:
1. 首先要創建一個模塊:
var SomeModule = angular.module('ModuleName',[])
2. 然后通過以下三種api來創建服務:
①SomeModule.provider(name,Object || constructor())
②SomeModule.factory(name,$get Function())
③SomeModule.service(name,constructor())
其中第一個參數應該是字符串形式,定義的是服務的名字
第二個參數需要通過例子來理解... 而且后面還會有詳解.在這里先不介紹
最后使用'服務'來完成購物車的例子:
<!DOCTYPE html> <html ng-app="shoppingCart"> <head> <title>12.1module模塊組織依賴關系</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="CartController"> <h1>your shopping cart</h1> <table> <tr ng-repeat="item in items"> <td>{{item.title}}</td> <td><input ng-model="item.quantity"/></td> <td>{{item.price|currency}}</td> <td class="red">{{item.price*item.quantity|currency}}</td> <td><button ng-click="remove($index)">remove</button></td> </tr> </table> <hr> <table> <tr> <td>總價: <span class="del">{{bill.all|currency}}</span></td> </tr> <tr> <td>折扣: <span class="red">{{bill.discount|currency}}</span></td> </tr> <tr> <td>現價: <span class="green">{{bill.now|currency}}</span></td> </tr> </table> </div> </body> </html>
var shoppingCart = angular.module('shoppingCart',[]); shoppingCart.factory('Items',function(){ var items = {}; //這段數據實際應該是從數據庫拉取的 items.query = function(){ return [ {"title":"兔子","quantity":1,"price":"100"}, {"title":"喵","quantity":2,"price":"200"}, {"title":"狗只","quantity":1,"price":"400"}, {"title":"倉鼠","quantity":1,"price":"300"} ] }; return items; }); shoppingCart.controller('CartController',function($scope,Items){ $scope.items = Items.query(); $scope.remove = function(index){ $scope.items.splice(index,1) }; $scope.bill = { "all":0, "discount":0, "now":0 }; $scope.compute = function(){ var total = 0; for(var i=0; i<$scope.items.length; i++){ total += $scope.items[i].quantity*$scope.items[i].price; } $scope.bill.all = total; $scope.bill.discount = total >= 500 ? total*0.1 : 0 ; $scope.bill.now = $scope.bill.all - $scope.bill.discount }; $scope.$watch('items',$scope.compute,true); });
1. var shoppingCart = angular.module('shoppingCart',[]);
注意, 第一個shoppingCart 是模型變量名,下面的factory和controller,都是該模型下的方法.第二個shoppingCart是模型的名字,在ng-app后面使用
2.shoppingCart.factory('Items',function(){ ... return items; });
Items就是服務的名字
第二個參數是一個函數,在調用這個服務的時候,就會執行該函數,然后把函數的返回值傳到控制器中
shoppingCart.controller('CartController',function($scope,Items){ $scope.items = Items.query(); });
這里在控制器中傳入的Items就是factory中第二個參數的函數的返回值
注意,當Items被注入到其它地方的時候,注入的結果是items,而不是定義Items的時候的那個function
3. shoppingCart.controller('CartController',function($scope,Items){$scope.items = Items.query();
...
});
通過controller方法,在shoppingCart模型下創建一個名為CartController的控制器,傳入Items服務
其余的控制器寫法都和原來一樣,只是原來的items改為通過Items服務來獲取數據
4. 其實$scope也是服務,是angular內置的服務,還有$location,$route,$http等... angular內置的服務,都是用$開頭,因此,自定義的服務,最好不要使用$開頭.
5. 控制器中傳入服務作為參數,是沒有順序的,是根據名字來的.以下兩種寫法運行結果是一致的:
shoppingCart.controller('CartController',function($scope,Items){...});
shoppingCart.controller('CartController',function(Items,$scope){...});