AngularJS系统学习之Factory，Service， Provider（工厂，服务，供应者）
本文转自：http://blog.csdn.net/zcl_love_wx/article/details/51404390
我看过敲过代码之后， 有了很深的理解， 这三个东西其实都是用来返回对象的。 但是应用上有所不同。
下面是讲述不同的主要内容：
1.factory
factory方式创建的服务，作用就是返回一个有属性有方法的对象。相当于：var f = myFactory();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{r}}</p>
</div> <script>
//创建模型
var app = angular.module('myApp', []); //通过工厂模式创建自定义服务
app.factory('myFactory', function() {
var service = {};//定义一个Object对象'
service.name = "张三";
var age;//定义一个私有化的变量
//对私有属性写getter和setter方法
service.setAge = function(newAge){
age = newAge;
}
service.getAge = function(){
return age;
}
return service;//返回这个Object对象
});
//创建控制器
app.controller('myCtrl', function($scope, myFactory) {
myFactory.setAge(20);
$scope.r =myFactory.getAge();
alert(myFactory.name);
});
</script>
</body>
</html>
在自定义服务里注入服务示例，但不能注入$scope作用域对象
<script>
var app = angular.module('myApp', []);
app.factory('myFactory', function($http,$q) {
var service = {};
service.name = "张三";
//请求数据
service.getData = function(){
var d = $q.defer();
$http.get("url")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
d.reject("error");
});
return d.promise;
}
return service;
});
app.controller('myCtrl', function($scope, myFactory) {
//alert(myFactory.name);
myFactory.getData().then(function(data){
console.log(data);//正确时走这儿
},function(data){
alert(data)//错误时走这儿
});;
});
</script>
2.service
通过service方式创建自定义服务，相当于new的一个对象：var s = new myService();，只要把属性和方法添加到this上才可以在controller里调用。
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{r}}</h1>
</div>
<script>
var app = angular.module('myApp', []); app.service('myService', function($http,$q) {
this.name = "service";
this.myFunc = function (x) {
return x.toString(16);//转16进制
}
this.getData = function(){
var d = $q.defer();
$http.get("ursl")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
alert(0)
d.reject("error");
});
return d.promise;
}
});
app.controller('myCtrl', function($scope, myService) {
$scope.r = myService.myFunc(255);
myService.getData().then(function(data){
console.log(data);//正确时走这儿
},function(data){
alert(data)//错误时走这儿
});
});
</script>
3.provder
只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前，先进行模块范围的配置，那就应该选择 provider。需要注意的是：在config函数里注入provider时，名字应该是：providerName+Provider.
使用Provider的优点就是，你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。
当你使用Provider创建一个service时，唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。
<body>
<div ng-app="myApp" ng-controller="myCtrl">
</div> <script>
var app = angular.module('myApp', []); //需要注意的是：在注入provider时，名字应该是：providerName+Provider
app.config(function(myProviderProvider){
myProviderProvider.setName("大圣");
});
app.provider('myProvider', function() {
var name="";
var test={"a":1,"b":2};
//注意的是，setter方法必须是(set+变量首字母大写)格式
this.setName = function(newName){
name = newName
} this.$get =function($http,$q){
return {
getData : function(){
var d = $q.defer();
$http.get("url")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
d.reject("error");
});
return d.promise;
},
"lastName":name,
"test":test
}
} });
app.controller('myCtrl', function($scope,myProvider) {
alert(myProvider.lastName);
alert(myProvider.test.a)
myProvider.getData().then(function(data){
//alert(data)
},function(data){
//alert(data)
});
});
</script>
</body>
4.在过滤器中注入自定义服务
<body>
<div ng-app="myApp">
在过滤器中使用服务:
<h1>{{255 | myFormat}}</h1>
</div> <script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
</body>
AngularJS系统学习之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 ...
- AngularJS系统学习之Module（模块）
本文源自:http://blog.csdn.net/woxueliuyun/article/details/50962645 学习之后略有所得, 来此分享.建议看原文. 模块是提供一些特殊服务的功能块 ...
- AngularJS Factory Service Provider
先看看http://www.cnblogs.com/mbydzyr/p/3460501.html http://www.oschina.net/translate/angularjs-factory- ...
- angular factory Services provider 自定义服务 工厂
转载于 作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...
- AngularJS中serivce，factory，provider的区别
一.service引导 刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别.This is whe ...
- AngularJS系统学习之Scope（作用域）
本文出自:https://www.w3ctech.com/topic/1611 看完了没怎么懂, 也许是和别人 原文作者: Nicolas Bhttps://www.w3ctech.com/topi ...
随机推荐
- Linux的基本使用
检测某个地址是否可以通信:ping xx.xx.xx.xx 检测某个端口是否开启:telnet xx.xx.xx.xx port 端口:用来区别不同服务 常用命令: 创建一个目录 /data mkdi ...
- 基于websocket实现的web聊天室
# -*- coding:utf-8 -*- import socket import base64 import hashlib def get_headers(data): "" ...
- 数据库中表的复杂查询&分页
一.数据库中表的复杂查询 1)连接查询 1.0连接的基本的语法格式: from TABLE1 join_type TABLE2 [on (join_condition)][where (query_c ...
- Struts2拦截器 解决登录问题
一.了解Struts2 拦截器[Interceptor] 拦截器的工作原理如图 拦截器是由每一个action请求(request)都包装在一系列的拦截器的内部,通过redirectAction再一次 ...
- 左儿子右兄弟Trie UVA 11732 strcmp() Anyone?
题目地址: option=com_onlinejudge&Itemid=8&category=117&page=show_problem&problem=2832&qu ...
- Hybrid--WebView中使用Ajax
Hybrid框架下的app,使用的Ajax.须要注意的是UIWebViewDelegate不会监測到Ajax的request.也就是再运行Ajax代码时.shouldStartLoadWithReuq ...
- [不好分类]iphone手机激活错误的处理过程
同事一台iphone 6s手机,重启后显示无法激活.(欢迎访问viphhs,欢迎转载.https://www.cnblogs.com/viphhs) 百度后尝试更换了手机卡,重新连接wifi,都不能恢 ...
- 【BZOJ3782】上学路线 组合数+容斥+CRT
[BZOJ3782]上学路线 Description 小C所在的城市的道路构成了一个方形网格,它的西南角为(0,0),东北角为(N,M).小C家住在西南角,学校在东北角.现在有T个路口进行施工,小C不 ...
- 2015年度新增开源软件排名TOP 100，EasyDarwin开源流媒体服务器排名第17
本榜单包含 2015 年开源中国新收录的 5977 款开源软件中,根据软件本身的关注度.活跃程度进行排名前 100 名的软件.从这份榜单中或许可以了解到最新业界的趋势. 榜单详情:http://www ...
- Python yield 生成器
yield:生成器 任何使用yield的函数都称之为生成器,如: def count(n): : yield n #生成值:n 另外一种说法:生成器就是一个返回迭代器的函数,与普通函数的区别是生成 ...