AngularJS服務中的provider、factory、service
2018-06-07 18:22 更新
當我們創(chuàng)建一個AngularJS服務時，通常可以有三種方式來自定義service。
簡單來說，provider是被 注入控制器 使用的一個對象，注入機制通過調用一個provider的$get()方法，把得到的東西作為參數(shù)進行相關調用。比如把得到的服務作為一個Controller的參數(shù)。
看下面的代碼：
// 這是一個provider
var pp = function() {
this.$get = function() {
return {
'name': 'iceiceice',
'getAge': function() {
return 25;
}
};
};
};
// 我在模塊的初始化過程中，定義了一個叫 PP 的服務
var app = angular.module('Demo', [], function($provide) {
$provide.provider('PP', pp);
});
// PP服務實際上就是 pp 這個provider的$get()方法返回的東西
app.controller('TestCtrl', function($scope, PP) {
console.log(PP);
});下面還有兩種定義service 的簡略方法。
第一個是factory方法，此方法由$provider提供，module的factory是一個引用，作用一樣。這個方法直接把一個函數(shù)當成一個對象的$get()方法，這樣你就不用顯示的定義一個provider了。示例如下：
var app = angular.module('Demo', [], function() {
// TODO 模塊聲明
});
app.factory('PP', function() {
return {
'name': 'iceiceice'
};
});
app.controller('TestCtrl', function($scope, PP) {
console.log(PP);
});第二個是service方法，也是由$provider提供，module中有對它的同門引用。
service和factory的區(qū)別在于：前者要求提供一個 構造方法 ，后者是要求提供 $get()方法。簡單的是說，就是前者一定是得到一個object， 后者可以一個數(shù)字或者字符串。示例代碼如下：
var app = angular.module('Demo', [], fyunction() {
// TODO 模塊聲明
});
app.service('PP', function() {
this.name = 'iceiceice';
});
app.controller('TestCtrl', function($scope, PP) {
console.log(PP);
});完整示例如下，
<html ng-app="app">
<head>
<script src="jquery-2.0.3.js"></script>
<script src="angular.js"></script>
</head>
<body ng-controller="ctrl">
</body>
<script>
var app = angular.module('app', []);
app.factory('PP1', function() {
return {
'name': 'jarred'
};
});
app.service('PP2', function() {
this.name = 'jarred2';
});
app.controller('ctrl', [
'$scope',
'PP1',
'PP2',
function($scope, pp1, pp2) {
console.log(pp1);
console.log(pp2);
}
]);
</script>
</html>以上內容是否對您有幫助：
更多建議：