AngularJS 模块

我们首先想要介绍的概念是模块。模块是 AngularJS 用名称包装相关代码的方式。对于有 Java 背景的开发人员，可以简单地认为模块就是包。

基本概念

AngularJS 模块有两个相关部分：

模块可以定义自己的控制器、服务、工厂和指令。可以在整个模块内访问这些是功能和代码。
模块还可以依赖其他模块，模块实例化时会定义依赖关系。这意味着 AngularJS 会去搜索特定名称的模块，并确保在该模块中定义任何功能、控制器、服务等对该模块定义的所有代码是可用的。

除了作为相关 JavaScript 的容器，AngularJS 模块也用来引导应用程序。这意味着通过给 ng-app 指令指定模块名，可以告诉 AngularJS 将加载什么模块作为应用程序的主入口。

深入理解

让我们通过几个例子的帮助来加深认识。

下面代码定义了一个名为 notesApp 模块：

angular.module('notesApp', []);
`
angular.module 方法的第一个参数表示该模块的名称。我们在这里定义了名为 notesApp 模块。第二个参数是该模块依赖的模块名数组。注意此处我们将空方括号作为该函数第二个参数，AngularJS 会创建一个名为 notesApp 没有依赖的新模块。

下面代码我们定义了一个名为 notesApp 的模块，它依赖其他两个模块： notesApp.ui，它定义了我们的 UI 小部件。还有 thirdCompany.fusioncharts，它是一个第三方图表库：

`angular.module('notesApp', 
  ['notesApp.ui', 'thirdCompany.fusioncharts']);`

如果我们想要加载一个其他文件中已定义的模块，可以使用 angular.module 方法，只需要使用第一个参数。如下所示：

angular.module('notesApp');

这行代码告诉 AngularJS 找到名为 notesApp 的模块，在当前文件可使用、添加或修改模块。这就是怎样跨多个文件时引用同一模块并添加相关代码。

常见错误

注意开发中可能遇到的两个常见错误：

试图定义一个模块，但忘记传第二个参数。这将导致 AngularJS 试图查找一个模块，而不是定义一个模块，我们会遇到一个错误(“没有发现模块”)。
尝试从另一个文件加载模块来修改，但定义模块的文件没有被先加载。在你想使用模块之前，确保在 HTML 先加载定义该模块的文件。

现在已经定义了模块，如何使用它呢? 我们当然可以给它添加功能，并将我们的代码库划分成不同的部分。更重要的是，我们可以告诉 AngularJS 使用这些模块来引导应用程序。 ng-app 指令接受一个可选参数，即引导时加载的模块名称。

让我们看一个完整的示例来理解这一点：

<html ng-app="notesApp">
<head>
  <meta charset="utf-8">
  <title>Hello AngularJS</title>
</head>
<body>
  Hello {{1 + 1}}nd time AngularJS
  <script src="https://cdn.jsdelivr.net/angularjs/1.2.28/angular.min.js"></script>
  <script type="text/javascript">
    angular.module('notesApp', []);
  </script>
</body>
</html>