AngularJS 中的常用特性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS 中的常用特性相关的知识,希望对你有一定的参考价值。

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() 的方式编写服务:

 1 // 创建一个模型用来支撑我们的购物视图
 2 var shoppingModule = angular.module(‘ShoppingModule‘, []);
 3 
 4 // 设置好服务工厂,用来创建我们的 Items 接口,以便访问服务端数据库
 5 shoppingModule.factory(‘Items‘, function () {
 6     var items = {};
 7     items.query = function () {
 8         return [
 9             {title: ‘Paint‘, description: ‘Pots full of paint‘, price: 3.95},
10             {title: ‘Polka‘, description: ‘Dots with polka‘, price: 2.95},
11             {title: ‘Pebbles‘, description: ‘Just little rocks‘, price: 6.95}
12         ];
13     };
14     return items;
15 });

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

1 shoppingModule.controller(‘ShoppingController‘, function ($scope, Items) {
2     $scope.items = Items.query();
3 });

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

 1 <html ng-app="ShoppingModule">
 2     <body ng-controller="ShoppingController">
 3         <script src="../src/angular.js"></script>
 4         <script src="factory.js"></script>
 5         <h1>Shop!</h1>
 6         <table>
 7             <tr ng-repeat="item in items">
 8                 <td>{{item.title}}</td>
 9                 <td>{{item.description}}</td>
10                 <td>{{item.price | currency}}</td>
11             </tr>
12         </table>
13     </body>
14 </html>

  效果如下:

  技术分享

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

 

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

以上是关于AngularJS 中的常用特性的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 中的常用特性

AngularJS 中的常用特性

AngularJS 的常用特性

AngularJS入门学习笔记一

浅谈AngularJS中的$parse和$eval

Unity常用标签