上一章讲的数据绑定，是把控制器的代码写到一个全局命名空间中定义的函数里：
function MyController($scope) {
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
在AngularJS 中，模块是定义应用的主要方式，包含了主要的应用代码。一个应用可以包含多个模块，每个模块包含具体的代码。使用模块有许多好处，比如：
- 保持全局命名空间的清洁
- 测试更容易找到相互隔离的功能
- 可以在不同的应用之间复用代码
- 是应用能够以任意顺序加载代码的各个部分
我们使用angular.module() 方法来声明模块，这个方法接受两个参数，第一个是模块的名称，第二个是依赖列表，中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。
angular.module(‘myApp‘, []) 方法相当于AngularJS 模块的setter 方法，用来定义模块。
angular.module(‘myApp‘) 方法只传递一个参数，相当于getter 方法，用来引用模块。
开发大型应用时，会创建多个模块类承载业务逻辑。将复杂的功能分割成不同的模块，有助于单独为它们编写测试。
1.创建模块
<div ng-app="myApp">...</div>
<script>
<!--通过angular.module 函数创建模块-->
var app = angular.module("myApp", []);
</script>
2.添加控制器
<!--使用ng-controller 指令添加控制器-->
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
3.添加指令
AngularJS 提供了很多内置的指令，可以用它们来为你的应用添加功能。
<div ng-app="myApp" runoob-directive></div>
<script>
var app = angular.module("myApp", []);
<!--用模块为应用添加自己的指令-->
app.directive("runoobDirective", function() {
return {
template : "我在指令构造器中创建!"
};
});
</script>
4.模块和控制器包含在JS文件中
通常AngularJS应用程序将模块和控制器包含在js文件中。
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<!--myApp.js 包含了应用模块的定义程序-->
<script src="myApp.js"></script>
<!--myCtrl.js 包含了控制器-->
<script src="myCtrl.js"></script>
</body>
</html>
5.什么时候载入angular.js
对于HTML应用程序，通常建议吧所有的脚本都放置在<body> 元素的最底部。
这回提高网页加载速度，应为HTML加载不受制于脚本加载。
AngularJS 的库文件是在<head>标签里加载的，因为对angular.module 的调用只能在库加载完成后才能进行。
另外也可以在<body>元素中加载，但是必须放在AngularJS脚本前面。
时间： 2024-10-15 15:33:27