首页 > 代码库 > angularJs 解析factory、service、provider
angularJs 解析factory、service、provider
了解angular js
factory
可以认为是设计模式中的工厂方法，就是你提供一个方法，该方法返回一个对象的实例；
对于angularJs的factory，就是先定义一个对象，给这个对象添加属性和方法，然后返回这个对象。
例如：
var app = angular.module("MyApp",[]);
app.factory("MyFactory",function(){
var result = {};
result.greeting = "Hello from factory";
return result;
});
最后controller拿到的就是result对象，相当于下面的代码：
var factoryResult = MyFactory();
其实factory 就是这么简单。
service
service 通过new运算符进行实例化，可以认为是一个类型，只要把属性、方法添加到this对象上即可，不用显示返回对象
例如：
app.service("MyService",function(){
this.greeting = "hello from service";
});
controller 拿到的对象就是上面代码中this指向的对象，相当于下面的代码；
var serviceObj = new MyService();
provider
与factory、service稍有不同的是，provider必须提供一个$get方法，$get方法和factory要求是一致的，
即先定义一个对象，给这个对象添加属性、方法，然后返回这个对象，例如：
app.provider("MyProvider",function(){
this.$get = function(){
var result = {};
result.greeting = "hello from provider";
return result;
}
});
最后controller 拿到的对象就是provider 的$get方法返回的对象，相当于下面的代码
var instance = new MyProvider();
var provider = instance.$get();
使用 factory service provider
三者使用起来是一样的，都是通过AngularJs的依赖注入使用，比如：
app.controller("TestController",[‘$scope‘,‘MyFactory‘,‘MyService‘,‘MyProvider‘,function($scope,MyFactory,MyService,MyProvider){
$scope.greetingFromFactory = MyFactory.greeting;
$scope.greetingFromService = MyService.greeting;
$scope.greetingFromProvider = MyProvider.greeting;
}]);
对应的视图为：
<body ng-controller="TestController">
<p>greeting from factory: {{greetingFromFactory}} </p>
<p>greeting from service: {{greetingFromService}} </p>
<p>greeting from provider: {{greetingFromProvider}} </p>
</body>
provider 可以在应用启动时进行配置：
provider 的特殊之处就是可以在module启动时进行配置，从而达到特殊的用途，比如上面的provider 中可以添加一个setName方法，
可以在启动时调用这个方法，进行一些额外的初始化工作：
app.provider(‘MyProvider‘, function() {
// default name is ‘anonymous‘;
var defaultName = ‘anonymous‘;
var name = defaultName;
// setName can be called duaring module init
this.setName = function(newName) {
name = newName;
}
this.$get = function() {
var result = {};
result.greeting = ‘Hello from provider‘;
result.name = name;
result.defaultName = defaultName;
return result;
}
})
添加了setName方法之后，可以module启动时来调用这个方法，实现对provider的配置
app.config(function(MyProviderProvider) { //没错，这就是MyProviderProvider
MyProviderProvider.setName(‘Angularjs Provider‘);
});
在 controller 中添加显示 provider 的这些信息：
app.controller(‘TestController‘, [‘$scope‘, ‘MyFactory‘, ‘MyService‘, ‘MyProvider‘, function($scope, myFactory, myService, myProvider) {
$scope.greetingFromFactory = myFactory.greeting;
$scope.greetingFromService = myService.greeting;
$scope.greetingFromProvider = myProvider.greeting;
$scope.defaultName = myProvider.defaultName;
$scope.name = myProvider.name
}]);
对应的 HTML 视图也调整一下
<body ng-controller="TestController">
<p>greeting from factory: {{greetingFromFactory}} </p>
<p>greeting from service: {{greetingFromService}}</p>
<p>greeting from provider: {{greetingFromProvider}} </p>
<p>defaultName: {{defaultName}}, config to: {{name}} </p>
</body>
运行结果：
greeting form factory:hello from factroy
greeting form service:hello from service
greeting form provider:hello from provider
defaultName:anonymous,config to:Angularjs Provider
angularJs 解析factory、service、provider