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

模塊是應用程序中不同部分的容器。
模塊是應用控制器的容器。
控制器通常屬于一個模塊。
你可以通過 AngularJS 的 angular.module 函數來創建模塊:
?
1
2
3
4
5
6
7
var app = angular.module("myApp", []);
"myApp" 參數對應執行應用的 HTML 元素。
現在你可以在 AngularJS 應用中添加控制器,指令,過濾器等。
你可以使用 ng-controller 指令來添加應用的控制器:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{{ firstName + " " + lastName }}
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
你可以使用模塊來為你應用添加自己的指令:
+ View Code?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "我在指令構造器中創建!"
};
});
通常 AngularJS 應用程序將模塊和控制器包含在 javaScript 文件中。
在以下實例中, "myApp.js" 包含了應用模塊的定義程序, "myCtrl.js" 文件包含了控制器:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{{ firstName + " " + lastName }}
myApp.js
?
1
var app = angular.module("myApp", []);
myCtrl.js
?
1
2
3
4
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
javaScript 中應避免使用全局函數。因為他們很容易被其他腳本文件覆蓋。
AngularJS 模塊讓所有函數的作用域在該模塊下,避免了該問題。
對于 HTML 應用程序,通常建議把所有的腳本都放置在
元素的最底部。這會提高網頁加載速度,因為 HTML 加載不受制于腳本加載。
在我們的多個 AngularJS 實例中,您將看到 AngularJS 庫是在文檔的
區域被加載。在我們的實例中,AngularJS 在
元素中被加載,因為對 angular.module 的調用只能在庫加載完成后才能進行。另一個解決方案是在
元素中加載 AngularJS 庫,但是必須放置在您的 AngularJS 腳本前面:Angular AngularJS
版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。
版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。