AngularJS的service
在Angular里面,services作为单例对象
在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除。而controllers在不需要的时候就会被销毁了。
现在我们开始看怎么创建service:
factory()
Angular里面创建service最简单的方式是使用factory()
方法。
factory()
让我们通过返回一个包含service方法和数据的对象来定义一个service。在service
方法里面我们可以注入services,比如 $http
和 $q
等。
angular.module('myApp.services')
.factory('User', function($http) { // injectables go here
var backendUrl = "http://localhost:3000";
var service = { // our factory definition
user: {},
setName: function(newName) {
service.user['name'] = newName;
},
setEmail: function(newEmail) {
service.user['email'] = newEmail;
},
save: function() {
return $http.post(backendUrl + '/users', {
user: service.user
});
}
};
return service;
});
在应用里面使用factory()
方法
在应用里面可以很容易地使用factory ,需要到的时候简单地注入就可以了
angular.module('myApp')
.controller('MainCtrl', function($scope, User) {
$scope.saveUser = User.save;
});
什么时候使用factory()
方法
在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候,factory()
是一个非常不错的选择。
注意:factory()定义的服务不能注入到.config()中
service()
service()
通过构造函数的方式让我们创建service,我们可以使用原型模式替代javaScript原始的对象来定义service。
angular.module('myApp.services')
.service('User', function($http) { // injectables go here
var self = this; // Save reference
var backendUrl = "http://localhost:3000";
this.user = {};
this.setName = function(newName) {
self.user['name'] = newName;
}
this.setEmail = function(newEmail) {
self.user['email'] = newEmail;
},
save: function() {
return $http.post(backendUrl + '/users', {
user: service.user
});
}
});
在应用里面使用service()
方法
angular.module('myApp')
.controller('MainCtrl', function($scope, User) {
$scope.saveUser = User.save;
});
什么时候适合使用service()
方法
service()
方法很适合使用在功能控制比较多的service里面
注意:什么时候适合使用service()定义的服务不能注入到.config()中
provider()
provider()
是创建service最底层的方式,这也是唯一一个可以使用.config()
方法配置创建service的方法
不像上面提到的方法那样,我们在定义的this.$get()
方法里面进行依赖注入
angular.module('myApp.services')
.provider('User', function() {
this.backendUrl = "http://localhost:3000";
this.setBackendUrl = function(newUrl) {
if (url) this.backendUrl = newUrl;
}
this.$get = function($http) { // injectables go here
var self = this;
var service = {
user: {},
setName: function(newName) {
service.user['name'] = newName;
},
setEmail: function(newEmail) {
service.user['email'] = newEmail;
},
save: function() {
return $http.post(self.backendUrl + '/users', {
user: service.user
})
}
};
return service;
}
});
在应用里面使用provider()
方法
为了给service进行配置,我们可以将provider注入到.config()
方法里面
angular.module('myApp')
.config(function(UserProvider) {// config()里只能注入provider,注意名称是服务名称+Provider
UserProvider.setBackendUrl("http://myApiBackend.com/api");
})
这样我们就可以和其他方式一样在应用里面使用这个service了
angular.module('myApp')
.controller('MainCtrl', function($scope, User) {// controller里面注入服务,只能调用provider的get方法里定义的内容
$scope.saveUser = User.save;
});
什么时候使用provider()
方法
- 当我们希望在应用开始前对service进行配置的时候就需要使用到
provider()
。比如,我们需要配置services在不同的部署环境里面(开发,演示,生产)使用不同的后端处理的时候就可以使用到了 - 当我们打算发布开源
provider()
也是首选创建service的方法,这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。
.service('User', function($http) { // injectables go here
var self = this; // Save reference
var backendUrl = "http://localhost:3000";
this.user = {};
this.setName = function(newName) {
self.user['name'] = newName;
}
this.setEmail = function(newEmail) {
self.user['email'] = newEmail;
},
save: function() {
return $http.post(backendUrl + '/users', {
user: service.user
});
}
});
有错误吧:
应该是:
this.save = function() {
return $http.post(backendUrl + '/users', {
user: this.user
});