原文地址:https://code.angularjs.org/1.3.0-beta.14/docs/guide/module。
模块是什么?
你可以把模块看成是一个你的app的不同部分(controller,services,filters,directives,等等)的一个容器。
为什么?
大多数应用有一个main方法,把应用的不同部分实例化和装配在一起。
Angular app没有main方法。取而代之的是模块声明地指定了一个应用应该如何被启动。这种方法有几个优点:
- 声明过程很容易被理解。
- 你可以把代码打包成可重用的模块。
- 因为模块的延迟执行,模块可以以任何顺序被加载(甚至是平行)。
- 单元测试仅仅加载相关的模块,这会使得它们可以很快地进行。
- 端到段地测试可以使模块去复写配置。
基础
我有点着急。我怎么能让一个Hello World模块工作呢?
Edit in Plunker
index.html
script.js
<!doctype html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Example - example-example106-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div>
{{ 'World' | greet }}
</div>
</body>
</html>
(注:这个地方原本的index.html展示的代码不完整,我将它补全了。)
重要的事情需要注意:
- 这个ModuleAPI。(注:实际上这个手册页面里面没有找到这个module方法的说明,在http://www.tutorialsteacher.com/angularjs/modules-in-angularjs找到一些说明:“In the above example,the angular.module() method creates an application module,where the first parameter is a module name which is same as specified by ng-app directive.The second parameter is an array of other dependent modules []. In the above example we are passing an empty array because there is no dependency.”,即两个参数,一个是模块的名字,这个名字要和ng-app指示符里面所写的一样;一个是这个模块所依赖的模块数组)。
- 在<htmlng-app="myApp">对myApp模块的引用。这就是用你的模块去引导app的事物。
- 在angular.module('myApp',[])的空数组。这个数组是myApp依赖的一个模块列表。
推荐安装
尽管上面的例子很简单,但是它可以被扩展成一个大的应用程序。不过我们推荐你把你的应用拆成多个模块,就像这样:
- 每个功能一个模块。
- 每一个可重用的组件一个模块。
- 和一个应用程序层面的模块,这个模块依赖于上面模块,并且包含一些初始化代码。
我们已经written a document(编写了一个文档),关于我们在google是如何组织大型的app的。
以上只是一个建议。根据你的需求去进行剪裁。
(注:下面的原文摘抄有点问题,更多请参考Plunker)
<div ng-controller"XmplController"> {{ greeting }}! </div>