AngularJSモジュール
モジュールはアプリケーションを定義します。
モジュールは、アプリケーションのさまざまな部分のコンテナです。
モジュールは、アプリケーションコントローラーのコンテナです。
コントローラーは通常、モジュールに属します。
モジュールを作成します
AngularjsのAngular.module関数を介してモジュールを作成できます。
<div ng-app = "myapp"> ... </div> <script> var app = angular.module( "myApp"、[]); </script>
「MyApp」パラメーターは、アプリケーションを実行するHTML要素に対応します。
これで、AngularJSアプリケーションにコントローラー、命令、フィルターなどを追加できます。
コントローラーを追加します
NG-Controllerディレクティブを使用して、アプリケーションのコントローラーを追加できます。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> {{firstName + "" + lastName}} </div> <script> var app = angular.module( "myApp"、[]); app.controller( "myctrl"、function($ scope){$ scope.firstname = "; $ scope =" "doe";}); </script> </body> </html>ランニング効果:
ジョン・ドー
AngularJSコントローラーの章で、コントローラーの詳細をご覧ください。
コマンドを追加します
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"> </scrip> </head> = angular.module( "myapp"、[]); app.directive( "runoobdirective"、function(){return {template: "私はディレクティブコンストラクター!"};}); </scrip> </body> </html>実行結果:
ディレクティブコンストラクターで作成しました!
AngularJSディレクティブの章で、ディレクティブの詳細をご覧ください。
モジュールとコントローラーはJSファイルに含まれています
通常、AngularJSアプリケーションには、JavaScriptファイルのモジュールとコントローラーが含まれます。
次の例では、「myApp.js」にはアプリケーションモジュールのDefinerが含まれており、「myctrl.js」ファイルにはコントローラーが含まれています。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> 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モジュールを使用すると、この問題を回避するために、すべての機能をこのモジュールの下でスコープできます。
ライブラリはいつロードされますか?
注:インスタンスでは、すべてのAngularJSライブラリがHTMLドキュメントのヘッドにロードされます。
HTMLアプリケーションの場合、すべてのスクリプトを<body>要素の下部に配置することをお勧めします。
これにより、HTMLの読み込みはスクリプトの読み込みの対象ではないため、Webページの読み込み速度が向上します。
複数のAngularJSインスタンスでは、AngularJSライブラリがドキュメントの<head>領域にロードされていることがわかります。
この例では、Angular.moduleへの呼び出しはライブラリがロードされた後にのみ作成できるため、Angularjsは<head>要素にロードされます。
別の解決策は、AngularJSライブラリを<body>要素にロードすることですが、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"> </scrip> </head> ng-controller = "myctrl"> {{firstName + "" + lastName}} </div> <script> var app = angular.module( "myApp"、[]); app.controller( "myctrl"、function($ scope){$ scope.firstname = "; $ scope =" "doe";}); </script> </body> </html>実行結果:
ジョン・ドー
上記はAngularJSモジュール情報の編集であり、後で追加し続けます。友達のプログラミングに役立つことを願っています。