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 ...
随机推荐
- Android6.0内核移植(1):分析编译日志
在下面命令之后产生的编译日志进行分析 source build/envsetup.sh lunch sabresd_6dq-user make -j20 ======================= ...
- 百度开源e-chart初探
前言: 近年来,在数据服务的公司中,数据可视化越来越重要.随着而来的,国内外正在如火如荼的开发各种在线js视图展示框架.而百度的e-chart算是实用性较高且体验最好的!今天闲来无事,便来玩玩~ ec ...
- replace替换,全局和局部替换
<script> var a=document.getElementById("introduce").innerHTML; var b=a.replace(/jone ...
- [linux] shell脚本编程-ubuntu创建vsftpd服务
1. useradd -s /bin/bash -m 用户名 , 创建用户,自动创建家目录 , 设置登录shell 2. echo 用户名:密码 | chpasswd ,非交互式设置密码 3. ...
- 15、IO (转换流、缓冲流)
转换流概述 * A: 转换流概述 * a: 转换流概述 * OutputStreamWriter 是字符流通向字节流的桥梁:可使用指定的字符编码表,将要写入流中的字符编码成字节 * 将字符串按照指定的 ...
- Source not found ( Eclipse 关联源代码)
一.问题 有时候我们在查看源码时提示没有找到, 这时就需要我们手动关联源码 二.关联 首先需要根据提示下载对应的源代码文件 选择我们下载好的源码 三.修改/删除关联 如果需要重新切换源码 四.参考 j ...
- HDU X问题 中国剩余定理--求满足条件的个数
X问题 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- CodeForces 598B(循环数组)
对于循环数组的问题,就是找偏移K后位置 偏移后位置=起始位置+(相对位置+K)%(长度+1) #include <iostream> #include <string> #in ...
- RN canvas画布大小之谜
一.需求 在一个高640.宽360的canvas内画一些坐标点. 二.问题 坐标点只显示了一部分,剩下的点没显示(其坐标属于(640,360)区域). 三.原因 canvas默认的画布大小是高150, ...
- laravel之引入图片上传类
1.在官网http://www.uploadify.com/ 下载插件,flash verison 的版本是免费版 2.解压后将文件夹放置在指定的目录下 3.前端导入css,js文件,可以仿照文件夹中 ...