一個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>
試一試»