1.AngularJS 模塊
阿新 • • 發佈：2017-08-10
底部 順序 放置 angularjs 能夠 nts angular template 名稱
上一章講的數據綁定，是把控制器的代碼寫到一個全局命名空間中定義的函數裏：
function MyController($scope) {
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
在AngularJS 中，模塊是定義應用的主要方式，包含了主要的應用代碼。一個應用可以包含多個模塊，每個模塊包含具體的代碼。使用模塊有許多好處，比如：
- 保持全局命名空間的清潔
- 測試更容易找到相互隔離的功能
- 可以在不同的應用之間復用代碼
- 是應用能夠以任意順序加載代碼的各個部分
我們使用angular.module() 方法來聲明模塊，這個方法接受兩個參數，第一個是模塊的名稱，第二個是依賴列表，中括號[]表示該模塊沒有依賴，如果有依賴的話會在中括號寫上依賴的模塊名字。
angular.module(‘myApp‘, []) 方法相當於AngularJS 模塊的setter 方法，用來定義模塊。
angular.module(‘myApp‘) 方法只傳遞一個參數，相當於getter 方法，用來引用模塊。
開發大型應用時，會創建多個模塊類承載業務邏輯。將復雜的功能分割成不同的模塊，有助於單獨為它們編寫測試。
1.創建模塊
<div ng-app="myApp">...</div>
<script>
<!--通過angular.module 函數創建模塊-->
var app = angular.module("myApp", []);
</script>
2.添加控制器
<!--使用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>
3.添加指令
AngularJS 提供了很多內置的指令，可以用它們來為你的應用添加功能。
<div ng-app="myApp" runoob-directive></div>
<script>
var app = angular.module("myApp", []);
<!--用模塊為應用添加自己的指令-->
app.directive("runoobDirective", function() {
return {
template : "我在指令構造器中創建!"
};
});
</script>
4.模塊和控制器包含在JS文件中
通常AngularJS應用程序將模塊和控制器包含在js文件中。
<!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>
<!--myApp.js 包含了應用模塊的定義程序-->
<script src="myApp.js"></script>
<!--myCtrl.js 包含了控制器-->
<script src="myCtrl.js"></script>
</body>
</html>
5.什麽時候載入angular.js
對於HTML應用程序，通常建議吧所有的腳本都放置在<body> 元素的最底部。
這回提高網頁加載速度，應為HTML加載不受制於腳本加載。
AngularJS 的庫文件是在<head>標簽裏加載的，因為對angular.module 的調用只能在庫加載完成後才能進行。
另外也可以在<body>元素中加載，但是必須放在AngularJS腳本前面。
1.AngularJS 模塊