AngularJSモジュールについて話す前に、最初にAngularの知識ポイントを紹介しましょう。
AngularJSは純粋なクライアントテクノロジーであり、JavaScriptで完全に書かれています。 Web開発の従来のテクノロジー(HTML、CSS、JavaScript)を使用して、Webアプリケーション開発をより迅速かつ容易にします。
AngularJSは、アプリケーション開発を簡素化することです。一般的な低レベルの開発操作をパッケージ化して、開発者に提供します。 AngularJSは、これらの低レベル操作を自動的に処理します。それらは次のとおりです:
1.DOM操作
2。イベントのリスニングを設定します
3.入力検証AngularJSはこれらの操作のほとんどを処理するため、開発者はアプリケーションのビジネスロジックにもっと集中し、繰り返し、エラーが発生しやすい、低レベルのコードを書き込むことができます。
AngularJSは開発を簡素化していますが、以下を含むいくつかの絶妙なテクノロジーもクライアントにもたらします。
1。データ、ビジネスロジック、およびビューの分離
2。データとビューの自動結合
3。一般サービス
4。依存関係注射(主に集約サービスに使用)
5。拡張可能なHTMLコンパイラ(JavaScriptによって完全に書かれています)
6.テストしやすい
7.これらのテクノロジーに対するクライアントの要求は、実際に長い間存在してきました。
同時に、AngularJを使用してシングルページまたはマルチページアプリケーションを開発することもできますが、主に単一ページアプリケーションの開発に使用されます。 AngularJSは、ブラウザの履歴オペレーション、フォワードボタンとバックボタン、および単一ページアプリケーションでのお気に入りの操作をサポートしています。
次に、Angularjsのモジュールを詳細に説明しましょう。
ほとんどのアプリケーションには、アプリケーションをインスタンス化、整理、起動するための主要な方法があります。 AngularJSアプリケーションには主要な方法はありませんが、モジュールを使用してアプリケーションの開始方法を宣言します。この方法には次の利点があります。
1.スタートアッププロセスは宣言的であるため、理解しやすいです。
2。単体テストでは、すべてのモジュールをロードする必要はないため、この方法はユニットテストの書き込みに役立ちます。
3.特定の状況では、追加のモジュールをテストに追加できます。これらのモジュールは構成を変更でき、エンドツーエンドのテストに役立ちます。
4.サードパーティコードは、再利用可能なモジュールにパッケージ化できます。
5.モジュールは、シーケンスまたは並列性の任意の順序でロードできます(モジュール自体の実行が遅れているため)。
例えば:
<!doctype html> <html ng-app = "myapp"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <script> var myappmodule = angular.module( 'myapp'、[]); //モジュールを構成します。 //この例では、グリーティングフィルターmyAppModule.filter( 'Greet'、function(){return function(name){return 'hello、' + name + '!';};})を作成します。 </script> </head> <body> <div> {{'world' | Greet}} </div> </body> </html>上記の例では、myAppモジュールを使用して、アプリケーションを<html ng-app = "myApp">で指定して開始します。
上記の例は非常に簡単ですが、同じ方法で大規模なアプリケーションを作成するのに適していません。私たちの推奨事項は、アプリケーションを次のモジュールに分割することです。
1.サービス宣言を行うために使用されるサービスモジュール。
2。命令宣言を作成するために使用される命令モジュール。
3.フィルター宣言を作成するために使用されるフィルターモジュール。
4.初期化コードを含む上記のモジュールに依存するアプリケーションレベルのモジュール。
例えば:
<!doctype html> <html ng-app = "xmpl"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <script src = "script.js"> </script {{グリーティング}}! </div> </body> </html> [/code] script.js:[code] angular.module( 'xmpl.service'、[])。 //サービスモジュール値( 'Greeter'、{// Custom Greeter Object Salution: 'hello'、locialize:function(locialization){this.salutation = locialization.salution;}、greet:function(name){return this.salution + '' + name + ';}})。 value( 'user'、{//カスタムユーザーオブジェクトロード:function(name){this.name = name;}}); angular.module( 'xmpl.directive'、[]); //命令モジュールangular.module( 'xmpl.filter'、[]); //フィルターモジュールAngular.module( 'xmpl'、['xmpl.service'、 'xmpl.directive'、 'xmpl.filter'])。 //モジュールXmplは、配列のモジュール実行(function(greeter、user){//コードの初期化。アプリケーションが起動したとき、greeter.localize({nolution: 'bonjour'}); user.load( 'world');})// appvar xmplonollerer = scope、scope、scope、scope、scope、scope、scope、scope、scope、scope、ユーザーGreeter.Greet(user.name);}この分割の理由は、テストの初期化コードを無視する必要があることが多いためです。これらのコードはテストがより困難であるためです。分割することで、テストで簡単に無視できます。このテストは、現在のテストに関連するモジュールのみをロードすることにより、より具体的にすることもできます。上記は単なる提案です。特定の状況に応じて調整するために安心できます。
モジュールは、スタートアップ段階でアプリケーションに接続されている一連の構成とコードブロックのコレクションです。最も単純なモジュールは、2セットのコードブロックで構成されています。
構成コードブロック - 注入プロバイダーのインジェクションと構成フェーズ中に実行します。注入プロバイダーと定数のみを構成ブロックに注入できます。これは、サービスが構成される前に事前に初期化されないようにするためです。
コードブロックを実行する - インジェクターが作成された後に実行され、アプリケーションを起動するために使用されます。インスタンスと定数のみを実行ブロックに注入できます。これは、システム構成が操作後に発生しないようにするためです。
コード実装:
Angular.module( 'mymodule'、[])。 config(function(injectables){// provider-injector configコードブロック//これは構成ブロックの例です。 run(function(injectables){// instance-injector config code block //これは実行ブロックの例です。モジュールには設定する簡単な方法もいくつかあり、それらを使用することはコードブロックの使用と同等です。例えば:
Angular.module( 'mymodule'、[])。値( 'A'、123)。 Factory( 'a'、function(){return 123;})。ディレクティブ( 'directivename'、...)。 filter( 'filtername'、...); //は同じasangular.module( 'mymodule'、[])です。 config(function($ sultion、$ compileprovider、$ filterprovider){$ sultion.value( 'a'、123)$ detwory( 'a'、function(){return 123;})$ compileprovider.directive( 'directivename'、...)。$ filterprovider.register( 'filtername'、...);構成ブロックは、$ sultion、$ compileprovider、$ filterprovider、および$ filterproviderの登録順に適用されます。唯一の例外は、構成ブロックの先頭に常に配置する必要がある定数の定義です。
ランニングブロックは、AngularJSの主要な方法に最も似ています。実行ブロックは、アプリケーションを開始するために使用されるコードです。すべてのサービスが構成され、すべてのインジェクターが作成された後に実行されます。実行中のブロックには通常、テストが困難なコードが含まれているため、単位テスト中に無視できるように、個別のモジュールで記述する必要があります。
モジュールは、他のモジュールをその依存関係としてリストできます。 「特定のモジュールに依存する」とは、モジュールの前に従属モジュールをロードする必要があることを意味します。つまり、このモジュールの構成ブロックの前に、従属モジュールの構成ブロックが実行されます。同じことがブロックを実行することにも当てはまります。複数のモジュールに依存している場合でも、モジュールは一度しかロードできません。
モジュールは、$ injector構成を管理するために使用される方法であり、スクリプトの読み込みとは何の関係もありません。インターネットに制御モジュールをロードするためのライブラリがたくさんあり、AngularJSで使用できます。モジュールはロード中に何もしないため、任意の順序または並行してロードできます