AngularJS服务中的provider、factory、service

Category:
发表:

当我们创建一个AngularJS服务时,通常可以有三种方式来自定义service。

简单来说,provider是被 注入控制器 使用的一个对象,注入机制通过调用一个provider$get()方法,把得到的东西作为参数进行相关调用。比如把得到的服务作为一个Controller的参数。

看下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 这是一个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提供,modulefactory是一个引用,作用一样。这个方法直接把一个函数当成一个对象的$get()方法,这样你就不用显示的定义一个provider了。示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
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中有对它的同门引用。

servicefactory的区别在于:前者要求提供一个 构造方法 ,后者是要求提供 $get()方法。简单的是说,就是前者一定是得到一个object, 后者可以一个数字或者字符串。示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
var app = angular.module('Demo', [], fyunction() {
// TODO 模块声明
});

app.service('PP', function() {
this.name = 'iceiceice';
});

app.controller('TestCtrl', function($scope, PP) {
console.log(PP);
});

完整示例如下,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>