AngularJS 模組


模組定義了一個應用程式。

模組是應用程式中不同部分的容器。

模組是應用控制器的容器。

控制器通常屬於一個模組。

建立模組

你可以透過AngularJS 的angular.module 函數來建立模組：

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

<script>

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

##</script>
#"myApp" 參數對應執行應用程式的HTML 元素。

現在你可以在 AngularJS 應用程式中新增控制器，指令，過濾器等。

新增控制器

你可以使用

ng-controller# 指令來新增應用的控制器:

##實例

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

運行實例»
點擊"運行實例" 按鈕查看在線實例

你可以在 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" php-directive></div>

<script>

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

app.directive("phpDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

</body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例

你可以在 AngularJS 指令 章節學到更多關於指令的知識。

模組和控制器包含在 JS 檔案中

# AngularJS 應用程式將模組和控制器包含在  JavaScript 檔案中。

在下列實例中， "myApp.js" 包含了應用程式模組的定義程序， "myCtrl.js" 檔案包含了控制器：

實例

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

運行實例»

點擊"運行實例"按鈕查看線上實例

myApp.js

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

Note在模組定義中[] 參數用於定義模組的依賴關係。
中括號[]表示該模組沒有依賴，如果有依賴的話會在中括號寫上依賴的模組名字。

myCtrl.js

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

#函數會影響到全域命名空間

JavaScript 中應避免使用全域函數。因為他們很容易被其他腳本檔案覆蓋。

AngularJS 模組讓所有函數的作用域在這個模組下，避免了這個問題。

什麼時候載入函式庫?

Note#在我們的實例中，所有AngularJS 函式庫都在HTML 文件的頭部載入。

對於 HTML 應用程序，通常建議把所有的腳本放在 <body> 元素的最底部。

這會提高網頁載入速度，因為 HTML 載入不受制於腳本載入。

在我們的多個 AngularJS 實例中，您將看到 AngularJS 函式庫是在文件的 <head> 區域被載入。

在我們的實例中，AngularJS 在 <head> 元素中被載入，因為對 angular.module 的呼叫只能在函式庫載入完成後才能進行。

另一個解決方案是在<body>  元素中載入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>

運行實例»##點擊"運行實例"按鈕查看線上實例

←
→