AngularJS 讲解五, Factory ,Service , Provider
一. 首先说一下，为什么要引入Factory,Service和Provider这三个Service层。
1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据，controller层越轻薄越好，业务逻辑和持久化数据应该放在Service层。
2.针对内存性能的考虑，controller会在需要的时候才初始化，不需要的话，就会被放弃。所以AngularJS会在刷新页面的时候，清空controller. 而永久保存的数据放在Service层，那么在不同的controller之间可以被调用。
二.AngularJS 提供了三种方法创建并注册自己的Service.
1). Factory
2). Service
3). Provider
三.对Factory,Service,Provider的详解
1).Factory 相当于创建对象，在对象里添加属性和方法，返回这个对象，然后在controller里便可直接用service对象的属性啦
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/demo1.js"></script>
</head>
<body data-ng-app="demoApp">
<div data-ng-controller="demoController">
title:<span data-ng-bind="title"></span>
</div>
</body>
</html> (function () {
angular.module('demoApp', []);
angular.module('demoApp').controller("demoController", function ($scope,demoFactory) {
$scope.title = demoFactory.getTitle();
});
angular.module('demoApp').factory("demoFactory", function () {
var _title = "ruby's test";
var service = {};
service.getTitle = function () {
return _title;
}
return service;
})
})();
2).Service 相当于是用new关键字来实例化的Service对象(相当于创建了一个构造器)，因此只需要给this添加属性，然后由service返回this. 在controller层通过该service获得这个属性。
angular.module('demoApp').controller("demoController", function ($scope,demoService) {
$scope.title = demoService.getTitle();
});
angular.module('demoApp').service('demoService', function () {
var _title = "Ruby Test service";
this.getTitle = function () {
return _title;
}
});
3).Provider 是唯一一个能传到应用程序.config的服务。所以当想要在controller之前启用，先进行模块范围的配置(对provider的一部分属性值进行配置)，就用provider
如果想要在controller控制器里直接调用provider的属性和方法 要放到$get里
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/demo1.js"></script>
</head>
<body data-ng-app="demoApp">
<div data-ng-controller="demoController">
title:<span data-ng-bind="title"></span>
<br/>
thingFromConfig:<span data-ng-bind="thingFromConfig"></span>
</div>
</body>
</html> angular.module('demoApp', []);
angular.module('demoApp').controller("demoController", function ($scope,demoProvider) {
demoProvider.setTitle("provider service test");
$scope.title = demoProvider.getTitle();
$scope.thingFromConfig = demoProvider.thingOnConfig;
});
angular.module('demoApp').provider('demoProvider', function () {
var _title = "";
this.thingFromConfig = "";
this.$get = function () {
return {
setTitle: function (t) {
_title = t;
},
getTitle: function () {
return _title;
},
thingOnConfig: this.thingFromConfig
}
}
});
angular.module('demoApp').config(function (demoProviderProvider) {
demoProviderProvider.thingFromConfig = "Hello, this is a thing from configuration.";
});
四.深入解析 AngularJs的service
首先了解一下$provide
AngularJs有个叫$provide的服务，这个服务可以创建供应商，我们的service都是通过供应商来定义的。
有六个个创建供应商的方法：
1.Factory
2.Service
3.Constant
4.value
5.provider
6.decorator(装饰器)
AngularJS 讲解五, Factory ,Service , Provider的更多相关文章
- angularjs factory,service,provider 自定义服务的不同
angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angul ...
- 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 ...
- AngularJS Factory Service Provider
先看看http://www.cnblogs.com/mbydzyr/p/3460501.html http://www.oschina.net/translate/angularjs-factory- ...
- angula的factory service provider
本人学了一段时间的angular的服务(factory.service.provider),有了自己的一些对于他们的见解,如果说的对,敬请赐教!!! 以后更新
- 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:Service、Factory、Provider依赖注入使用与区别
本教程使用AngularJS版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ ...
- 转载：[AngularJS系列] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)
来源:http://hellobug.github.io/blog/angularjs-providers/ 用AngularJS做项目,但凡用过什么service啊,factory啊,provide ...
随机推荐
- windows 系统注册dll文件
使用管理员身份注册:命令提示符 管理员身份运行 32 位系统:regsvr32 %windir%\system32\jscript.dll 64 位系统:regsvr32 %windir%\SysWO ...
- cc2530启动流程---广播发送数据
//操作系统任务初始化 void osalInitTasks( void ) { uint8 taskID = ; // 分配内存,返回指向缓冲区的指针 tasksEvents = (uint16 * ...
- 转：Web测试需要了解的知识
这里只是介绍Web测试相对于其他类型软件的测试额外需要了解的内容,关于测试方法不是本文的重点,里面谈到的每一项在以后的文章中再说明.大家看到这些内容可能都不陌生,我晒出的内容也许不对或有误导,请大家指 ...
- Maven项目中提示：Eclipse “cannot be resolved to a type” error
我的解决办法是这个: 临时解决方法是:Clean项目 ********百度到的其他解决办法,统一归纳此处****************** (1)jdk不匹配(或不存在) 项目指定的jdk为“jdk ...
- web 开发：CSS3 常用属性——速查手册！
web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...
- 计算机学院大学生程序设计竞赛（2015’12） 1009 The Magic Tower
#include<cmath> #include<cstdio> #include<cstring> #include<algorithm> using ...
- 由获取子元素的方法find和children所获
html代码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- hibernate--多对一单向关联 (重点!!!)
一个用户组包含多个用户, 每个用户属于一个组. 一个人可以有多个车, 每个车属于一个人. 一个人有很多梦想, 一个特定的梦想属于一个人. 错误做法: person里 有 personid, perso ...
- linux undelete
http://www.tldp.org/HOWTO/archived/Ext2fs-Undeletion-Dir-Struct/index.html http://www.giis.co.in/deb ...
- iOS开发——二级列表
原理很简单,一级菜单放在viewForHeaderInSection里面,加一个点击事件,然后判断它的二级菜单(cell)显不显示. 直接上代码吧! // // HeheTableViewContr ...