一个AngularJS模块定义的应用程序。
该模块是一个应用程序的不同部分的容器。
该模块是应用程序的控制器的容器。
控制器总是属于的模块。
创建模块
模块通过使用AngularJS函数创建angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>的“对myApp”参数是指其中运行应用程序的HTML元素。
现在，你可以添加控制器，指令，过滤器等等，你的AngularJS应用程序。
添加控制器
一个控制器添加到您的应用程序，并参考与控制器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>
试一试» 您将了解更多关于控制器在本教程的后面。
添加指令
AngularJS有一组内置指令，您可以使用将功能添加到您的应用程序。
对于一个完整的参考，请访问我们的AngularJS指令参考 。
此外，您可以使用该模块自己的指令添加到您的应用程序：
例
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script> 试一试» 您将了解更多有关指令在本教程后面。
模块和控制器的文件
它是常见的AngularJS应用把模块和JavaScript文件的控制器。
在这个例子中，“myApp.js”包含应用程序模块定义，而“myCtrl.js”包含控制器：
例
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app=" myApp "
ng-controller=" myCtrl ">
{{ firstName + " " + lastName }}
</div>
<script src=" myApp.js "></script>
<script src=" myCtrl.js "></script>
</body>
</html>
试一试» myApp.js
var app = angular.module( "myApp" , []);
 | 在模块定义的[]参数可以用来定义从属模块。 |
|---|
| 如果没有[]参数，你没有创建一个新的模块，但检索现有的。 |
|---|
myCtrl.js
app.controller( "myCtrl" , function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
功能会污染全局命名空间
全球功能应该在JavaScript中尽量避免。 他们可以很容易被覆盖或其他脚本摧毁。
AngularJS模块减少这个问题，通过保持本地模块的所有功能。
当加载库
虽然它是在HTML应用程序共同在年底把脚本放在<body>元素，建议您加载AngularJS库无论是在<head>或在开始<body>
这是因为，将呼叫angular.module库已被加载之后可以只进行编译。
例
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<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>
</body>
</html>
试一试»