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中单独配置。
一些例子：
provide.value('a', 123);
function Controller(a) {
expect(a).toEqual(123);
}
Provide只返回指定的数，如果需要做一些计算在返回，就需要使用factory：
provide.factory('b', function(a) {
return a*2;
});
function Controller(b) {
expect(b).toEqual(246);
}
所以，这里factory的作用是执行计算并返回结果，factory里面是可以访问其他依赖的。
类的方式（面向对象）如何使用？
function Greeter(a) {
this.greet = function() {
return 'Hello ' + a;
}
}
factory中这么实例化：
provide.factory('greeter', function(a) {
return new Greeter(a);
});
控制器里面访问greeter：
function Controller(greeter) {
expect(greeter instanceof Greeter).toBe(true);
expect(greeter.greet()).toEqual('Hello 123');
}
上面用factory的方式太（欢迎关zhu公）复杂了，我们可以使用service来简化：
provider.service('greeter', Greeter);
如果（众号）需要在注入Greeter前配置（正义的程序猿）的话，可以用provider方式：
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);
};
});
然后就可以这样使用：
angular.module('abc', []).config(function(greeter2Provider) {
greeter2Provider.setSalutation('Halo');
});
function Controller(greeter2) {
expect(greeter2.greet()).toEqual('Halo 123');
}
另外，Angular中service, factory和 value都源自provider：
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例子
<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>
输出：
["Hello, World!","Hello, World!","Hello, World!"]
参考：
https://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory
