07模块-AngularJS基础教程

深藏阁楼爱情的钟 2022-08-07 14:49 211阅读 0赞

# 0. 目录 #

*  目录
 *  前言
 *  正文
    
     *  1 为什么使用模块化-Why use Angular modules
     *  2 创建应用模块-Creating the application module
     *  3 加载应用模块-Loading the application module
     *  4 定义控制器-Defining a controller
     *  5 链式定义-Chaining definitions
     *  6 加载模块-Loading modules
     *  7 结论
 *  声明

# 1. 前言 #

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了，所以AngularJS做了一些工作来来解决静态网页技术在构建动态应用上的不足。

AngularJS的初衷是为了**简化web APP开发**，精髓是**简单**。但是国内外有很多AngularJS的教程，都着重讲AngularJS的强大之处，从而增加了AngularJS学习的难度，本教程试图用通俗的语言讲解**最为基础**、**最为实用**的内容，***简化学习进程、降低学习难度***是本教程的初衷。

本系列教程以**翻译*Chris Smith***的[**Angualr Basics**][Angualr Basics]为梗概，融合博主自己的理解，为大家提供一个***简单明了***的学习教程。

本文为系列教程第7篇模块，翻译自[**Modules**][Modules]。

1.  序
2.  引言-Introduction
3.  基础-Basics
4.  控制器-Controllers
5.  作用域-Scopes
6.  集合-Collections
7.  ***模块-Modules***
8.  依赖注入-Dependency Injection
9.  服务-Services
10. 过滤器-Filters
11. 指令-Directives
12. 指令作用域-Directive Scopes
13. 路由-Routing
14. 通信-HTTP
15. 结论

# 2.正文 #

总的来说，模块（modules）的目的是通过定义公共APIs、限制行为（功能）和数据（属性和变量）的可视化实现**关注点分离**(separation of concerns，soc)。大部分的编程平台内置了对模块化的支持，以致于我们会觉得理所当然而无所察觉。但是客户端javascript没有支持，对附加的解决方案(例如[CommonJS][]、[AMD][])的好处和坏处也进行了诸多争论。

需要注意的是，Angular的模块化系统不是模块化加载（它不从文件或internet加载源码），Angular提供的是内置的、私有的模块化方案工作原理类似于其内置的、私有的依赖注入方案，两个系统提供了令人印象深刻的通用基础设施。尽管使用模块化功能是每个开发者的需要掌握的内在能力，但问题是，为什么我们需要？

尽管模块化和依赖注入通常是**必要**命题，但是其实Angular允许我们不使用模块实现很多事情。截止目前，我们已经完成了一系列通过构造函数（在全局作用域定义和控制器一样名称的函数）不用模块的案例。通过一点简单的设置，ng-controller指令在全局范围和模块化系统中查找控制器函数，允许我们使用简化的方法使用Angular，但仅仅是一定程度上。

## 2.1 为什么使用模块化-Why use Angular modules? ##

为了我们可以在Angular基础特性之后走的更远，我们需要精通它的模块化系统。相对于JS对象的管理复杂性问题来说，我们应该使用简单的方法解决问题，寻找您自己的最佳实践，因此本书不想详细介绍模块化和依赖注入的本质特性，只介绍跟Angular使用密切相关的模块和依赖注入的内容。

因此，让我们审视下必须使用Angular模块的重要特性：

*  **特殊组件-Specialized components**，在定义您自己的控制器、指令、过滤器和动画的时候，我们必须使用模块系统（控制器可能例外，前面已经说过）
 *  **依赖注入-Dependency injection**，尽管服务是普通的JS对象和函数， 但使用模块系统创建的服务可以简单地被随着依赖性注入，进行依赖注入。
 *  **外部模块-External modules**，Angular拥有非常吸引人的开发社区，海量免费的官方插件、第三方插件，如果您要在您的应用中使用这些库，我们就不得不用到模块系统。
 *  **加载时配置-Load-time configuration** ，Angular的模块系统提供了访问内部配置、插件配置的功能，我们将在最后一章**配置自定义HTTP头**的案例中演示后面一个特性。
 *  **测试-Testing**， Angular令人心动的测试功能基于依赖注入实现，同样离不开模块系统

下一章我们讲服务，主要演示如何为自定义JS组件定义提供支持。本章讲解如何定义控制器加载外部模块，同时为您讲解模块系统的基础。

## 2.2 创建应用模块-Creating the application module ##

一个Angular应用通常起始于一个根模块，在我们的案例中这个模块名字叫做app，**注意**，这个名字虽说常见，很多时候就是简单起见，未必是最好的选择。

/* module.js */
    angular.module('app', []);

在上面的案例中，需要特别注意**module**的第二个参数，尽管它看起来只是一个空的数组，但是它是非常重要的，如果您忽略它，`angular.module`的行为将产生根本改变。考虑到API的合理性设计， 当你指定第二个参数调用angular.module时，该方法处于创建模式，如果名为app的模块不存在，将创建一个名字为app的模块。但是调用`angular.module`时不指定第二个参数，它处于寻找模式，如果给定名称的模块存在将返回该模块，如果不存在将抛出错误，提醒我们注意第二个参数。该案例我们使用了正确的方式，但我们需要明白代码中的重要区别。这个参数用于导入外部模块，我们将会在angular动画模块时通过案例说明这一点。

## 2.3 加载应用模块-Loading the application module ##

在承载应用的HTML文档中，我们需要通过传递模块名称作为参数给`ng-app`指令告诉Angular加载应用模块。

<body ng-app="app">
      
    </body>

我们添加到应用模块中的任何组件都可以使用，让我们来看看如何使用模块定义一个控制器（不在使用全局的scope）。

## 2.4 定义控制器-Defining a controller ##

`module`API里面包含了定义特殊Angular组件的一些方法，截至目前我们比较熟悉的`controller`方法，我们使用`controller`方法创建控制器。首先我们需要取得一个应用模块的引用，同时我们需要给`angular.module`不指定第二个参数让它处于查询模式（主要是因为我们上文已经创建过应用模块了）。

/* message-controller.js */
    var app = angular.module('app');
    app.controller('MessageController', function($scope) { 
      $scope.message = "This is a model.";
    });

然后我们需要在调用`ng-app`的元素里面的某个位置，使用`ng-controller`调用我们的控制器。

<p ng-controller="MessageController"> { { message}} </p>

编译结果为：This is a model.

您已经看到了，使用模块定义控制器比全局scope的方式稍微麻烦点，但不至于太糟。

## 2.5 链式定义-Chaining definitions ##

假设我们需要定义如下的两个控制器

<p ng-controller="MessageController"> { { message}} </p> <p ng-controller="AnotherMessageController"> { { message}} </p>

`module`的定义方法可以是链式操作，这样我们可以在一个语句里定义两个控制器。

/* chained-controllers.js */
    angular.module('app')
      .controller('MessageController', function($scope) { 
        $scope.message = "This is a model.";
      })
      .controller('AnotherMessageController', function($scope) { 
        $scope.message = "This is another model.";
      });

编译结果为：  
This is a model.  
This is another model.

**注意**，第一个控制器的声明语句没有用分号结束。

如果你不喜欢链式操作风格，你可以随时检索调用模块，当然也可以存储在一个变量里（如下面代码所示）。如果您使用了变量，最好能够在[IIFE][]（立即调用函数表达式）或者其他闭包里避免污染全局变量。

/* separate-controllers.js */
    var app = angular.module('app');
    
    app.controller('MessageController', function($scope) { 
      $scope.message = "This is a model.";
    });
    
    app.controller('AnotherMessageController', function($scope) { 
      $scope.message = "This is another model.";
    });

选择哪种风格由您决定，不过链式风格更加流行些。

## 2.6 加载模块-Loading modules ##

`Animation`是Angular的一个新增特性，是一个名字叫做`ngAnimate`的独立模块。使用animations的第一步是引入包含模块，源文件中是Angular的核心部分，但是分发的时候以一个单独文件分发，如下所示。

是时候我们使用module方法的第二个数组参数了，前面的案例我们只是传递了一个空参数， 这次我们声明模块的依赖性。

/* ng-animate-module.js */
    angular.module('app', ['ngAnimate']);

这样，我们在应用中引入了ngAnimate。 模板中的ng-show、ng-hide、ng-class等指令将会在css和js里检测JS animation，也许会应用在类似于add、enter、leave、move、remove等DOM事件中 。在DOM事件中应用animation无需模板做任何改变（感觉像透明一样）， 如果动画代码没有呈现， 或者作为css或者作为js通过`[module.animation](http://docs.angularjs.cn/api/ng/type/angular.Module)`注册，指令代码还是普通代码。

<input type="checkbox" ng-model="showMessage">
    Check the box to show the message
    <h2 ng-show="showMessage">
      The secret message.
    </h2>

编译结果为：  
![这里写图片描述][20150419104316282]

单击上面的复选框，我们能够看到元素之间的显示与隐藏式立刻进行的，因为我们没有在css或js中添加动画。接下来，我们使用css（通过声明式风格创建一般动画的较好选择），当然使用jQuery的animate方法也不错，Angular的module.animation能够兼容这些方法。

控制淡入淡出需要四个额外的css类，ng-hide-add、ng-hide-add-active、ng-hide-remove、ng-hide-remove-active等。

/* ng-animate.css */
    .ng-hide-add,
    .ng-hide-remove {
      transition: all linear 1s;
      display: block !important;
    }
    
    .ng-hide-add.ng-hide-add-active,
    .ng-hide-remove {
      opacity: 0;
    }
    
    .ng-hide-add,
    .ng-hide-remove.ng-hide-remove-active {
      opacity: 1;
    }

这次的编译结果如下所示。  
![这里写图片描述][20150419110501256]  
根据您的网站的用户需要，你可能需要给特定的css属性增加浏览器引擎前缀(vendor-prefix)，例如针对iOS Safari6增加-webkit-transition（caniuse.com是一个比较好的html5、css3浏览器兼容性网站）。注意这个动画将附加到任何一次ng-show、ng-hide使用中，为了做更好的控制，我们可以在元素和选择器上增加自定义css类，例如`.my-class.ng-hide-add`和`.my-class.ng-hide-remove`等等。

## 2.7 结论 ##

添加`ngAnimate`的案例我想让您确信理解Angular 模块系统的重要性。而且，令人高兴的是，`ngAnimate`只是使用Angular附件模块的开始，除了可以使用官方提供的模块资源外，大家还可以到github之类的网站上寻找更多的第三方开源模块。最流行的一个项目是AngularUI，提供了UI Router、UI Bootstrap等强大的模块，这些模块可以方便地使用Bower进行安装，当您上手Angular之后，您也可以在Github和Bower发布您的Angular模块，等你哟！

`ngAnimate`模块演示一个如何使用附件模块发挥强大功能的案例，但是因为它特殊的嵌入方式，没有使用依赖注入。因为模块和依赖注入需要相互协作，下一章我们将讲解依赖注入。

# 3.声明 #

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！  
欢迎任何形式的转载，烦请注明装载，保留本段文字。  
本文原文链接，[http://blog.csdn.net/whqet/article/details/45074873][http_blog.csdn.net_whqet_article_details_45074873]  
欢迎大家访问独立博客[http://whqet.github.io][http_whqet.github.io]

[Angualr Basics]: http://www.angularjsbook.com/
[Modules]: http://www.angularjsbook.com/angular-basics/chapters/modules/
[CommonJS]: http://wiki.commonjs.org/wiki/CommonJS
[AMD]: http://requirejs.org/docs/whyamd.html
[IIFE]: http://benalman.com/news/2010/11/immediately-invoked-function-expression/
[20150419104316282]: /images/20220805/0d637915aa8546ff8fb6ea04454819b3.png
[20150419110501256]: /images/20220805/483ad04aad0c471c8693d802b2fb7fc8.png
[http_blog.csdn.net_whqet_article_details_45074873]: http://blog.csdn.net/whqet/article/details/45074873
[http_whqet.github.io]: http://whqet.github.io