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>

点击此处查看效果

该实例定义了一个模块(注意第二个参数是空数组),然后让AngularJS通过ng-app指令引导模块。

不完全译自《AngularJS-Up and Running》。

发表评论