AngularJSモジュール
モジュールは、アプリケーションを定義します。
モジュールは、アプリケーションの異なる部分でコンテナです。
コントローラモジュールは、コンテナアプリケーションです。
コントローラは通常、モジュールに属しています。
モジュールを作成します。
あなたはangular.module機能のAngularJSてモジュールを作成することができます。
<スクリプト>
VARアプリ= angular.module（ "て、myApp」 、[]）;
「MyAppの "パラメータは、アプリケーションのHTML要素の実行に対応しています。
今、あなたはAngularJSアプリケーションでコントローラ命令、フィルターなどを追加することができます。
コントローラの追加
あなたは、アプリケーションのコントローラを追加するには、NG-コントローラ命令を使用することができます。
AngularJS例
{{姓+ "" + lastNameの }}
</ DIV>
<スクリプト>
app.controller（「myCtrl」、関数（ $スコープ）{
$ scope.firstName = "ジョン"。
$ scope.lastName = "ドウ";
}）;
»をお試しください
あなたがすることができますAngularJSコントローラは、コントローラ部の詳細な知識を学びます。
指示を追加
AngularJSは、あなたのアプリケーションに機能を追加するためにそれらを使用することができ、多くの組み込みコマンドが用意されています。
詳細な手順は、の内容で見つけることができAngularJSリファレンスマニュアル 。
また、独自の命令のアプリケーションを追加するモジュールを使用することができます。
AngularJS例
<スクリプト>
app.directive（「w3bigDirective」、関数（ ）{
リターン{
テンプレート：「私は命令のコンストラクタを作成しました！」
};
}）;
»をお試しください
あなたがすることができます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"> </スクリプト>
<ボディ>
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl">
{{姓+ "" + lastNameの }}
</ DIV>
<スクリプトSRC = "myApp.js"> </スクリプト>
<スクリプトSRC = "myCtrl.js"> </スクリプト>
</ BODY>
</ HTML>
»をお試しください
myApp.js
 | モジュール定義では[]パラメータは、モジュールの依存関係を定義するために使用されます。 依存性がある場合は括弧[]その後、括弧内に書かれたモジュール名に依存し、モジュールが依存しないことを示しています。 |
|---|
myCtrl.js
$scope.firstName = "John";
$scope.lastName= "Doe";
});
関数はグローバル名前空間に影響を与えます
JavaScriptがグローバル関数を使用しないようにしてください。 彼らは簡単に別のスクリプトファイルで覆うことができるので。
モジュール内のすべての関数は、問題を回避するように、モジュールスコープをAngularJS。
ライブラリをロードするとき？
| この例では、すべてのAngularJSのHTMLドキュメントライブラリは、頭の中にロードされます。 |
|---|
一般的に、すべてのスクリプトに推奨されるHTMLアプリケーションでは、<body>要素の底部に配置されます。
HTMLをロードするためのスクリプトをロードする対象ではないので、これは、ページの読み込み速度が向上します。
当社の複数のAngularJSの例では、AngularJSライブラリは、文書の<head>の領域にロードされて表示されます。
呼び出しが唯一のライブラリの読み込みが完了した後に行うことangular.moduleするため、この例では、<head>要素でAngularJSは、ロードされます。
別の解決策は、AngularJSライブラリ<body>要素をロードすることですが、あなたのAngularJSスクリプトの前に配置する必要があります。
AngularJS例
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8 ">
<SCRIPT SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </スクリプト>
</ HEAD>
<ボディ>
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl">
{{姓+ "" + lastNameの }}
</ DIV>
<スクリプト>
VARアプリ= angular.module（ "て、myApp」、[]）;
app.controller（「myCtrl」、関数（$スコープ）{
$ Scope.firstName = "ジョン"。
$ Scope.lastName = "ドウ";
}）;
</スクリプト>
</ BODY>
</ HTML>
»をお試しください