angular 关于 factory、service、provider的相关用法
1、factory()
Angular里面创建service最简单的方式是使用factory()方法。
factory()让我们通过返回一个包含service方法和数据的对象来定义一个service。在service方法里面我们可以注入services,比如 $http 和 $q等。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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 ,需要到的时候简单地注入就可以了
1
2
3
4
|
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()方法一样我们也可以在函数的定义里面看到服务的注入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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()方法
1
2
3
4
|
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()方法里面进行依赖注入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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()方法里面
1
2
3
4
|
angular.module( 'myApp' ) .config( function (UserProvider) { UserProvider.setBackendUrl( "http://myApiBackend.com/api" ); }) |
这样我们就可以和其他方式一样在应用里面使用这个service了
1
2
3
4
|
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
angular 关于 factory、service、provider的相关用法的更多相关文章
- angularjs factory,service,provider 自定义服务的不同
angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angul ...
- AngularJS 讲解五, Factory ,Service , Provider
一. 首先说一下,为什么要引入Factory,Service和Provider这三个Service层. 1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据,controller层 ...
- 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 ...
- angula的factory service provider
本人学了一段时间的angular的服务(factory.service.provider),有了自己的一些对于他们的见解,如果说的对,敬请赐教!!! 以后更新
- AngularJS Factory Service Provider
先看看http://www.cnblogs.com/mbydzyr/p/3460501.html http://www.oschina.net/translate/angularjs-factory- ...
- Angular之Providers (Value, Factory, Service and Constant )
官方文档Providers Each web application you build is composed of objects that collaborate to get stuff do ...
- Angular1.x 之Providers (Value, Factory, Service and Constant )
官方文档Providers Each web application you build is composed of objects that collaborate to get stuff do ...
- angularjs中provider,factory,service的区别和用法
angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
随机推荐
- 【Luogu】P1169棋盘制作(单调栈)
题目链接 唉……这种题放在NOIP以前我是会做的……但是为什么现在反而不会了…… 单调栈.预处理每个点向上能扩展的最大距离,左右用两遍单调栈扫一遍.注意边界. #include<cstdio&g ...
- kb-07线段树--10--dfs序建树
/* hdu3974 dfs序建树,然后区间修改查询: */ #include<iostream> #include<cstdio> #include<cstring&g ...
- BZOJ 4816 [Sdoi2017]数字表格 ——莫比乌斯反演
大力反演出奇迹. 然后xjb维护. 毕竟T1 #include <map> #include <ctime> #include <cmath> #include & ...
- jenkins配置本机JDK和maven环境
1.jenkins官网下下载jenkins的war包 2.安装jenkins,启动命令:java -jar jenkins.war 3.打开http://localhost:8080/ 4.点击系统 ...
- 使用electron将单页面vue webapp 打包成 PC端应用
在看张鑫旭博客得时候看到了electron这个东西,来了兴趣,就按照上面写的将已经做好得vue项目拿来试了试,出乎意料得顺利 electron简单说下electron,就是把 chrome内核和你的项 ...
- Wmap5 测试80端口 Your port 80 is actually used by :Server: Microsoft-HTTPAPI/2.0
问题:win7系统! 在wamp5的apache启动不了: 目录下点击[测试80端口]的时候提示:Your port 80 is actually used by : Server: Microsof ...
- 通过例子学习 Keystone
上一节介绍了 Keystone 的核心概念.本节我们通过“查询可用 image”这个实际操作让大家对这些概念建立更加感性的认识. User admin 要查看 Project 中的 image 第 1 ...
- Linq技巧3——何时及怎么使用预先加载
通常情况在你的应用程序中,一旦你要查询完数据的的时候,你知道使用实体来做什么. 假如你打印一份订单给顾客,你知道不包括组成订单的Items和Products信息,打印的信息是不完整的,所以查询时也需要 ...
- Codevs 1501 二叉树的最大宽度和高度
1501 二叉树最大宽度和高度 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 给出一个二叉树,输出它的最大宽度和高度. 输入描 ...
- StarUML 系列,静态图与动态图,用例图,类图【ps:熟悉一下starUML】
大部分: 静态图部分,即静态不动的图 1.用例图, Use case diagram 1.展示系统核心功能及与其交互的用户ACTOR 表示:椭圆