在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的更多相关文章

  1. angularjs 中 Factory,Service,Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

  2. angularjs 中使用 service 在controller 之间 share 对象和数据

    在做angularjs 的UI 时,我们经常会遇到一个页面之间有几个controller,在controller 之间share 公共的一些数据和方法就变得比较困难,目前推荐的做法是创建一个servi ...

  3. AngularJS中使用service,并同步数据

    service是单例对象,在应用中不同代码块之间共享数据. 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1.创建一个模块: var module ...

  4. 我也谈“the difference between Factory, Service, and Provider in Angular”

    看完这篇文章之后的理解与实践:原文地址:http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/ <!doctype ...

  5. AngularJS 之 Factory vs Service vs Provider【转】

    英文原文:AngularJS: Factory vs Service vs Provider 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一 ...

  6. AngularJS之Factory vs Service vs Provider

    原文  http://www.linuxeden.com/html/news/20140509/151538.html 当你初试 Angular 时,很自然地就会往 controller 和 scop ...

  7. [转载]AngularJS之Factory vs Service vs Provider

    http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider http://tylermcginnis.com/a ...

  8. 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别,你知道么?

    在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...

  9. AngularJS 中的 factory、 service 和 provider区别,简单易懂

    转自:http://blog.csdn.net/ywl570717586/article/details/51306176 初学 AngularJS 时, 肯定会对其提供 factory . serv ...

随机推荐

  1. 微信授权获取code(微信支付)

    摘要:最近在做h5支付,然后发现一个问题,微信自带浏览器不支持h5支付,然后后台又做了一个微信支付的接口,然后要传code参数,代码写好总结后,就发到这里记录一下: 因为有两个支付接口,所以首先判断打 ...

  2. 对datatable添加数据

    DataTable dt = new DataTable(); dt.Columns.Clear(); dt.Columns.Add("事故发生时间"); dt.Columns.A ...

  3. Vue学习笔记:编译过程

    碰到是否有template选项时,会询问是否要对template进行编译: 在template编译(渲染成UI)有一个过程.模板通过编译生成AST,再由AST生成Vue的渲染函数,渲染函数结合数据生成 ...

  4. Mongodb操作之查询(循序渐进对比SQL语句)(转http://www.tuicool.com/articles/UzQj6rF)

    工具推荐:Robomongo,可自行百度寻找下载源,个人比较推荐这个工具,相比较mongoVUE则更加灵活. 集合简单查询方法 mongodb语法:db.collection.find()  //co ...

  5. 在ASP.NET中过滤HTML字符串总结

    先记下来,以作备用! ///   <summary>去除HTML标记 /// ///   </summary> ///   <param name="Htmls ...

  6. IDEA设置类注解和方法注解(详解)

    从eclipse工具到IDEA工具的转化,发现IDEA工具配置注释模板变的不一样了,不说废话了,直接开始 一.设置类注解模板(在创建类的时候自动填充模板) /** * @ProjectName: ${ ...

  7. 撩课-Web大前端每天5道面试题-Day10

    1. px和em的区别? px和em都是长度单位; 区别是: px的值是固定的,指定是多少就是多少, 计算比较容易. em得值不是固定的,并且em会继承父级元素的字体大小. 浏览器的默认字体高都是16 ...

  8. Spring Boot学习笔记(一)与JSP整合

    项目结构展示 在webapp目录下面手动创建JSP的目录和web.xml 创建web.xml只是为了不报错,在SpringBoot的项目中实际上用不到web.xml 打开pom.xml把框住的地方改成 ...

  9. hdu 2049 考新郎

    假设一共有N对新婚夫妇,其中有M个新郎找错了新娘,求发生这种情况一共有多少种可能. 和之前那道题一样,是错排,但是要乘上排列数. 选对的人有C(N,M)个组合,将它们排除掉,剩下的人就是错排了 #in ...

  10. HDU2048 神,上帝以及老天爷 错排

    http://acm.hdu.edu.cn/showproblem.php?pid=2048 这是一道错排的题目 错排如下:http://baike.baidu.com/link?url=U2_H-4 ...