factory方式創(chuàng)建的服務,作用就是返回一個有屬性有方法的對象。相當于:var f = myFactory();
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><p>{{r}}</p></div><script>//創(chuàng)建模型var app = angular.module('myApp', []);//通過工廠模式創(chuàng)建自定義服務app.factory('myFactory', function() {var service = {};//定義一個Object對象'service.name = "張三";var age;//定義一個私有化的變量//對私有屬性寫getter和setter方法service.setAge = function(newAge){age = newAge;}service.getAge = function(){return age;}return service;//返回這個Object對象});//創(chuàng)建控制器app.controller('myCtrl', function($scope, myFactory) {myFactory.setAge(20);$scope.r =myFactory.getAge();alert(myFactory.name);});</script></body></html>
在自定義服務里注入服務示例,但不能注入$scope作用域對象。
<script>var app = angular.module('myApp', []);app.factory('myFactory', function($http,$q) {var service = {};service.name = "張三";//請求數(shù)據(jù)service.getData = function(){var d = $q.defer();$http.get("url")//讀取數(shù)據(jù)的函數(shù)。.success(function(response) {d.resolve(response);}).error(function(){d.reject("error");});return d.promise;}return service;});app.controller('myCtrl', function($scope, myFactory) {//alert(myFactory.name);myFactory.getData().then(function(data){console.log(data);//正確時走這兒},function(data){alert(data)//錯誤時走這兒});;});</script>
通過service方式創(chuàng)建自定義服務,相當于new的一個對象:var s = new myService();,只要把屬性和方法添加到this上才可以在controller里調(diào)用。
<div ng-app="myApp" ng-controller="myCtrl"><h1>{{r}}</h1></div><script>var app = angular.module('myApp', []);app.service('myService', function($http,$q) {this.name = "service";this.myFunc = function (x) {return x.toString(16);//轉16進制}this.getData = function(){var d = $q.defer();$http.get("ursl")//讀取數(shù)據(jù)的函數(shù)。.success(function(response) {d.resolve(response);}).error(function(){alert(0)d.reject("error");});return d.promise;}});app.controller('myCtrl', function($scope, myService) {$scope.r = myService.myFunc(255);myService.getData().then(function(data){console.log(data);//正確時走這兒},function(data){alert(data)//錯誤時走這兒});});</script>
只有provder是能傳 .config() 函數(shù)的 service。如果想在 service 對象啟用之前,先進行模塊范圍的配置,那就應該選擇 provider。需要注意的是:在config函數(shù)里注入provider時,名字應該是:providerName+Provider.
使用Provider的優(yōu)點就是,你可以在Provider對象傳遞到應用程序的其他部分之前在app.config函數(shù)中對其進行修改。
當你使用Provider創(chuàng)建一個service時,唯一的可以在你的控制器中訪問的屬性和方法是通過$get()函數(shù)返回內(nèi)容。
<body><div ng-app="myApp" ng-controller="myCtrl"></div><script>var app = angular.module('myApp', []);//需要注意的是:在注入provider時,名字應該是:providerName+Providerapp.config(function(myProviderProvider){myProviderProvider.setName("大圣");});app.provider('myProvider', function() {var name="";var test={"a":1,"b":2};//注意的是,setter方法必須是(set+變量首字母大寫)格式this.setName = function(newName){name = newName}this.$get =function($http,$q){return {getData : function(){var d = $q.defer();$http.get("url")//讀取數(shù)據(jù)的函數(shù)。.success(function(response) {d.resolve(response);}).error(function(){d.reject("error");});return d.promise;},"lastName":name,"test":test}}});app.controller('myCtrl', function($scope,myProvider) {alert(myProvider.lastName);alert(myProvider.test.a)myProvider.getData().then(function(data){//alert(data)},function(data){//alert(data)});});</script></body>
<body><div ng-app="myApp">在過濾器中使用服務:<h1>{{255 | myFormat}}</h1></div><script>var app = angular.module('myApp', []);app.service('hexafy', function() {this.myFunc = function (x) {return x.toString(16);}});app.filter('myFormat',['hexafy', function(hexafy) {return function(x) {return hexafy.myFunc(x);};}]);</script></body>