AngularJS 模組
模組定義了一個應用程式。
模組是應用程式中不同部分的容器。
模組是應用控制器的容器。
控制器通常屬於一個模組。
建立模組
你可以通過 AngularJS 的 angular.module 函數來建立模組：
<div ng-app="myApp">...</div><script>var app = angular.module("myApp", []); </script>
"myApp" 參數對應執行應用的 HTML 元素。
現在你可以在 AngularJS 應用中添加控制器，指令，過濾器等。
添加控制器
你可以使用 ng-controller 指令來添加應用的控制器:
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>
運行效果：
John Doe
你可以在 AngularJS 控制器 章節學到更多關於控制器的知識。
添加指令
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" runoob-directive></div><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() { return { template : "我在指令構造器中建立!" };});</script></body></html>
運行結果：
我在指令構造器中建立！
你可以在 AngularJS 指令 章節學到更多關於指令的知識。
模組和控制器包含在 JS 檔案中
通常 AngularJS 應用程式將模組和控制器包含在 JavaScript 檔案中。
在以下執行個體中， "myApp.js" 包含了應用模組的定義程式， "myCtrl.js" 檔案包含了控制器：
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 src="myApp.js"></script><script src="myCtrl.js"></script></body></html>
運行結果：
John Doe
myApp.js
var app = angular.module("myApp", []);
Note 在模組定義中 [] 參數用於定義模組的依賴關係。
中括弧[]表示該模組沒有依賴，如果有依賴的話會在中括弧寫上依賴的模組名字。
myCtrl.js
app.controller("myCtrl", function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe";});
函數會影響到全域命名空間
JavaScript 中應避免使用全域函數。因為他們很容易被其他指令檔覆蓋。
AngularJS 模組讓所有函數的範圍在該模組下，避免了該問題。
什麼時候載入庫?
注意：在我們的執行個體中，所有 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>
運行結果：
John Doe
以上就是對AngularJS 模組資料的整理，後續繼續補充，希望能協助編程的朋友。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
