AngularJS中serivce,factory,provider的区别
一、service引导
刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别。This is where we'll start the twenty-five days of Angular calendar.
二、service
在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除。而controllers在不需要的时候就会被销毁了。
这就是为什么使用controllers在应用里面传递数据不可靠的原因,特别是使用routing的时候。Services are designed to be the glue between controllers, the minions of data, the slaves of functionality, the worker-bees of our application(就是说services在应用的controllers、 方法、数据之前起到了很关键的作用)
现在我们开始看怎么创建service。每个方法我们都会看到下面两个一样的参数:
name-我们要定义的service的名字
function-service方法
他们都创建了相同的底层对象类型。实例化后,他们都创建了一个service,这些对象没有什么功能上的差别。
1、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()是一个非常不错的选择。
注意:需要使用.config()来配置service的时候不能使用factory()方法
2、service()
service()通过构造函数的方式让我们创建service,我们可以使用原型模式替代javaScript原始的对象来定义service。
和factory()方法一样我们也可以在函数的定义里面看到服务的注入
angular.module('myApp.services')
.service('User', function($http) { // injectables go here
var self = this; // Save reference
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
})
}
});
这里的功能和使用factory()方法的方式一样,service()方法会持有构造函数创建的对象。
在应用里面使用service()方法
angular.module('myApp')
.controller('MainCtrl', function($scope, User) {
$scope.saveUser = User.save;
});什么时候适合使用service()方法
service()方法很适合使用在功能控制比较多的service里面
注意:需要使用.config()来配置service的时候不能使用service()方法
3、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) {
UserProvider.setBackendUrl("http://myApiBackend.com/api");
})这样我们就可以和其他方式一样在应用里面使用这个service了
angular.module('myApp')
.controller('MainCtrl', function($scope, User) {
$scope.saveUser = User.save;
});什么时候使用provider()方法
当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如,我们需要配置services在不同的部署环境里面(开发,演示,生产)使用不同的后端处理的时候就可以使用到了
当我们打算发布开源provider()也是首选创建service的方法,这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。
还可以看看这篇翻译:http://www.oschina.net/translate/top-10-mistakes-angularjs-developers-make
点击查看完整的代码:https://gist.github.com/auser/7743235
原文链接: http://my.oschina.net/tanweijie/blog/295067
AngularJS中serivce,factory,provider的区别的更多相关文章
- AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法
简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...
- AngularJS 中的 factory、 service 和 provider区别,简单易懂
转自:http://blog.csdn.net/ywl570717586/article/details/51306176 初学 AngularJS 时, 肯定会对其提供 factory . serv ...
- 简介AngularJS中使用factory和service的方法
AngularJS支持使用服务的体系结构“关注点分离”的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们即维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服 ...
- angularjs 中的$digest和$apply区别
$digest和$apply 在Angular中,有$apply和$digest两个函数,我们刚才是通过$digest来让这个数据应用到界面上.但这个时候,也可以不用$digest,而是使用$appl ...
- angularjs中provider,factory,service的区别和用法
angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
- AngularJS中的Provider们:Service和Factory等的区别
引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别,啥时候该用啥,之前一直傻 ...
- 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别,你知道么?
在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...
- angularjs 中 Factory,Service,Provider 之间的区别
本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...
- [译]AngularJS中几种Providers(Factory, Service, Provider)的区别
原文: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/ 什么是Provider? Angula ...
随机推荐
- (转) 学习C++ -> 向量(vector)
vector是向量类型,它是一种对象实体,具有值,所以可以看作是变量. 它可以容纳许多其他类型的相同实体,如若干个整数,所以称其为容器. vector类与一般的Array类的区别在于: 1 ...
- python 在linux下通过top,和dh命令获得cpu,内存,以及硬盘信息
主要是通过os.popen读取命令输出实现的,os.popen启动新的进程,且将外部命令的输出作为文件类型对象返回.不能获得外部命令的返回值.既然是文件对象就可以直接用for in 来读取,代码如下: ...
- hash算法-time33算法
http://my.oschina.net/freegeek/blog/325531 http://www.cnblogs.com/napoleon_liu/articles/1911571.html ...
- Web数据采集
http://blog.csdn.net/pqhdp/article/details/4352769 http://blog.csdn.net/CharlesSimonyi/article/detai ...
- javascript之Error
一.Error()构造函数 构造函数:new Error(); new Error(message); 二.Error.message //人类可读的错误消息 语法:error.message; 三. ...
- SQL Server 2008空间数据应用系列十一:提取MapInfo地图数据中的空间数据解决方案
原文:SQL Server 2008空间数据应用系列十一:提取MapInfo地图数据中的空间数据解决方案 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Serv ...
- U盘启动盘的制作与U盘重装系统
网上有各种各样的装系统的方法,也有各种不同的操作系统版本. 本文介绍如何有UtraISO将U盘制作成系统启动盘,本文用于制作的系统是纯净的32位win7旗舰版. 可到http://itellyou.c ...
- tomcat https 未测试成功的版本
- hdu1166 树状数组
不知道为什么用C++输入输出死活不过,换成C的就过了... #include <stdio.h> #include <string.h> //================= ...
- 04747_Java语言程序设计(一)_第1章_Java语言基础
二进制0b开头 八进制0开头 十六进制0x开头 package com.jacky; public class Aserver { public static void main(String arg ...