07模块化-AngularJS基础教程

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
    • 10 结论
  • 声明

1. 前言

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

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

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

本文为系列教程第7篇模块，翻译自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加载应用模块。

<!-- index.html -->
<body ng-app="app">
  <!-- Other examples to be inserted here. -->
</body>

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

2.4 定义控制器-Defining a controller

moduleAPI里面包含了定义特殊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调用我们的控制器。

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

编译结果为：This is a model.

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

2.5 链式定义-Chaining definitions

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

<!-- another-message-controller.html -->
<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的核心部分，但是分发的时候以一个单独文件分发，如下所示。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
<!-- 以上被墙,国内用另一个cdn -->
<script src="//cdn.bootcss.com/angular.js/1.3.14/angular.js"></script>
<script
src="//cdn.bootcss.com/angular.js/1.3.14//angular-animate.js"></script>

是时候我们使用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)注册，指令代码还是普通代码。

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

编译结果为：

单击上面的复选框，我们能够看到元素之间的显示与隐藏式立刻进行的，因为我们没有在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;
}

这次的编译结果如下所示。

Depending on your site’s users, you may need to add vendor-prefixed properties for certain browsers, such as -webkit-transition for iOS Safari 6. (The site caniuse.com is a good reference for browser compatibility with HTML5 and CSS3.) Please also note that as written, this animation will applied to every usage of ng-show and ng-hide in our application. For better control, we can add a custom CSS class to both the element and the CSS selectors, for example .my-class.ng-hide-add, .my-class.ng-hide-remove, and so on.

根据您的网站的用户需要，你可能需要给特定的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.10 结论

添加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://whqet.github.io

时间： 2024-10-05 20:36:57

07模块化-AngularJS基础教程的相关文章

转: angularjs基础教程（~~较通俗)

Angularjs-基础教程(1) 很久没有写过东西了,感觉写东西都不知道从哪里开始了,现在还是先写点技术性的吧,angularjs--我兄弟把它叫成“俺哥啦js” 1.下载 官方网址:https://angularjs.org/ CDN:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js 2.简单介绍使用 1.ng-app   ~~~angularjs的渲染范围 决定了angularjs的作用域

03基础-AngularJS基础教程

0. 目录 目录 前言 正文 1 Set up 2 表达式 3 指令 ng-bind ng-init ng-non-bindable ng-show 4 作用域 双向绑定Two-way binding ng-model 5 总结 声明 1. 前言 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了,所以AngularJS做了一些工作来来解决静态网页技术在构建动态应用上的不足. AngularJS

04控制器-AngularJS基础教程

0. 目录 目录 前言 正文 1 ng-controller 2 构建模型-Constructing the model 3 控制器作为属性名-Controller as propertyName 4 依赖注入-Dependency injection 41 scope 5 模型视图控制器MVC-Model-view-controller 6 函数-Functions 7 回调函数 8 结论 声明 1. 前言 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为

05作用域-AngularJS基础教程

0. 目录 目录 前言 正文 1 setup 2 scope 3 rootScope 4 Isolation隔离 5 Nesting嵌套 6 Inheritance继承 7 scopewatch 8 scopeapply 9 结论 声明 1. 前言 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了,所以AngularJS做了一些工作来来解决静态网页技术在构建动态应用上的不足. AngularJ

06集合-AngularJS基础教程

0. 目录 目录 前言 正文 1 Set up 2 Iteration 3 ng-repeat 4 Object properties 5 index 6 ng-init 7 Uniqueness 71 严格相等 72 track by 8 Callback functions 9 -start and -end 10 结论 声明 1. 前言 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了,

Linux培训基础教程

linux下查询history操作时间的方法 要在linux操作系统中查看history记录的操作时间,可以按如下步骤实现: 兄弟连Linux培训基础教程 1,修改/etc/profile文件,在末尾添加:exporthisttimeformat="%f %t `whoami` " 2,或在用户目录下,修改文件 .bash_profile,添加export histtimeformat="%f%t `whoami` " 退出终端,重新登录. 例,查看history操

Python基础教程（第十章 自带电池）

本文内容全部出自<Python基础教程>第二版,在此分享自己的学习之路. ______欢迎转载:http://www.cnblogs.com/Marlowes/p/5459376.html______ Created on Marlowes 现在已经介绍了Python语言的大部分基础知识.Python语言的核心非常强大,同时还提供了更多值得一试的工具.Python的标准安装中还包括一组模块,称为标准库(standard library).之前已经介绍了一些模块(例如math和cmath,其中包

SQL Server2012 T-SQL基础教程--读书笔记（5-7章）

SQL Server2012 T-SQL基础教程--读书笔记(5-7章) SqlServer T-SQL 示例数据库:点我 Chapter 05 表表达式 5.1 派生表 5.1.1 分配列别名 5.1.2 使用参数 5.1.3 嵌套 5.1.4 多个引用 5.2 公用表表达式 5.2.1 分别列别名 5.2.2 使用参数 5.2.3 定义多个CTE 5.2.4 CTE的多次引用 5.2.5 递归CTE 5.3 视图 5.3.1 视图和ORDER BY 子句 5.3.2 视图选项 5.4 内嵌表

HBase入门基础教程 HBase之单机模式与伪分布式模式安装

在本篇文章中,我们将介绍Hbase的单机模式安装与伪分布式的安装方式,以及通过浏览器查看Hbase的用户界面.搭建HBase伪分布式环境的前提是我们已经搭建好了Hadoop完全分布式环境,搭建Hadoop环境请参考:[Hadoop入门基础教程]4.Hadoop之完全分布式环境搭建 开发环境 硬件环境:CentOS 6.5 服务器4台(一台为Master节点,三台为Slave节点) 软件环境:Java 1.7.0_45.Eclipse Juno Service Release 2.hadoop-1