本篇介绍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. MongoDB删除数据库
			
    > db.dropDatabase()
    
			
    2. 
						
  2. ubuntu 下安装摄像头驱动
			
    sudo apt-get install cheese sudo apt-get install camorama 然后可以打开应用cheese,观察可以得到图像. 也可以通过代码获取图像.pytho ...
    
			
    3. 
						
  3. How to set up OpenERP for various timezone kindly follow the following steps to select timezone in OpenERP
			
        How to set up OpenERP for different Time Zones Click on the "Edit Preferences" wheel a ...
    
			
    4. 
						
  4. 使用Nginx Upstream 部署 OpenERP
			
    Openerp 6.1 使用werkzeug 作为web服务的框架,性能比之前的cherrypy 有了很大的改善.但无论是 werkzeug 还是cherrypy ,都不是专门的web服务器.通常的做 ...
    
			
    5. 
						
  5. ajax-原理分析
			
      createTime--2016年9月19日13:59:11Author:Marydon参考链接 http://blog.csdn.net/csh624366188/article/details ...
    
			
    6. 
						
  6. 简单的 Helper 封装 -- SecurityHelper 安全助手：封装加密算法（MD5、SHA、HMAC、DES、RSA）
			
    using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Wen. ...
    
			
    7. 
						
  7. PHP-Open Flash Chart注意事项
			
    1.在html页面必须src正确的swfobject.js的路径(可以用Firebug查看绝对路径是否正确) 2.在html页面必须指定正确的swfobject使用时的open-flash-chart ...
    
			
    8. 
						
  8. HDUOJ----2647Reward
			
    Reward Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
    
			
    9. 
						
  9. iphone 如何给cydia添加中文源和威锋源
			
    http://zhidao.baidu.com/question/270663590.html英文的也没关系, 步骤是这样的, 1. 打开Cydia, 下面有五个项目, 然后选倒数第二个manage, ...
    
			
    10. 
						
  10. .NET压缩图片保存
			
    需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用的 1.1的版本 效果:  ...
    
			
    11.