AngularJS モジュール
- 前のページ AngularJS 表現
- 次のページ 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 = "Bill";
$scope.lastName = "Gates";
});
</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://cdn.staticfile.net/angular.js/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 = "Bill";
$scope.lastName= "Gates";
});
関数はグローバルネームスペースを汚染する可能性があります。
JavaScript では、グローバル関数の使用を避けるべきです。他のスクリプトによって覆われるか破壊される可能性があります。
AngularJS モジュールは、すべての関数をモジュールローカルに保持することでこの問題を軽減します。
ライブラリのロード時期
HTML アプリケーションでは、スクリプトをどこに配置するかは重要ではありません。 <body> 要素の末尾にスクリプトを配置することはよくあるですが、推奨します。 <head> または <body> の先頭に AngularJS ライブラリをロードしてください。
これは、ライブラリをロードした後にのみコンパイルができるためです。 angular.module の呼び出し。
の呼び出し例。
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/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 = "Bill";
$scope.lastName = "Gates";
});
</script>
</body>
</html>
- 前のページ AngularJS 表現
- 次のページ AngularJS インストラクション
