AngularJS 系列 02 - 模块

时间:2025-03-04 15:03:50

引导目录:

  AngularJS 系列 学习笔记 目录篇

前言:

  其实,在上篇文章介绍数据绑定的时候,我们的HelloWorld的代码案例中就已经使用了模块(module)。哈哈。

  本篇就着重介绍一下angular.module()的使用。

本篇目录:

1. 为什么需要模块

2. 什么是AngularJS的模块

3. 参数

1. 为什么需要模块

  在JavaScript中,将所有的函数代码全部都定义在全局空间中绝对不是一个好的选择。

  暂且不说变量作用域冲突 全局变量污染怎么破,你调试的时候是不是得浪费大量的时间?本来大好的青春 不去潇洒 全都砸在了代码上?!

2. 什么是AngularJS的模块

  在AngularJS中,模块是定义应用最主要的方式。

  模块里面包含了主要的应用代码,一个应用可以包含多个模块,每一个模块都汉堡了定义具体功能的代码。

  使用模块有很多好处,比如:

  • 保持全局命名空间的清洁
  • 编写测试代码更容易,并能保持且清洁,以便更容易找到互相隔离的功能
  • 易于在不同应用之间复用代码
  • 使应用能够以任意顺序加载代码的各个部分

  在AngularJS中,我们可以使用angular.module()方法来声明模块。

  这个方法能够接受两个参数,第一个是模块的名字,第二个是依赖列表,也就是可以被注入到模块的对象列表。

 angular.module("MyApp", []);

  

  这个方法相当于AngularJS模块的setter方法,是用来定义模块用的。

  调用这个方法时如果只传递一个参数,就可以用它来引用模块。

  比如,可以通过下面的代码来引用MyApp模块:

 // 这个方法用于获取应用
 angular.module("MyApp");

  这个方法相当于AngularJS模块的getter方法,是用来获取对模块的引用。

  接下来,就可以在angular.module("MyApp")返回的对象上创建咱们的应用了。

  开发大型应用的时候,我们会创建多个模块来承载业务逻辑,将复杂的功能分割成不同的模块,有助于单独为他们编写测试代码。

  等后面实践的时候再详细介绍。

3. 参数

  下面是angular.module()的参数列表:

1) name (字符串)

  name是模块的名字,是一个字符串变量。

2) requires (字符串数组)

  requires包含了一个字符串组成的列表,每个元素都是一个模块名称,本模块依赖于这些模块,依赖需要在模块加载之前由注入器进行预加载。