前言
1、3種創建自定義服務的方式。
2、大家應該知道，AngularJS是后臺人員在工作之余發明的，他主要應用了后臺早就存在的分層思想。所以我們得了解下分層的作用，如果你是前端人員不了解什么是分層，那么你最好問問你后臺的小伙伴。
dao層：就是Model層，在后臺時，這一層的作用，就要是寫與數據庫交互數據的一層，在angularJS里就主要是寫ajax的。
service層：主查寫邏輯代碼的，但在angularJS里也可以持久化數據（充當數據容器），以供不同的controller高用。
controller層：即控制層，在angularJS里就是寫控制器的。控制器里盡量不要寫那些不必要的邏輯，盡量寫在service層里。
所以，就有了創建自定義服務的三種方式。
factory
factory方式創建的服務，作用就是返回一個有屬性有方法的對象。相當于：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> //創建模型 var app = angular.module('myApp', []); //通過工廠模式創建自定義服務 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對象 }); //創建控制器 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 = "張三"; //請求數據 service.getData = function(){ var d = $q.defer(); $http.get("url")//讀取數據的函數。 .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
通過service方式創建自定義服務，相當于new的一個對象：var s = new myService();，只要把屬性和方法添加到this上才可以在controller里調用。
<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")//讀取數據的函數。 .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>3.provder
只有provder是能傳 .config() 函數的 service。如果想在 service 對象啟用之前，先進行模塊范圍的配置，那就應該選擇 provider。需要注意的是：在config函數里注入provider時，名字應該是：providerName+Provider.
使用Provider的優點就是，你可以在Provider對象傳遞到應用程序的其他部分之前在app.config函數中對其進行修改。
當你使用Provider創建一個service時，唯一的可以在你的控制器中訪問的屬性和方法是通過$get()函數返回內容。
<body><div ng-app="myApp" ng-controller="myCtrl"></div><script> var app = angular.module('myApp', []); //需要注意的是：在注入provider時，名字應該是：providerName+Provider app.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")//讀取數據的函數。 .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>4.在過濾器中注入自定義服務
<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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
