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> »それを自分で試してみてください 後でこのチュートリアル内のディレクティブについての詳細を学びます。
ファイル内のモジュールとコントローラ
これは、JavaScriptファイル内のモジュールとコントローラを置くためにAngularJSのアプリケーションで共通しています。
「myCtrl.jsは「コントローラが含まれていながら、この例では、「myApp.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>
»それを自分で試してみてください 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="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>
»それを自分で試してみてください