免費(fèi)AI編程助手
AngularJS服務(wù)中的provider、factory、service
2018-06-07 18:22 更新
當(dāng)我們創(chuàng)建一個(gè)AngularJS服務(wù)時(shí)，通?？梢杂腥N方式來自定義service。
簡(jiǎn)單來說，provider是被 注入控制器 使用的一個(gè)對(duì)象，注入機(jī)制通過調(diào)用一個(gè)provider的$get()方法，把得到的東西作為參數(shù)進(jìn)行相關(guān)調(diào)用。比如把得到的服務(wù)作為一個(gè)Controller的參數(shù)。
看下面的代碼：
// 這是一個(gè)provider
var pp = function() {
this.$get = function() {
return {
'name': 'iceiceice',
'getAge': function() {
return 25;
}
};
};
};
// 我在模塊的初始化過程中，定義了一個(gè)叫 PP 的服務(wù)
var app = angular.module('Demo', [], function($provide) {
$provide.provider('PP', pp);
});
// PP服務(wù)實(shí)際上就是 pp 這個(gè)provider的$get()方法返回的東西
app.controller('TestCtrl', function($scope, PP) {
console.log(PP);
});下面還有兩種定義service 的簡(jiǎn)略方法。
第一個(gè)是factory方法，此方法由$provider提供，module的factory是一個(gè)引用，作用一樣。這個(gè)方法直接把一個(gè)函數(shù)當(dāng)成一個(gè)對(duì)象的$get()方法，這樣你就不用顯示的定義一個(gè)provider了。示例如下：
var app = angular.module('Demo', [], function() {
// TODO 模塊聲明
});
app.factory('PP', function() {
return {
'name': 'iceiceice'
};
});
app.controller('TestCtrl', function($scope, PP) {
console.log(PP);
});第二個(gè)是service方法，也是由$provider提供，module中有對(duì)它的同門引用。
service和factory的區(qū)別在于：前者要求提供一個(gè) 構(gòu)造方法 ，后者是要求提供 $get()方法。簡(jiǎn)單的是說，就是前者一定是得到一個(gè)object， 后者可以一個(gè)數(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>以上內(nèi)容是否對(duì)您有幫助：
更多建議：