11、使用 Module(模块) 组织依赖关系

　　Angular 里面的模板，提供了一种方法，可以用来组织应用中一块功能区域的依赖关系；同时还提供了一种机制，可以自动解析依赖关系（又叫依赖注入），一般来说，我们把这些叫做依赖服务，因为它们会负责为应用提供特殊的服务。

　　例如，如果购物站点中的一个控制器需要从服务器中获取一个商品列表 Items，来处理从服务器获取商品的工作。进而，Items 对象就需要以某种方式与服务器上的数据库进行交互，可以通过 XHR 或者 WebSocket。

　　如果，在没有模块的情况下，那么代码看起来就像下面这样：

function ItemsViewController($scope) {
    // 向服务器发起请求
    ...
    // 解析响应并放入 Item 对象
    ...
    // 把 Items 数组设置到 $scope 上，这样视图才能够显示它
    ...
}

　　虽然这么做可以运行，但是存在一些潜在的问题：

  • 如果其他控制器也需要从服务器获取 Items，那么我们只能把这段代码重写一遍，代码维护工作增大难度；
  • 加上其他的一些因素，例如服务器认证、解析数据的复杂性，会使控制器对象很难划分出一个合理的功能边界，并且代码阅读起来更加困难；
  • 增加单元测试的难度，要测试这段代码，必须启动一个真正的服务器。

　　利用模块和模块内置的依赖注入功能，我们可以把控制器写得更加简单，示例如下：

function ShoppingController($scope, Items) {
    $scope.items = Items.query();
}

　　这样会很简单而且方便，只需要把 Items 对象定义成了一个服务。

　　服务都是单例的对象，Angular 内置了很多服务，例如 $location 服务，用来和浏览器的地址栏进行交互；$route 服务，用来根据 URL 地址的变化切换视图；还有 $http 服务，用来和服务器进行交互。

　　你也可以自定义自己的服务，但最好不要以 $ 开头，因为 Angular 内置的服务是以 $ 符号开头的，以免引起冲突。

　　你可以使用模型对象的 API 来定义服务，如下表格：

　　——————————————————————————————————————————————————————————————————————

　　函数　　　　　　　　　　　　　　　　　　　　 |  定义
　　——————————————————————————————————————————————————————————————————————

　　provider(name, Object OR constructor())　  |　一个可配置的服务，如果你传递了一个 Object 作为参数，那么该对象必须带有一个名为 $get 的函数，

　　　　　　　　　　　　　　　　　　　　　　　　 |  该函数需要返回服务的名称。否则，认为你传递的是一个构造函数，调用构造函数会返回服务实例对象。

　　——————————————————————————————————————————————————————————————————————

　　factory(name, $getFunction())　　　　　　   |  一个不可配置的服务，需要你指定一个函数，当调用这个函数的时候，会返回服务的实例。

　　　　　　　　　　　　　　　　　　　　　　　　 |  可以用把它看成 provider (name, { $get: $getFunction()}) 的形式

　　——————————————————————————————————————————————————————————————————————

　　service(name, constructor())　　　　　　　　|  一个不可配置的服务，与上面 provider 函数的constructor 参数类似，调用它可以创建服务实例

　　——————————————————————————————————————————————————————————————————————

　　下面用 factory() 的方式编写服务：

 // 创建一个模型用来支撑我们的购物视图
 var shoppingModule = angular.module('ShoppingModule', []);

 // 设置好服务工厂，用来创建我们的 Items 接口，以便访问服务端数据库
 shoppingModule.factory('Items', function () {
     var items = {};
     items.query = function () {
         return [
             {title: 'Paint', description: 'Pots full of paint', price: 3.95},
             {title: 'Polka', description: 'Dots with polka', price: 2.95},
             {title: 'Pebbles', description: 'Just little rocks', price: 6.95}
         ];
     };
     return items;
 });

　　控制器就很简单了，但是需要注入 Items 对象：

 shoppingModule.controller('ShoppingController', function ($scope, Items) {
     $scope.items = Items.query();
 });

　　页面可以写个很简单的如下：

 <html ng-app="ShoppingModule">
     <body ng-controller="ShoppingController">
         <script src="../src/angular.js"></script>
         <script src="factory.js"></script>
         <h1>Shop!</h1>
         <table>
             <tr ng-repeat="item in items">
                 <td>{{item.title}}</td>
                 <td>{{item.description}}</td>
                 <td>{{item.price | currency}}</td>
             </tr>
         </table>
     </body>
 </html>

　　效果如下：

　　

12、使用过滤器格式化数据

　　你可以用过滤器来声明应该如何变换数据格式，然后再显示给用户，只要在模板中使用一个插值变量即可，过滤器的语法如下：

{{ expression | filterName : parameter1 : ... parameterN}}

　　Angular 的内置过滤器，比如 currency：

{{12.9 | currency}}

　　显示结果为：

$12.90

　　还有其他过滤器，比如 date、number、uppercase 等，可以连用：

{{12.9 | currency | number : 0}}

　　显示结果为：

$13

　　当然，我们经常需要自定义过滤器，比如我们需要为标题文字创建首字母大写的字符串，编写过滤器如下：

 var homeModule = angular.module('HomeModule', []);

 homeModule.filter('titleCase', function () {
     return function (input) {
         var words = input.split(' ');
         for (var i = 0; i < words.length; i++) {
             words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
         }
         return words.join(' ');
     };
 });

 homeModule.controller('HomeController', function ($scope) {
     $scope.pageHeading = 'behold the majesty of your page title';
 });

　　简单的模板页面：

 <html>
     <body ng-app="HomeModule" ng-controller="HomeController">
         <script src="../src/angular.js"></script>
         <script src="filter.js"></script>
         <h1>{{pageHeading | titleCase}}</h1>
     </body>
 </html>

　　显示结果如下：

　　

特别感谢：《用 AngularJS 开发下一代 Web 应用》

AngularJS 的常用特性（四）的更多相关文章

  1. AngularJS 的常用特性（五）

    13.使用路由和 $location 切换视图 对于一些单页面应用来说,有时候需要为用户展示或者隐藏一些子页面视图,可以利用 Angular 的 $route 服务来管理这种场景. 你可以利用路由服务 ...

  2. AngularJS 的常用特性（一）

    前言:AngularJS 是一款来自 Google 的前端 JS 框架,该框架已经被应用到了 Google 的多款产品中,这款框架最核心特性有:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...

  3. AngularJS 的常用特性（三）

    6.表达式  在模板中使用表达式是为了以充分的灵活性在模板.业务逻辑和数据之间建立联系,同时又能避免让业务逻辑渗透到模板中. <div ng-controller="SomeContr ...

  4. AngularJS 的常用特性（二）

    3.列表.表格以及其他迭代型元素 ng-repeat可能是最有用的 Angular 指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝. 比如一个学生名册系统需要从服务器上获取学生信息,目前先把 ...

  5. AngularJS 最常用的几种功能

    AngularJS 最常用的几种功能 2017-04-13 吐槽阿福 互联网吐槽大会 第一 迭代输出之ng-repeat标签ng-repeat让table ul ol等标签和js里的数组完美结合 1 ...

  6. Unity3D编辑器扩展（五）——常用特性（Attribute）以及Selection类

    前面写了四篇关于编辑器的: Unity3D编辑器扩展(一)——定义自己的菜单按钮 Unity3D编辑器扩展(二)——定义自己的窗口 Unity3D编辑器扩展(三)——使用GUI绘制窗口 Unity3D ...

  7. Vue的常用特性

    Vue的常用特性 一.表单基本操作 都是通过v-model 单选框 1. 两个单选框需要同时通过v-model 双向绑定 一个值 2. 每一个单选框必须要有value属性 且value值不能一样 3. ...

  8. Java8新特性—四大内置函数式接口

    Java8新特性--四大内置函数式接口 预备知识 背景 Lambda 的设计者们为了让现有的功能与 Lambda 表达式良好兼容,考虑了很多方法,于是产生了函数接口这个概念. 什么是函数式接口? 函数 ...

  9. 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

随机推荐

  1. CentOS 系统状况查看

    1 磁盘 iostat    安装 yum install sysstat iostat -x Linux -.el7.x86_64 (sdw2) 2017年03月07日 _x86_64_ ( CPU ...

  2. scvmm sdk之powershell（一）

    shell表示计算机操作系统中的壳层,与之相对的是内核,内核不能与用户直接交互,而是通过shell为用户提供操作界面,shell分为两类,一种提供命令行界面,一种提供图形界面.windows powe ...

  3. 强制TFS用户与计算机（域）用户同步

    默认情况下,添加到域AD组中的账户不会立刻同步到TFS中. TFS每小时与域控制器同步一次,将计算机安全组中的账户添加到TFS中. 但是可以通过下面几种方式强制TFS立刻同步域中的账户: 1. 在TF ...

  4. solr特点三: 基于Solr实现排序定制化参考

    排序实现有N种形式,最低成本.最快响应时间是目标 一份索引,支持N种排序策略并且在线互不干扰是要考虑的每一种实现,处理的场景是不同的,不要千篇一律 020排序,从索引到效果,有不少坑,这篇文章没有细说 ...

  5. django drf 改变retrive的pk查询字段

    lookup_filed可以改变retrive查询时默认以pk查询的逻辑 from django.shortcuts import render from rest_framework import ...

  6. php foreach 遍历细节探讨

    foreach 也是正常的语法循环结构,可以有 break 和 continue 等操作 遍历过程中值变量传递默认是值传递 输出结果为: 遍历过程中值变量可以认为设定为引用传递:foreach($数组 ...

  7. TestNG学习笔记目录

    学习TestNG主要用于GUI自动化测试使用,学习目录随进度不断更新.文档内容主要是翻译官方doc,同时加入自己的理解和案例.如有理解偏差欢迎指正 一.TestNG Eclipse plug-in 安 ...

  8. Java50道经典习题-程序8 输入数字求和

    题目:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字.例如2+22+222+2222+22222(此时共有5个数相加),几个数相加有键盘控制. 分析:关键是计算出每一项的值. i ...

  9. python--类的约束,异常处理,MD5加密,日志处理logging模块

    1.类的约束 在开发中,如果项目经理需要对类进行约束,可以有两种方式 1. 对子类进行约束 Base: #对子类进行约束,必须重写这个方法 # 在工作中发现了NotImplementedError之后 ...

  10. “全栈2019”Java第九十七章：在方法中访问局部内部类成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...