本篇介绍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里的'服务'的更多相关文章
	

    
								
  1. python3.4学习笔记(十五) 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）
		
    python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...
    
		
    2. 
						
  2. (转载)西门子PLC学习笔记十五-（数据块及数据访问方式）
		
    一.数据块 数据块是在S7 CPU的存储器中定义的,用户可以定义多了数据块,但是CPU对数据块数量及数据总量是有限制的. 数据块与临时数据不同,当逻辑块执行结束或数据块关闭,数据块中的数据是会保留住的 ...
    
		
    3. 
						
  3. (C/C++学习笔记) 十五. 构造数据类型
		
    十五. 构造数据类型 ● 构造数据类型概念 Structured data types 构造数据类型 结构体(structure), 联合体/共用体 (union), 枚举类型(enumeration ...
    
		
    4. 
						
  4. angular学习（十五）——Provider
		
    转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/60966263 Provider简单介绍 每一个web应用都是由多个对象协作完毕 ...
    
		
    5. 
						
  5. 【转】angular学习笔记(十四)-$watch(1)
		
    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
    
		
    6. 
						
  6. angular学习笔记(十四)-$watch(1)
		
    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
    
		
    7. 
						
  7. angular学习笔记(十九)-指令修改dom
		
    本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...
    
		
    8. 
						
  8. angular学习笔记(十六) -- 过滤器(2)
		
    本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...
    
		
    9. 
						
  9. angular学习笔记(十六) -- 过滤器(1)
		
    本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. POJ - 1325 Machine Schedule 二分图 最小点覆盖
			
    题目大意:有两个机器,A机器有n种工作模式,B机器有m种工作模式,刚開始两个机器都是0模式.假设要切换模式的话,机器就必须的重新启动 有k个任务,每一个任务都能够交给A机器的i模式或者B机器的j模式完 ...
    
			
    2. 
						
  2. Linux高级权限管理
			
    传统的UGO(rwx-wx-wx)权限模型,无法解决当多个组需要对一个文件执行某些权限的问题. ACL :访问控制列表access control list一种高级的权限机制,允许我们对文件或者文件夹 ...
    
			
    3. 
						
  3. 发现linux shell中$0,$?,$!等的特殊用法
			
    记录下linux shell下的特殊用法及参数的说明 变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行的命令的结束代 ...
    
			
    4. 
						
  4. SVN如何查看修改的文件记录
			
    主要是有四个命令,svn log用来展示svn 的版本作者.日期.路径等等:svn diff,用来显示特定修改的行级详细信息:svn cat,取得在特定版本的某文件显示在当前屏幕:svn  list, ...
    
			
    5. 
						
  5. 减小App包的大小
			
    检查.ipa文件 首先获得app的ipa文件. 将ipa文件的后缀改为.zip,解压得到包内容. 查看资源文件哪个最大.然后试着对最大的文件即可处理 图片 尽量使用8-bit图片 使用8-bit的PN ...
    
			
    6. 
						
  6. 〖Linux〗clang3.4的编译与安装
			
    1. 编译与安装clang3.4 sudo apt-get install -y g++ subversion cmake cd ~ mkdir Clang && cd Clang s ...
    
			
    7. 
						
  7. DIV+CSS布局重新学习之css控制ul li实现2级菜单
			
    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
    
			
    8. 
						
  8. 实践：由0到1-无线大数据UX团队的成长
			
    背景 大数据产品的在项目成立之初,采用的是模仿原有网优工具的方式做UI设计,由BA主导画草图.手绘线框图.excel制作,更有直接打开参考产品做原型的方式,没有统一的设计和规范可言.随着团队逐渐增多. ...
    
			
    9. 
						
  9. PHP中的密码加密的解决方案
			
    层出不穷的类似事件对用户会造成巨大的影响,因为人们往往习惯在不同网站使用相同的密码,一家“暴库”,全部遭殃 一般的解决方案 1.将明文密码做单向hash $password = md5($_POST[ ...
    
			
    10. 
						
  10. MSSQL-SQL SERVER还原与备份(导入与导出)
			
    备份: 使用Microsoft SQL Server Management Studio查询出想要的列和结果, 在结果处左上角点击, 软件会自动选中查询出的所有结果, 然后右键"将结果另存为 ...
    
			
    11.