AngularJS 模塊
模塊定義了一個應用程序。
模塊是應用程序中不同部分的容器。
模塊是應用控制器的容器。
控制器通常屬於一個模塊。
創建模塊
你可以通過AngularJS的angular.module函數來創建模塊:
< script >
var app = angular.module( " myApp " , []);
"myApp" 參數對應執行應用的HTML 元素。
現在你可以在AngularJS 應用中添加控制器,指令,過濾器等。
添加控制器
你可以使用ng-controller指令來添加應用的控制器:
AngularJS 實例
{{ firstName + " " + lastName }}
< /div >
< script >
app.controller( "myCtrl" , function ($scope) {
$scope.firstName = "John" ;
$scope.lastName = "Doe" ;
});
嘗試一下»
你可以在AngularJS控制器章節學到更多關於控制器的知識。
添加指令
AngularJS 提供了很多內置的指令,你可以使用它們來為你的應用添加功能。
完整的指令內容可以參閱AngularJS參考手冊 。
此外,你可以使用模塊來為你應用添加自己的指令:
AngularJS 實例
< script >
app.directive( "w3bigDirective" , function () {
return {
template : "我在指令構造器中創建!"
};
});
嘗試一下»
你可以在AngularJS指令章節學到更多關於指令的知識。
模塊和控制器包含在JS 文件中
通常AngularJS 應用程序將模塊和控制器包含在JavaScript 文件中。
在以下實例中, "myApp.js" 包含了應用模塊的定義程序, "myCtrl.js" 文件包含了控制器:
AngularJS 實例
< 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
在模塊定義中[] 參數用於定義模塊的依賴關係。 中括號[]表示該模塊沒有依賴,如果有依賴的話會在中括號寫上依賴的模塊名字。 |
myCtrl.js
$scope.firstName = "John";
$scope.lastName= "Doe";
});
函數會影響到全局命名空間
JavaScript 中應避免使用全局函數。 因為他們很容易被其他腳本文件覆蓋。
AngularJS 模塊讓所有函數的作用域在該模塊下,避免了該問題。
什麼時候載入庫?
在我們的實例中,所有AngularJS 庫都在HTML 文檔的頭部載入。 |
對於HTML 應用程序,通常建議把所有的腳本都放置在<body> 元素的最底部。
這會提高網頁加載速度,因為HTML 加載不受制於腳本加載。
在我們的多個AngularJS 實例中,您將看到AngularJS 庫是在文檔的<head> 區域被加載。
在我們的實例中,AngularJS 在<head> 元素中被加載,因為對angular.module 的調用只能在庫加載完成後才能進行。
另一個解決方案是在<body> 元素中加載AngularJS 庫,但是必須放置在您的AngularJS 腳本前面:
AngularJS 實例
< 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 >
嘗試一下»