AngularJS モジュール


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

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

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

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

モジュールを作成する

AngularJS の angular.module 関数を使用してモジュールを作成できます:

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

<script>

var app =アプリ「、[ ]) 「myApp」パラメータは、アプリケーションを実行する HTML 要素に対応します。 これで、AngularJS アプリケーションにコントローラー、ディレクティブ、フィルターなどを追加できるようになりました。

コントローラーの追加
ng-controllerコマンドを使用して、アプリケーションのコントローラーを追加できます: インスタンス
<!DOCTYPE html>
<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>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

コントローラーについて詳しくは、「AngularJS コントローラー」の章をご覧ください。

ディレクティブの追加

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

完全な手順の内容については、AngularJS リファレンス マニュアルを参照してください。

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

インスタンス

<!DOCTYPE html>
<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" php-directive></div>

<script>

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

app.directive("phpDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

</body>
</html>

インスタンスの実行»

オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください

ディレクティブの詳細については、「AngularJS ディレクティブ」の章を参照してください。

モジュールとコントローラーは JS ファイルに含まれます

通常、AngularJS アプリケーションには JavaScript ファイルにモジュールとコントローラーが含まれます。

次の例では、「myApp.js」にはアプリケーション モジュール定義プログラムが含まれ、「myCtrl.js」ファイルにはコントローラーが含まれています。 「 」ボタンをクリックするとオンラインの例が表示されます

myApp.js

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

Note モジュール定義では、[] パラメーターを使用して依存関係を定義します。モジュール。
角括弧 [] は、モジュールに依存関係がないことを示します。依存関係がある場合は、依存するモジュール名が角括弧内に記述されます。

myCtrl.js

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

関数はグローバル名前空間に影響します

グローバル関数はJavaScriptでは避けるべきです。他のスクリプト ファイルによって簡単に上書きされる可能性があるためです。

AngularJS モジュールは、すべての関数をこのモジュールの下にスコープし、この問題を回避します。

ライブラリはいつロードされますか?

Noteこの例では、すべての AngularJS ライブラリが HTML ドキュメントの先頭でロードされます。

HTML アプリケーションの場合、通常、すべてのスクリプトを <body> 要素の一番下に配置することをお勧めします。

これにより、HTML の読み込みはスクリプトの読み込みの影響を受けないため、Web ページの読み込み速度が向上します。

複数の AngularJS インスタンスでは、AngularJS ライブラリがドキュメントの <head> 領域に読み込まれていることがわかります。

この例では、angular.module への呼び出しはライブラリのロード後にのみ実行できるため、AngularJS は <head> 要素にロードされます。

もう 1 つの解決策は、AngularJS ライブラリを <body> 要素にロードすることですが、AngularJS スクリプトの前に配置する必要があります:

Instance

<!DOCTYPE html>
<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 src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

Run Instance»

「Run Instance」をクリックしますボタン オンラインの例を見る

←
→