AngularJS 模塊


模塊定義了一個應用程序。

模塊是應用程序中不同部分的容器。

模塊是應用控製器的容器。

控製器通常屬於一個模塊。


創建模塊

你可以通過 AngularJS 的 angular.module 函數來創建模塊:

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []);

</script>

"myApp" 參數對應執行應用的 HTML 元素。

現在你可以在 AngularJS 應用中添加控製器,指令,過濾器等。


添加控製器

你可以使用 ng-controller 指令來添加應用的控製器:

AngularJS 實例

<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 提供了很多內置的指令,你可以使用它們來為你的應用添加功能。

完整的指令內容可以參閱 AngularJS 參考手冊

此外,你可以使用模塊來為你應用添加自己的指令:

AngularJS 實例

<div ng-app="myApp" runoob-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {
    return {
        template : "我在指令構造器中創建!"
    };
});
</script>

嚐試一下 »

你可以在 AngularJS 指令 章節學到更多關於指令的知識。


模塊和控製器包含在 JS 文件中

通常 AngularJS 應用程序將模塊和控製器包含在 JavaScript 文件中。

在以下實例中, "myApp.js" 包含了應用模塊的定義程序, "myCtrl.js" 文件包含了控製器:

AngularJS 實例

<!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>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

嚐試一下 »

myApp.js

var app = angular.module("myApp", []);

Note 在模塊定義中 [] 參數用於定義模塊的依賴關係。
中括號[]表示該模塊沒有依賴,如果有依賴的話會在中括號寫上依賴的模塊名字。

myCtrl.js

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});

函數會影響到全局命名空間

JavaScript 中應避免使用全局函數。因為他們很容易被其他腳本文件覆蓋。

AngularJS 模塊讓所有函數的作用域在該模塊下,避免了該問題。


什麼時候載入庫?

Note 在我們的實例中,所有 AngularJS 庫都在 HTML 文檔的頭部載入。

對於 HTML 應用程序,通常建議把所有的腳本都放置在 <body> 元素的最底部。

這會提高網頁加載速度,因為 HTML 加載不受製於腳本加載。

在我們的多個 AngularJS 實例中,您將看到 AngularJS 庫是在文檔的 <head> 區域被加載。

在我們的實例中,AngularJS 在 <head> 元素中被加載,因為對 angular.module 的調用隻能在庫加載完成後才能進行。

另一個解決方案是在 <body> 元素中加載 AngularJS 庫,但是必須放置在您的 AngularJS 腳本前麵:

AngularJS 實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<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>

嚐試一下 »