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、使用过滤器格式化数据

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

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

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

{{12.9 | currency}}

　　显示结果为：

$12.90

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

{{12.9 | currency | number : 0}}

　　显示结果为：

$13

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

 1 var homeModule = angular.module('HomeModule', []);
 2
 3 homeModule.filter('titleCase', function () {
 4     return function (input) {
 5         var words = input.split(' ');
 6         for (var i = 0; i < words.length; i++) {
 7             words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
 8         }
 9         return words.join(' ');
10     };
11 });
12
13 homeModule.controller('HomeController', function ($scope) {
14     $scope.pageHeading = 'behold the majesty of your page title';
15 });

　　简单的模板页面：

1 <html>
2     <body ng-app="HomeModule" ng-controller="HomeController">
3         <script src="../src/angular.js"></script>
4         <script src="filter.js"></script>
5         <h1>{{pageHeading | titleCase}}</h1>
6     </body>
7 </html>

　　显示结果如下：

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

转载于:https://www.cnblogs.com/JavaSubin/p/5517035.html

AngularJS 的常用特性（四）相关推荐

AngularJS 的常用特性（二）
3.列表.表格以及其他迭代型元素 ng-repeat可能是最有用的 Angular 指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝. 比如一个学生名册系统需要从服务器上获取学生信息,目前先把 ...
C++11特性及其它常用特性
文章目录 C++11特性及其它常用特性 1. explicit 关键字 2. 左值和右值的概念 3. 函数返回值当引用 4. C++11 新增容器 - array array容器概念 array特点 ...
常用的四种免费证书申请方式
免费申请证书的四种常用方式 1. Let's Encrypt 申请教程 2.Cloudflare 申请教程 3.FreeSSL 申请教程 4. 阿里云(云厂商提供)免费证书申请教程 1. Let's ...
Swfit 常用特性（Attribute）关键字
Swfit 常用特性(Attribute)关键字 Swift中的Attribute相当于Java中的注解,但是可惜的是目前Swift不支持自定义Attribute Swfit的特性关键字一般用于声明或 ...
Vue常用特性——表单操作、表单域修饰符（number：转化为数值；trim：去掉开始和结尾的空格； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令
Vue常用特性常用特性概览 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
最短路常用的四种模板（poj1847）
针对于poj1847这道题,总结一下最短路常用的四种模板. ** Floyed(O(n^3)) ** #include<iostream> #include<cstdio> # ...
51单片机下载完程序后不亮_程序如何下载到单片机中？单片机常用的四种烧写程序方式介绍...
单片机是一种可编程控制器,搭好硬件电路后,可以利用程序实现很多非常复杂的逻辑功能,与纯硬件电路相比,简化了硬件外围的设计.方便了逻辑的设计.丰富了逻辑的输出.不同厂家的单片机需要不同编程IDE来实现编 ...
【温故知新】——原生js中常用的四种循环方式
一.引言本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
vue-day02-vue常用特性
文章目录 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 compute ...
pytorch梯度下降函数_Pytorch中常用的四种优化器SGD、Momentum、RMSProp、Adam
来源:AINLPer微信公众号编辑: ShuYini 校稿: ShuYini 时间: 2019-8-16 引言很多人在使用pytorch的时候都会遇到优化器选择的问题,今天就给大家介绍对比 ...

AngularJS 的常用特性（四）

AngularJS 的常用特性（四）相关推荐

最新文章

热门文章