AngularJS モジュール
モジュールはアプリケーションを定義します。
モジュールはアプリケーション内のさまざまな部分のコンテナです。
モジュールはアプリケーションのコントローラのコンテナです。
コントローラは通常、あるモジュールに属します。
モジュールの作成
あなたは AngularJS のangular.module関数を使用してモジュールを作成できます：
<script>
var app = angular.module("myApp", []);
「myApp」パラメータは、アプリケーションを実行するHTML要素に対応します。
これで、AngularJS アプリケーションにコントローラ、ディレクティブ、フィルタなどを追加できます。
コントローラの追加
あなたはng-controllerディレクティブを使用してアプリケーションのコントローラを追加できます:
AngularJS サンプル
{{ firstName + " " + lastName }}
</div>
<script>
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
試してみる »
あなたはAngularJS コントローラの章で、コントローラについて詳しく学ぶことができます。
ディレクティブの追加
AngularJS には多くの組み込みディレクティブが用意されており、それらを使用してアプリケーションに機能を追加できます。
完全なディレクティブの内容については、AngularJS リファレンスマニュアルを参照してください。。
さらに、モジュールを使用して独自のディレクティブをアプリケーションに追加できます：
AngularJS サンプル
<script>
app.directive("サンプルDirective", function() {
return {
template : 「ディレクティブコンストラクタで作成されました！」
};
});
試してみる »
あなたはAngularJS ディレクティブの章で、ディレクティブについて詳しく学ぶことができます。
モジュールとコントローラはJSファイルに含まれます
通常、AngularJS アプリケーションではモジュールとコントローラを JavaScript ファイルに含めます。
次の例では、「myApp.js」がアプリケーションモジュールの定義を含み、「myCtrl.js」ファイルがコントローラを含みます：
AngularJS サンプル
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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>
試してみる »
myApp.js
 |
モジュール定義では、[] パラメータはモジュールの依存関係を定義するために使用されます。 角括弧[]は、そのモジュールに依存関係がないことを示します。依存関係がある場合は、角括弧内に依存するモジュール名を書きます。 |
|---|
myCtrl.js
$scope.firstName = "John";
$scope.lastName= "Doe";
});
関数はグローバル名前空間に影響を与えます
JavaScriptではグローバル関数の使用を避けるべきです。他のスクリプトファイルによって簡単に上書きされる可能性があるためです。
AngularJS モジュールはすべての関数のスコープをそのモジュール内に限定し、この問題を回避します。
いつライブラリを読み込むべきか?
|
私たちの例では、すべての AngularJS ライブラリは HTML ドキュメントの head 部分で読み込まれます。 |
|---|
HTML アプリケーションでは、通常、すべてのスクリプトを <body> 要素の一番下に配置することをお勧めします。
これによりウェブページの読み込み速度が向上します。HTML の読み込みがスクリプトの読み込みに制約されないためです。
私たちの複数の AngularJS サンプルでは、AngularJS ライブラリがドキュメントの <head> 領域で読み込まれているのを確認できます。
私たちの例では、AngularJS は <head> 要素内で読み込まれます。angular.module の呼び出しはライブラリの読み込み完了後にのみ行えるためです。
もう1つの解決策は、AngularJS ライブラリを <body> 要素内で読み込むことですが、AngularJS スクリプトの前に配置する必要があります：
AngularJS サンプル
<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>
試してみる »