angular学习笔记(十五)-module里的'服务'
本篇介绍angular中的模块:module
在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' 功能:
什么是 '服务' 呢? 看一下下面这个例子:
比如一个购物车的应用:
function ItemsViewController($scope){
//向服务器发起请求
//解析响应,获得数据
$scope.items = 获得的数据;
}
那么,如果我在其它的控制器里也需要同样的一组数据,那么,我还得在另外的控制器里写一遍一样的代码,用于获取这组数据,
这样不利于维护修改,因此,我们就可以把 '获取这一段数据' 这个功能给封装成一个 '服务' , 这样就可以在多个不同的控制器中使用它.
function ItemsViewController($scope,Items){
$scope.items = Items.query();
}
比如这里的Items就是一个被封装好的 '服务' .
下面来看看如果创建服务:
1. 首先要创建一个模块:
var SomeModule = angular.module('ModuleName',[])
2. 然后通过以下三种api来创建服务:
①SomeModule.provider(name,Object || constructor())
②SomeModule.factory(name,$get Function())
③SomeModule.service(name,constructor())
其中第一个参数应该是字符串形式,定义的是服务的名字
第二个参数需要通过例子来理解... 而且后面还会有详解.在这里先不介绍
最后使用'服务'来完成购物车的例子:
<!DOCTYPE html>
<html ng-app="shoppingCart">
<head>
<title>12.1module模块组织依赖关系</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="CartController">
<h1>your shopping cart</h1>
<table>
<tr ng-repeat="item in items">
<td>{{item.title}}</td>
<td><input ng-model="item.quantity"/></td>
<td>{{item.price|currency}}</td>
<td class="red">{{item.price*item.quantity|currency}}</td>
<td><button ng-click="remove($index)">remove</button></td>
</tr>
</table>
<hr>
<table>
<tr>
<td>总价: <span class="del">{{bill.all|currency}}</span></td>
</tr>
<tr>
<td>折扣: <span class="red">{{bill.discount|currency}}</span></td>
</tr>
<tr>
<td>现价: <span class="green">{{bill.now|currency}}</span></td>
</tr>
</table>
</div>
</body>
</html>
var shoppingCart = angular.module('shoppingCart',[]);
shoppingCart.factory('Items',function(){
var items = {};
//这段数据实际应该是从数据库拉取的
items.query = function(){
return [
{"title":"兔子","quantity":1,"price":"100"},
{"title":"喵","quantity":2,"price":"200"},
{"title":"狗只","quantity":1,"price":"400"},
{"title":"仓鼠","quantity":1,"price":"300"}
]
};
return items;
});
shoppingCart.controller('CartController',function($scope,Items){
$scope.items = Items.query();
$scope.remove = function(index){
$scope.items.splice(index,1)
};
$scope.bill = {
"all":0,
"discount":0,
"now":0
};
$scope.compute = function(){
var total = 0;
for(var i=0; i<$scope.items.length; i++){
total += $scope.items[i].quantity*$scope.items[i].price;
}
$scope.bill.all = total;
$scope.bill.discount = total >= 500 ? total*0.1 : 0 ;
$scope.bill.now = $scope.bill.all - $scope.bill.discount
};
$scope.$watch('items',$scope.compute,true);
});
1. var shoppingCart = angular.module('shoppingCart',[]);
注意, 第一个shoppingCart 是模型变量名,下面的factory和controller,都是该模型下的方法.第二个shoppingCart是模型的名字,在ng-app后面使用
2.shoppingCart.factory('Items',function(){
...
return items;
});
Items就是服务的名字
第二个参数是一个函数,在调用这个服务的时候,就会执行该函数,然后把函数的返回值传到控制器中
shoppingCart.controller('CartController',function($scope,Items){
$scope.items = Items.query();
});
这里在控制器中传入的Items就是factory中第二个参数的函数的返回值
注意,当Items被注入到其它地方的时候,注入的结果是items,而不是定义Items的时候的那个function
3. shoppingCart.controller('CartController',function($scope,Items){
$scope.items = Items.query();
...
}); 通过controller方法,在shoppingCart模型下创建一个名为CartController的控制器,传入Items服务
其余的控制器写法都和原来一样,只是原来的items改为通过Items服务来获取数据 4. 其实$scope也是服务,是angular内置的服务,还有$location,$route,$http等... angular内置的服务,都是用$开头,因此,自定义的服务,最好不要使用$开头.
5. 控制器中传入服务作为参数,是没有顺序的,是根据名字来的.以下两种写法运行结果是一致的:
shoppingCart.controller('CartController',function($scope,Items){...});
shoppingCart.controller('CartController',function(Items,$scope){...});
angular学习笔记(十五)-module里的'服务'的更多相关文章
- python3.4学习笔记(十五) 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）
python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...
- (转载)西门子PLC学习笔记十五-（数据块及数据访问方式）
一.数据块 数据块是在S7 CPU的存储器中定义的,用户可以定义多了数据块,但是CPU对数据块数量及数据总量是有限制的. 数据块与临时数据不同,当逻辑块执行结束或数据块关闭,数据块中的数据是会保留住的 ...
- (C/C++学习笔记) 十五. 构造数据类型
十五. 构造数据类型 ● 构造数据类型概念 Structured data types 构造数据类型 结构体(structure), 联合体/共用体 (union), 枚举类型(enumeration ...
- angular学习（十五）——Provider
转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/60966263 Provider简单介绍 每一个web应用都是由多个对象协作完毕 ...
- 【转】angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十九)-指令修改dom
本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...
- angular学习笔记(十六) -- 过滤器(2)
本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...
- angular学习笔记(十六) -- 过滤器(1)
本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...
随机推荐
- js replace 如何替换字符串中的最后一个匹配项
1.正则表达时,贪婪模式,.*会一直匹配到最后一个 // 验证 let str = "123[空]345[空]789[空]0"; let res = str.replace(/(. ...
- 替换 ionic 中的 图标
第一步,你把你的项目的SVG文件跟你自己做的图标的SVG文件都上到icomoon.io/app(上传方式上节已经讲过了,不会的翻下上节内容),会看到这么界面 第二步,点击下载后,出现这个页面,修改前缀 ...
- ftpclient 编码备忘
if (FTPReply.isPositiveCompletion(ftpClient.sendCommand("OPTS UTF8", "ON"))) {// ...
- Ubuntu解压缩zip,tar,tar.gz,tar.bz2
ZIP zip可能是目前使用得最多的文档压缩格式.它最大的优点就是在不同的操作系统平台,比如Linux, Windows以及Mac OS,上使用.缺点就是支持的压缩率不是很高,而tar.gz和tar. ...
- TestNG方法測试及注意要点 代码及配置具体解释(解决testng方法不运行问题)
教你解决为什么TestNG中方法加了@Test注解,也在配置文件里配置了,可是方法就是不运行! 在使用TestNG进行測试时,使用配置文件的方式更easy于维护.可是常常遇到明明方法写了也配置运行了, ...
- atitit.提升开发效率---MDA 软件开发方式的革命(3)----自己主动化建表
atitit.提升开发效率---MDA 软件开发方式的革命(3)----自己主动化建表 1. 建模在后自己主动建表 1 1. 传统上,须要首先建表,在业务编码.. 1 2. 模型驱动建表---很多其它 ...
- Hystrix的一个坑，queue中的run方法没有被执行？
今天学的时候随手测了一下Hystrix的queue的异步执行,发现执行queue之后,还没有打印run方法中的内容,程序就结束了: import com.netflix.hystrix.Hystrix ...
- 【TP3.2】模块化设计，新建Admin模块
1.模块化: Application 默认应用目录(可以设置) ├─Common 公共模块(不能直接访问) ├─Home 前台模块 ├─Admin 后台模块 ├─... 其他更多模块 ├─Runtim ...
- @NotEmpty、@NotNull 和 @NotBlank 的区别
1. 三者主要区别如下: @NotEmpty :用于集合类,不能为null,且size>0 @NotNull:不能为null,但可以为empty,没有size的约束 @NotBlank:只用于S ...
- HDUOJ------1058 Humble Numbers
Humble Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...