angularjs中factory, service和provider
在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除。而controllers在不需要的时候就会被销毁了(因为service的底层机制是通过闭包实现,如果过分使用会导致内存泄露从而导致性能问题)
如何创建一个service
每个service方法中,我们都会看到两个参数:
1.name------service的名字
2.function------service中包含的代码
angularjs中有3种创建service的方法:service(),factory()和provider()。
(1) factory()
Angular里面创建service最简单的方式是使用factory()方法
factory()让我们通过返回一个包含service方法和数据的对象来定义一个service
在service方法里面我们可以注入services,比如 $http 和 $q等
factory()的示例代码:
angular.module('myApp.services')
.factory('User', function($http) { // factory的名字和注入的方法
var backendUrl = "http://localhost:3000";
var service = { //把我们定义的方法和数据都放到一个对象中,并且返回这个对象,这就是factory
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;
});
在controller中使用factory(),将factory的名字注入即可
angular.module('myApp')
.controller('MainCtrl', function($scope, User) { //User就是factory()的名字
$scope.saveUser = User.save; //我们将User这个factory中的一个叫做save()的function赋给我们controller中的变量
});
什么时候使用factory()?
在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候,factory()是一个非常不错的选择
也就是说,我们可以用factory()来当做一个仓库,存储着我们的function和data
注意:需要使用.config()来配置service的时候不能使用factory()方法
(2) service()
service()通过构造函数的方式让我们创建service,和factory()方法一样我们也可以在函数的定义里面看到服务的注入
service()示例代码:
angular.module('myApp.services')
.service('User', function($http) { // 在这里注入我们需要的服务
var self = this; //由于service()是通过构造函数创建的,那么service()中的function和data都要以this.data和this.function的方式进行声明
//service()方法会持有构造函数创建的对象
this.user = {};
this.backendUrl = "http://localhost:3000";
this.setName = function(newName) {
self.user['name'] = newName;
}
this.setEmail = function(newEmail) {
self.user['email'] = newEmail;
}
this.save = function() {
return $http.post(self.backendUrl + '/users', {user: self.user });
}
});
在controller中使用service(),和factory()一样,将service的名字注入到controller中即可
angular.module('myApp')
.controller('MainCtrl', function($scope, User) {//注入名字为User的service
$scope.saveUser = User.save; //用User中名字叫做的save的function给本地变量赋值
});
什么时候使用service()?
与factory()相比,由于service是通过构造函数的方式创造的,且持有创造对象本身,所以当我们在功能比较复杂的情况下,可以
通过service()中的方法和数据对controller中的变量进行赋值,从某种角度来说,service()和factory()的实现方式不同,但是二者在使用场景上却很接近
注意:需要使用.config()来配置service的时候不能使用service()方法
(3)provider
provider()是创建service最底层的方式,这也是唯一一个可以使用.config()方法配置创建service的方法
provider()不同于service()和factory(),在注入其他的服务的时候不能在function()中注入
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) { // 在这里注入其他服务,不同于factory()与service()中的在//function()中引入
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()是唯一一个可以在config()中进行配置的service
angular.module('myApp')
.config(function(UserProvider) { //在.config()中配置provider
UserProvider.setBackendUrl("http://myApiBackend.com/api");
})
配置之后,我们才可以在controller中正常使用provider()
angular.module('myApp')
.controller('MainCtrl', function($scope, User) { //注入名字为User的provider()
$scope.saveUser = User.save;
});
什么时候使用.provider()?
1.当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如,比如我们开发时要用到多个环境,测试环境,正式环境等,我们在应用初始化时,可以对provider()进行初始化
2.当我们打包发布时,如果我们要用到可配置的service时,我们必须选择provider()
总结:
1.factory()就像一个仓库一样,存储着我们的方法和数据
2.service()在创建时会持有当前对象,调用了这个service()的对象就会被赋值(方法或者数据)
3.provider()是唯一一个可以在config()中进行配置的service,它在设计上和用处上与以上二者区别明显
转自:https://blog.csdn.net/sourcecode_poet/article/details/53509851
angularjs中factory, service和provider的更多相关文章
- angularjs 中 Factory,Service,Provider 之间的区别
本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...
- angularjs 中使用 service 在controller 之间 share 对象和数据
在做angularjs 的UI 时,我们经常会遇到一个页面之间有几个controller,在controller 之间share 公共的一些数据和方法就变得比较困难,目前推荐的做法是创建一个servi ...
- AngularJS中使用service,并同步数据
service是单例对象,在应用中不同代码块之间共享数据. 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1.创建一个模块: var module ...
- 我也谈“the difference between Factory, Service, and Provider in Angular”
看完这篇文章之后的理解与实践:原文地址:http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/ <!doctype ...
- AngularJS 之 Factory vs Service vs Provider【转】
英文原文:AngularJS: Factory vs Service vs Provider 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一 ...
- AngularJS之Factory vs Service vs Provider
原文 http://www.linuxeden.com/html/news/20140509/151538.html 当你初试 Angular 时,很自然地就会往 controller 和 scop ...
- [转载]AngularJS之Factory vs Service vs Provider
http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider http://tylermcginnis.com/a ...
- 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别,你知道么?
在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...
- AngularJS 中的 factory、 service 和 provider区别,简单易懂
转自:http://blog.csdn.net/ywl570717586/article/details/51306176 初学 AngularJS 时, 肯定会对其提供 factory . serv ...
随机推荐
- height百分比失效
heigh:100%失效 解决方案: 第一种 html, body { height: 100%; } 第二种 div { height: 100%; position: absolute; } 非定 ...
- IOS项目之弹出动画三
前面写了弹出动画两个,今天做商城时又用到了,看着这个用着蛮普遍的,所以记了下来 // // mallMoreView.h // XQB // // Created by City--Online on ...
- Data Warehouse Hardware - DW硬件需求计算
1. Disk I/O, 硬盘IO速度 硬盘的IO速度一直都是数据库的瓶颈,所以有条件的情况下尽可能的使用高IO的磁盘. 可以使用微软的工具SQLIO测试磁盘的IOPS 2. CPU的主频, DW和传 ...
- linux运维人员成长
原文地址:https://blog.csdn.net/kwame211/article/details/78059331 初级篇 linux运维人员常用工具拓扑详见: 1rsync工具 很多地方经常会 ...
- SpringBoot管理Banner
一.引言 在springboot项目启动的时候,会在console控制台中打印出一个SPRING的图案.有时候为了减少日志输出以及控制台的输出,就需要将这些给去除:有时候需要换上个人的标签等标识,就需 ...
- win下gosublime配置ctag
ctags(Generate tag files for source code)是vim下方便代码阅读的工具.尽管ctags也可以支持其它编辑器,但是它正式支持的只有VIM.并且VIM中已经默认安装 ...
- Myeclipse下集成SVN插件
一.下载SVN插件subclipse 下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 在 ...
- ThreeJs 选中物体事件
选中物体变红色demo: https://threejs.org/examples/#webgl_raycast_sprite <!DOCTYPE html> <html lang= ...
- PHP实用系统函数之数组篇
PHP中十分实用的系统函数 array array_merge 说明:array array_merge ( array $array1 [, array $... ] ) 将一个或多个数组的单元合 ...
- Spring的大框架
初识Spring: Spring作者:Rod Johnson Spring框架由20个模块组成,这些模块分成六个部分,分别是Core Container,Data Access/Integration ...