AngularJS 模塊詳解及簡單實例
AngularJS 模塊
模塊定義了一個應用程序。
模塊是應用程序中不同部分的容器。
模塊是應用控制器的容器。
控制器通常屬于一個模塊。
創(chuàng)建模塊
你可以通過 AngularJS 的 angular.module 函數(shù)來創(chuàng)建模塊：
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" 參數(shù)對應執(zhí)行應用的 HTML 元素。
現(xiàn)在你可以在 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 控制器 章節(jié)學到更多關于控制器的知識。
添加指令
AngularJS 提供了很多內(nèi)置的指令，你可以使用它們來為你的應用添加功能。
完整的指令內(nèi)容可以參閱 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 : "我在指令構(gòu)造器中創(chuàng)建!"
};
});
</script>
</body>
</html>
運行結(jié)果：
我在指令構(gòu)造器中創(chuàng)建！
你可以在 AngularJS 指令 章節(jié)學到更多關于指令的知識。
模塊和控制器包含在 JS 文件中
通常 AngularJS 應用程序?qū)⒛K和控制器包含在 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>
運行結(jié)果：
John Doe
myApp.js
var app = angular.module("myApp", []);
Note 在模塊定義中 [] 參數(shù)用于定義模塊的依賴關系。
中括號[]表示該模塊沒有依賴，如果有依賴的話會在中括號寫上依賴的模塊名字。
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
函數(shù)會影響到全局命名空間
JavaScript 中應避免使用全局函數(shù)。因為他們很容易被其他腳本文件覆蓋。
AngularJS 模塊讓所有函數(shù)的作用域在該模塊下，避免了該問題。
什么時候載入庫?
注意：在我們的實例中，所有 AngularJS 庫都在 HTML 文檔的頭部載入。
對于 HTML 應用程序，通常建議把所有的腳本都放置在 <body> 元素的最底部。
這會提高網(wǎng)頁加載速度，因為 HTML 加載不受制于腳本加載。
在我們的多個 AngularJS 實例中，您將看到 AngularJS 庫是在文檔的 <head> 區(qū)域被加載。
在我們的實例中，AngularJS 在 <head> 元素中被加載，因為對 angular.module 的調(diào)用只能在庫加載完成后才能進行。
另一個解決方案是在 <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>
運行結(jié)果：
John Doe
以上就是對AngularJS 模塊資料的整理，后續(xù)繼續(xù)補充，希望能幫助編程的朋友。
相關文章
AngularJS 在同一個界面啟動多個ng-app應用模塊詳解
這篇文章主要介紹了AngularJS 在同一個界面啟動多個ng-app應用模塊詳解的相關資料,需要的朋友可以參考下2016-12-12
今天小編就為大家分享一篇angularJs利用$scope處理升降序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
angular+bootstrap的雙向數(shù)據(jù)綁定實例
本篇文章主要介紹angular+bootstrap的雙向數(shù)據(jù)綁定的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要給大家介紹了angularjs中ng-attr的用法,文中通過實例代碼介紹的很詳細，有需要的朋友可以參考借鑒，下面來一起看看吧。2016-12-12
本篇文章主要介紹了淺談Angular路由復用策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Angular4的輸入屬性與輸出屬性,結(jié)合實例形式詳細分析了Angular4輸入屬性與輸出屬性的概念、功能及相關使用技巧,需要的朋友可以參考下2017-11-11
本文主要介紹AngularJS 模板，這里整理了詳細相關資料，并附示例代碼，有興趣的小伙伴可以參考下2016-08-08
關于AngularJS中幾種Providers的區(qū)別總結(jié)
這篇文章主要給大家介紹了關于AngularJS中幾種Providers的區(qū)別的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用AngularJS具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-05-05
本篇文章主要介紹了從零搭建一個angular4.0項目，主要用到的工具angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0)，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了Angularjs 依賴壓縮及自定義過濾器寫法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02