factory
factory 先定义一个对象， 给这个对象添加属性和方法， 然后返回这个对象
var app = angular.module('MyApp', []);
app.factory('MyFactory', function() {
// define result object of factory.
var result = {};
// add some property and method to the object
result.greeting = 'Hello from factory.';
// return the object;
return result;
});
最后 controller 拿到的就是 result 对象， 相当于：
var factoryResult = MyFactory();
service
service 通过 new 运算符进行实例化,只要把属性和方法添加到 this 对象上,不需要添加 return
app.service('MyService', function() {
this.greeting = 'Hello from service';
});
controller 拿到的对象就是上面代码中 this 指向的对象， 相当于
var serviceObj = new MyService();
provider
provider 必须提供一个 $get 方法,可以理解为 provider 在启动时建立一个 provider 实例，之后通过实例$get()方法获取返回对象
app.provider('MyProvider', function() {
this.$get = function() {
var result = {};
result.greeting = 'Hello from provider';
return result;
}
})
最后 controller 拿到的对象就是 provider 的 $get 方法返回的对象， 相当于
var instance = new MyProvider();//可以理解为MyProviderProvider = new MyProvider();
var provider = instance.$get();
factory、 service 与 provider 使用
factory、 service 与 provider 使用起来是一样的， 都是通过 AngularJS 的依赖注入
// inject factory, service and provider to a controller
app.controller('TestController', ['$scope', 'MyFactory', 'MyService', 'MyProvider', function($scope, myFactory, myService, myProvider) {
$scope.factory = myFactory.greeting;
$scope.service = myService.greeting;
$scope.provider = myProvider.greeting;
}]);
provider 配置
provider可以在应用启动时,通过 config 方法对 provider进行配置
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.name = name;
result.defaultName = defaultName;
return result;
}
})
app.config(function(MyProviderProvider) {
MyProviderProvider.setName('Angularjs');
});
app.controller('TestController', ['$scope', 'MyFactory', 'MyService', 'MyProvider', function($scope, myFactory, myService, myProvider) {
$scope.defaultName = myProvider.defaultName; //anonymous
$scope.name = myProvider.name; //Angularjs
}]);