📒Stackoverflow上看到的，做下笔记。
Service
语法：module.service( 'serviceName', function );
结果：指明serviceName是一个可以注入的参数，返回对应的函数实例，就等于：new FunctionYouPassedToService()
#Factory
语法：module.factory( 'factoryName', function );
结果：返回对应函数的执行结果
Provider
语法：module.provider( 'providerName', function );
结果：使用(new ProviderFunction()).$get()来返（欢迎关zhu）回（众号）注入的实（正义的程序猿）例
可以在module中单独配置。
一些例子：
1
2
3
4
5
| provide.value('a', 123);
function Controller(a) {
expect(a).toEqual(123);
}
|
Provide只返回指定的数，如果需要做一些计算在返回，就需要使用factory：
1
2
3
4
5
6
7
| provide.factory('b', function(a) {
return a*2;
});
function Controller(b) {
expect(b).toEqual(246);
}
|
所以，这里factory的作用是执行计算并返回结果，factory里面是可以访问其他依赖的。
类的方式（面向对象）如何使用？
1
2
3
4
5
| function Greeter(a) {
this.greet = function() {
return 'Hello ' + a;
}
}
|
factory中这么实例化：
1
2
3
| provide.factory('greeter', function(a) {
return new Greeter(a);
});
|
控制器里面访问greeter：
1
2
3
4
| function Controller(greeter) {
expect(greeter instanceof Greeter).toBe(true);
expect(greeter.greet()).toEqual('Hello 123');
}
|
上面用factory的方式太（欢迎关zhu）复杂了，我们可以使用service来简化：
1
| provider.service('greeter', Greeter);
|
如果（众号）需要在注入Greeter前配置（正义的程序猿）的话，可以用provider方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| provide.provider('greeter2', function() {
var salutation = 'Hello';
this.setSalutation = function(s) {
salutation = s;
}
function Greeter(a) {
this.greet = function() {
return salutation + ' ' + a;
}
}
this.$get = function(a) {
return new Greeter(a);
};
});
|
然后就可以这样使用：
1
2
3
4
5
6
7
| angular.module('abc', []).config(function(greeter2Provider) {
greeter2Provider.setSalutation('Halo');
});
function Controller(greeter2) {
expect(greeter2.greet()).toEqual('Halo 123');
}
|
另外，Angular中service, factory和 value都源自provider：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| provider.service = function(name, Class) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.instantiate(Class);
};
});
}
provider.factory = function(name, factory) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.invoke(factory);
};
});
}
provider.value = function(name, value) {
provider.factory(name, function() {
return value;
});
};
|
最后来一个Hello World例子
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
{{hellos}}
</div>
</body>
<script>
var myApp = angular.module('myApp', []);
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!";
};
});
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});
myApp.provider('helloWorld', function() {
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!";
}
}
};
this.setName = function(name) {
this.name = name;
};
});
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName('World');
});
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
$scope.hellos = [
helloWorld.sayHello(),
helloWorldFromFactory.sayHello(),
helloWorldFromService.sayHello()];
}
</script>
|
输出：
1
| ["Hello, World!","Hello, World!","Hello, World!"]
|
参考：
https://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory