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>
このチュートリアルの後半で、コントローラーについて詳しく学習します。
ディレクティブの追加
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>
ディレクティブの詳細については、このチュートリアルの後半で学習します。
ファイル内のモジュールとコントローラー
AngularJSアプリケーションでは、モジュールとコントローラーをJavaScriptファイルに入れるのが一般的です。
この例では、「myApp.js」にはアプリケーションモジュール定義が含まれ、「myCtrl.js」にはコントローラーが含まれています。
例
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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
var app = angular.module("myApp", []);
モジュール定義の[]パラメータを使用して、依存モジュールを定義できます。
[]パラメータがないと、新しいモジュール を作成するのではなく、既存のモジュールを取得します。
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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>