AngularJS モジュール

AngularJS のモジュールは、アプリケーションを定義します。

モジュールは、アプリケーションのいろいろな部分のコンテナです。

モジュールは、アプリケーション・コントローラーのコンテナです。

コントローラは、常にモジュールに属します。

モジュールの作成

モジュールは、AngularJS 関数 angular.module を使用して作成します。

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

<script>

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

</script>

"myApp" パラメータは、アプリケーションを実行する HTML 要素を参照します。

これで、AngularJS アプリケーションに、コントローラ、ディレクティブ、フィルタなどを追加することができます。

コントローラの追加

アプリケーションにコントローラを追加し、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>
Try it Yourself »

このチュートリアルの後段で、コントローラについての詳細を学習します。

ディレクティブの追加

AngularJS は、アプリケーションに機能を追加するために使用できる、組込みディレクティブを持っています。

完全なリファレンスについては、 AngularJS ディレクティブ・リファレンスをご覧ください。

また、アプリケーションに独自のディレクティブを追加するために、モジュールを使用することもできます：

例

<div ng-app="myApp" w3-test-directive></div>

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

app.directive("w3TestDirective", function() {
    return {
        template : "I was made in a directive constructor!"
    };
});
</script>
Try it Yourself »

このチュートリアルの後段で、ディレクティブについての詳細を学習します。

ファイル内のモジュールとコントローラ

AngularJS アプリケーションでは、モジュールとコントローラを JavaScript ファイルに入れることが一般的です。

この例では、"myApp.js" がアプリケーション・モジュール定義を含んでいる一方、"myCtrl.js" はコントローラを含んでいます：

例

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>
Try it Yourself »

myApp.js

var app = angular.module("myApp", []);
Note モジュール定義の [] パラメータは、依存するモジュールを定義するために使用できます。
Note [] パラメータを指定しないと、新しいモジュールを作成はしませんが、既存のものを検索します。

myCtrl.js

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

関数はグローバル名前空間を汚染する

このチュートリアルにおける、これまでのすべての例では、グローバル関数を使用しています。

JavaScript では、グローバル関数を使用しないようにすべきです。グローバル関数は、 他のスクリプトで上書きまたは破壊することが簡単にできます。

AngularJS モジュールは、モジュールをすべてローカルな関数に保持することによって、この問題を低減しています。

いつライブラリをロードするか

HTML アプリケーションでは、スクリプトを <body> 要素の最後に配置するのが一般的ですが、 AngularJS ライブラリは <head> の中か、<body> の先頭にロードすることをお勧めします。

ライブラリがロードされた後でしか、angular.module の呼び出しがコンパイルできないからです。

例

<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<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>
Try it Yourself »