AngularJS中的模块详解

在讲angularjs的模块之前，我们先介绍一下angular的一些知识点：

AngularJS是纯客户端技术，完全用Javascript编写的。它使用的是网页开发的常规技术(HTML,CSS,Javascript)，目的是让网页应用开发更快更容易。

AngularJS简化应用开发的一个重要方法是，将一个些通用的低级开发操作包装起来提供给开发者。AngularJS会自动处理好这些低级操作。它们包括：

1.DOM操作
2.设置事件的监听
3.输入验证，因为AngularJS会处理大部分这些操作，所以开发者就能更多的专注在应用的业务逻辑上，更少地编写那些重复性的、易错的、低级的代码。

在AngularJS简化开发的同时，它也为客户端带来了一些精巧的技术，它们包括：

1.数据、业务逻辑、视图的分离
2.数据和视图的自动绑定
3.通用服务
4.依赖注入（主要用于聚合服务）
5.可扩展的HTML编译器(完全由JavaScript编写)
6.易于测试
7.客户端对这些技术的需求其实已经存在很久了。

同时，你还可以用AngularJS来开发单页或者多页的应用，不过其主要还是用来开发单页的。 AngularJS支持浏览器的历史操作，向前，向后按钮，单页应用中的收藏操作。

接下来，我们来详细讲解angularJS的模块。

大部分应用都有一个主方法用来实例化、组织、启动应用。AngularJS应用没有主方法，而是使用模块来声明应用应该如何启动。这种方式有以下几个优点：

1.启动过程是声明式的，所以更容易懂。
2.在单元测试是不需要加载全部模块的，因此这种方式有助于写单元测试。
3.可以在特定情况的测试中增加额外的模块，这些模块能更改配置，能帮助进行端对端的测试。
4.第三方代码可以打包成可重用的模块。
5.模块可以以任何先后或者并行的顺序加载（因为模块的执行本身是延迟的）。

举个例子：

<!doctype html>
<html ng-app="myApp">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script>
      var myAppModule = angular.module('myApp', []);
　　　　　　// configure the module.
　　　　　　// in this example we will create a greeting filter
　　　　　　myAppModule.filter('greet', function() {
 　　　　　　　　return function(name) {
  　　　　　　　　　　return 'Hello, ' + name + '!';
 　　　　　　　　};
　　　　　　});
  </script>
 </head>
 <body>
  <div>
   {{ 'World' | greet }}
  </div>
 </body>
</html>

上面的例子，我们是通过在<html ng-app="myApp">中进行指定，来实现使用myApp这个模块启动应用的。

以上这个例子写法很简单，但是不适合用同样的写法来写大型应用。我们推荐是将你的应用拆分成以下几个模块：

1.一个服务模块，用来做服务的声明。
2.一个指令模块，用来做指令的声明。
3.一个过滤器模块，用来做过滤器声明。
4.一个依赖以上模块的应用级模块，它包含初始化代码。

举个例子：

<!doctype html>
<html ng-app="xmpl">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script src="script.js"></script>
 </head>
 <body>
  <div ng-controller="XmplController">
   {{ greeting }}!
  </div>
 </body>
</html>
[/code]

script.js:

[code]
angular.module('xmpl.service', []).   //服务模块
 value('greeter', {    //自定义greeter对象
  salutation: 'Hello',
  localize: function(localization) {
    this.salutation = localization.salutation;
  },
  greet: function(name) {
    return this.salutation + ' ' + name + '!';
  }
 }).
 value('user', {   //自定义user对象
  load: function(name) {
    this.name = name;
  }
 });
angular.module('xmpl.directive', []);  //指令模块
angular.module('xmpl.filter', []);   //过滤器模块
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).  //模块xmpl依赖于数组中的模块
 run(function(greeter, user) {
  // 初始化代码，应用启动时，会自动执行
  greeter.localize({
    salutation: 'Bonjour'
  });
  user.load('World');
 })
// A Controller for your app
var XmplController = function($scope, greeter, user) {
   $scope.greeting = greeter.greet(user.name);
}

这样拆分的原因是，在你的测试中常常需要忽略掉初始化代码，因为这些代码比较难测试。通过把它拆分出来就能在测试中方便地忽视掉它。通过只加载和当前测试相关的模块，也能使测试更专一。以上只是一个建议，你可以放心根据你的具体情况来调整。

一个模块就是一系列配置和代码块的集合，它们是在启动阶段就附加到应用上的。一个最简单的模块由两类代码块集合组成的：

配置代码块 - 在注入提供者注入和配置阶段执行。只有注入提供者和常量可以被注入到配置块中。这是为了防止服务在被配置好之前就被提前初始化。
运行代码块 - 在注入器被创建后执行，被用来启动应用的。只有实例和常量能被注入到运行块中。这是为了防止在运行后还出现对系统的配置。

代码实现：

angular.module('myModule', []).
　　config(function(injectables) { // provider-injector      配置代码块
　　　　// This is an example of config block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject Providers (not instances)
　　　　// into the config blocks.
　　}). run(function(injectables) { // instance-injector      运行代码块
　　　　// This is an example of a run block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject instances (not Providers)
　　　　// into the run blocks
　　});

模块还有一些配置的简便方法，使用它们的效果等同于使用代码块。举个例子：

angular.module('myModule', []).
 value('a', 123).
 factory('a', function() { return 123; }).
 directive('directiveName', ...).
 filter('filterName', ...);
// is same as
angular.module('myModule', []).
 config(function($provide, $compileProvider, $filterProvider) {
  $provide.value('a', 123)
  $provide.factory('a', function() { return 123; })
  $compileProvider.directive('directiveName', ...).
  $filterProvider.register('filterName', ...);
 });

配置块会按照$provide, $compileProvider, $filterProvider，注册的顺序，依次被应用。唯一的例外是对常量的定义，它们应该始终放在配置块的开始处。

运行块是AngularJS中最像主方法的东西。一个运行块就是一段用来启动应用的代码。它在所有服务都被配置和所有的注入器都被创建后执行。运行块通常包含了一些难以测试的代码，所以它们应该写在单独的模块里，这样在单元测试时就可以忽略它们了。

模块可以把其他模块列为它的依赖。“依赖某个模块”意味着需要把这个被依赖的模块在本块模块之前被加载。换句话说被依赖模块的配置块会在本模块配置块前被执行。运行块也是一样。任何一个模块都只能被加载一次，即使它被多个模块依赖。

模块是一种用来管理$injector配置的方法，和脚本的加载没有关系。现在网上已有很多控制模块加载的库，它们可以和AngularJS配合使用。因为在加载期间模块不做任何事情，所以它们可以以任意顺序或者并行方式加载

赞 (0)

相关推荐

  • 详细AngularJs4的图片剪裁组件的实例

    本文介绍了AngularJs4的图片剪裁组件,下面我来记录一下,有需要了解AngularJs4的图片剪裁组件的朋友可参考.希望此文章对各位有所帮助. jQuery里有一个强大的图片剪裁插件,叫cropper.js.这是大神的GitHub地址:https://github.com/fengyuanchen/cropper 首先想在全是ts文件的angular里运用jquery的js代码插件,这时候需要一个东西,他叫桥接文件.npm是一个强大的库,已经有前人在里面封装了cropper以及所有你能想到

  • angular4模块中给标签添加背景图的实现方法

    一.现象 一个全屏的"走马灯"每项需要添加背景图,在循环标签里需要动态添加行内样式 二.解决 1.首先有一个图片数组,如: export class AppComponent { array = ["url(/assets/images/img1.png)","url(/assets/images/img2.png)"]; } 2.模块中添加数据,如: <div nz-carousel-content *ngFor="let it

  • AngularJS中的模块详解

    在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规技术(HTML,CSS,Javascript),目的是让网页应用开发更快更容易. AngularJS简化应用开发的一个重要方法是,将一个些通用的低级开发操作包装起来提供给开发者.AngularJS会自动处理好这些低级操作.它们包括: 1.DOM操作 2.设置事件的监听 3.输入验证,因为AngularJS会处理大部分这些操作,所

  • python中random模块详解

    python中random模块详解

    Python中的random模块用于生成随机数,它提供了很多函数.常用函数总结如下: 1. random.random() 用于生成一个0到1的随机浮点数: 0 <= n < 1.0 2. random.seed(n) 用于设定种子值,其中的n可以是任意数字.random.random() 生成随机数时,每一次生成的数都是随机的.但是,使用 random.seed(n) 设定好种子之后,在先调用seed(n)时,使用 random() 生成的随机数将会是同一个. 3. random.unifo

  • Python中BeautifulSoup模块详解

    Python中BeautifulSoup模块详解

    目录 前言 安装库 导入库 解析文档示例 提取数据示例 CSS选择器 实例小项目 总结 前言 BeautifulSoup是主要以解析web网页的Python模块,它会提供一些强大的解释器,以解析网页,然后提供一些函数,从页面中提取所需要的数据,目前是Python爬虫中最常用的模块之一. 安装库 在使用前需要安装库,这里建议安装bs4,也就是第四版本,因为根据官方文档第三版的已经停止更新.同时安装lxml解释器 pip3 install bs4 pip3 install lxml 导入库 from

  • Angularjs中使用Filters详解

    Filter作用就是接收一个输入,通过某个规则进行处理,然后给用户返回处理后的结果.Filter可以用在模板.控制器.或者服务,同时也会很容易自定义一个Filter过滤器. 在模板中使用Filter Filter可以用于在视图模板中使用一下语法表达式: {{ expression | filter }} 例如:格式{{ 12 | currency }}是使用currency的filter用法,让数字12过滤为货币形式,结果是$12.00. Filter可以应用到另一个过滤的结果中.这就是所谓的"

  • AngularJS中transclude用法详解

    本文实例讲述了AngularJS中transclude用法.分享给大家供大家参考,具体如下: Transclude - 在Angular的指令中,大家会看到有一个这样的一个配置属性,这个单词在英文字典里面也查询不到真实的意思,所以就用英文来标示它吧.如果你深入的使用angular的话,你就花很大一部分时间来创建自定义指令,那么就不可避免的要深入理解transclude.简单的讲,transclude主要完成以下工作,取出自定义指令中的内容(就是写在指令里面的子元素),以正确的作用域解析它,然后再

  • angularJS中$apply()方法详解

    对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 复制代码 代码如下: "scope is an object that refers to the application model. It is an execution c

  • python中os模块详解

    os模块提供了对目录或者文件的新建/删除/查看文件属性,还提供了对文件以及目录的路径操作.比如说:绝对路径,父目录-- os.sep可以取代操作系统特定的路径分隔符.windows下为 "\\",Linux下为"/" os.linesep字符串给出当前平台使用的行终止符.例如,Windows使用'\r\n',Linux使用'\n'而Mac使用'\r'. os.pathsep 输出用于分割文件路径的字符串,系统使用此字符来分割搜索路径(像PATH),例如POSIX上'

  • AngularJS 中的事件详解

    AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.

  • NodeJS中Buffer模块详解

    NodeJS中Buffer模块详解

    一,开篇分析 所谓缓冲区Buffer,就是 "临时存贮区" 的意思,是暂时存放输入输出数据的一段内存. JS语言自身只有字符串数据类型,没有二进制数据类型,因此NodeJS提供了一个与String对等的全局构造函数Buffer来提供对二进制数据的操作.除了可以读取文件得到Buffer的实例外,还能够直接构造,例如: 复制代码 代码如下: var buffer = new Buffer([ 0x68, 0x65, 0x6c, 0x6c, 0x6f ]) ; Buffer与字符串类似,除了

  • Python函数式编程中itertools模块详解

    目录 容器与可迭代对象 count() 函数 cycle 函数 repeat 函数 enumerate 函数,添加序号 accumulate 函数 chain 与 groupby 函数 zip_longest 与 zip tee 函数 compress 函数 islice.dropwhile.takewhile.filterfalse.filter 总结 容器与可迭代对象 在正式开始前先补充一些基本概念在 Python 中存在容器 与 可迭代对象 容器:用来存储多个元素的数据结构,例如 列表,元

随机推荐