腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

AngularJS 模塊詳解及簡(jiǎn)單實(shí)例

更新時(shí)間：2016年07月28日 09:43:43 投稿：lqh

本文主要介紹AngularJS 模塊,這里幫大家整理了相關(guān)資料,詳細(xì)介紹了AngularJS的基礎(chǔ)知識(shí),有需要的朋友可以參考下

AngularJS 模塊

模塊定義了一個(gè)應(yīng)用程序。

模塊是應(yīng)用程序中不同部分的容器。

模塊是應(yīng)用控制器的容器。

控制器通常屬于一個(gè)模塊。

創(chuàng)建模塊

你可以通過(guò) AngularJS 的 angular.module 函數(shù)來(lái)創(chuàng)建模塊：

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []); 

</script>

"myApp" 參數(shù)對(duì)應(yīng)執(zhí)行應(yīng)用的 HTML 元素。

現(xiàn)在你可以在 AngularJS 應(yīng)用中添加控制器，指令，過(guò)濾器等。

添加控制器

你可以使用 ng-controller 指令來(lái)添加應(yīng)用的控制器:

AngularJS 實(shí)例

<!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>

運(yùn)行效果：

John Doe

你可以在 AngularJS 控制器章節(jié)學(xué)到更多關(guān)于控制器的知識(shí)。

添加指令

AngularJS 提供了很多內(nèi)置的指令，你可以使用它們來(lái)為你的應(yīng)用添加功能。

完整的指令內(nèi)容可以參閱 AngularJS 參考手冊(cè)。

此外，你可以使用模塊來(lái)為你應(yīng)用添加自己的指令：

AngularJS 實(shí)例

<!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>

運(yùn)行結(jié)果：

我在指令構(gòu)造器中創(chuàng)建！

你可以在 AngularJS 指令章節(jié)學(xué)到更多關(guān)于指令的知識(shí)。

模塊和控制器包含在 JS 文件中

通常 AngularJS 應(yīng)用程序?qū)⒛K和控制器包含在 JavaScript 文件中。

在以下實(shí)例中， "myApp.js" 包含了應(yīng)用模塊的定義程序， "myCtrl.js" 文件包含了控制器：

AngularJS 實(shí)例

<!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>

運(yùn)行結(jié)果：

John Doe

myApp.js

var app = angular.module("myApp", []);

Note 在模塊定義中 [] 參數(shù)用于定義模塊的依賴(lài)關(guān)系。

中括號(hào)[]表示該模塊沒(méi)有依賴(lài)，如果有依賴(lài)的話會(huì)在中括號(hào)寫(xiě)上依賴(lài)的模塊名字。

myCtrl.js

app.controller("myCtrl", function($scope) {
 $scope.firstName	= "John";
 $scope.lastName= "Doe";
});

函數(shù)會(huì)影響到全局命名空間

JavaScript 中應(yīng)避免使用全局函數(shù)。因?yàn)樗麄兒苋菀妆黄渌_本文件覆蓋。

AngularJS 模塊讓所有函數(shù)的作用域在該模塊下，避免了該問(wèn)題。

什么時(shí)候載入庫(kù)?

注意：在我們的實(shí)例中，所有 AngularJS 庫(kù)都在 HTML 文檔的頭部載入。

對(duì)于 HTML 應(yīng)用程序，通常建議把所有的腳本都放置在 <body> 元素的最底部。

這會(huì)提高網(wǎng)頁(yè)加載速度，因?yàn)?HTML 加載不受制于腳本加載。

在我們的多個(gè) AngularJS 實(shí)例中，您將看到 AngularJS 庫(kù)是在文檔的 <head> 區(qū)域被加載。

在我們的實(shí)例中，AngularJS 在 <head> 元素中被加載，因?yàn)閷?duì) angular.module 的調(diào)用只能在庫(kù)加載完成后才能進(jìn)行。

另一個(gè)解決方案是在 <body> 元素中加載 AngularJS 庫(kù)，但是必須放置在您的 AngularJS 腳本前面：

AngularJS 實(shí)例

<!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>

運(yùn)行結(jié)果：

John Doe

以上就是對(duì)AngularJS 模塊資料的整理，后續(xù)繼續(xù)補(bǔ)充，希望能幫助編程的朋友。

您可能感興趣的文章: