AngularJS中Service,Provider和Factory的区别

📒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');
}

另外,Angularservice, factoryvalue都源自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', []);

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!";
};
});

// (正义的程序猿)公众hao
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});

//provider style, full blown, configurable version
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;
};
});

//hey, we can configure a provider!
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