1。モジュールとは何ですか?
多くのアプリケーションには、初期化、読み込み(ワイヤは意味がありますか?)、およびアプリケーションの起動の主な方法があります。 Angularアプリケーションでは、主な方法は必要ありません。代わりに、モジュールは、アプリケーションの開始方法の指定された目的、説明的な説明を備えた宣言フォームを提供します。これを行うことにはいくつかの利点があります:
2。基本
Hello Worldモジュールを機能させる方法を知りたいと思っています。ここに注意を払うためのいくつかの重要なことがあります:
モジュールAPI(http://code.angularjs.org/1.0.2/docs/api/angular.module)
<html ng-app = "myApp">に記載されているMyAppモジュールに注意してください。これにより、ランチャーが定義したMyAppモジュールを起動できます。
<!doctype html> <html lang = "zh-cn" ng-app = "myapp"> <head> <head> <head> <head> <title> basics </title> <style type = "text/css"> .ng-cloak {display:none:none; } </style> </head> <body> <div> {{'kitty' | Greet}} </div> <Script src = "../ Angular-1.0.1.js" Type = "Text/JavaScript"> </script> <script = "text/javascript"> var simplemodule = angular.module( "myApp"、[]); simplemodule.filter( "greed"、function(){return function(name){return "hello" + name + "!";}}); </script> </body> </html>3。(推奨セットアップ)推奨セットアップ
上記の例は簡単ですが、大規模なアプリケーションではありません。次のように、アプリケーションを複数のモジュールに分割することをお勧めします。
この部門の理由は、テストするときに、テストを困難にする初期化コードを無視する必要があることが多いためです。コードを個別のモジュールに分割することにより、テストでそのコードを無視するのは簡単です。このようにして、テスト用の対応するモジュールのロードにもっと焦点を当てることができます。
上記は単なる提案であり、あなたが望むようにそれを作ることができます。
4.モジュールの読み込みと依存関係(モジュールの読み込みと依存関係)
モジュールは、アプリケーションを起動するプロセスで適用されるブロックを実行する構成のコレクションです。最も単純な形式では、2種類のブロックで構成されています。
1。構成ブロック:プロバイダーの登録と構成のプロセス中に実行されます。プロバイダーと定数(定数?)のみを構成ブロックに注入できます。これは、サービスが構成される前にサービスが実行される事故を回避するためです。
2。ブロックの実行:インジェクターが作成された後、アプリケーションを起動するために使用された後に実行します。インスタンスと定数のみを実行ブロックに注入できます。これは、プログラムの操作中のさらなるシステム構成の実行を回避するためです。
Angular.module( 'mymodule'、[])。 config(function(injectables){// provider-injector // config blockの例です//必要に応じてnそのようなものを取得できます// configブロックにプロバイダー(インスタンスではなく、インスタンスではなく)を挿入できます})。 run(function(injectables){// instance-injector // run blockの例ですa)構成ブロック
モジュールでそれを行う便利な方法があり、これは構成ブロックに相当します。例えば:
Angular.module( 'mymodule'、[])。値( 'A'、123)。 Factory( 'a'、function(){return 123;})。ディレクティブ( 'directivename'、...)。 filter( 'filtername'、...); // angular.module( 'mymodule'、[])に相当します。 config(function($ sultion、$ compileprovider、$ filterprovider){$ sultion.value( 'a'、123)$ detwory( 'a'、function(){return 123;})$ compileprovider.directive( 'directivename'、...)。$ filterprovider.register( 'filtername'、...);構成ブロックが適用される順序は、登録されている順序と一致しています。一定の定義の場合、それは追加のケースです。つまり、構成ブロックの先頭に配置された定数定義です。
b)実行ブロック(アプリケーションブロック)
実行ブロックは、Angularの主要な方法に最も近いものです。実行ブロックは、アプリケーションを開始するために実行する必要があるコードです。すべてのサービス構成とインジェクターが作成された後に実行されます。実行ブロックには通常、単位テストがより困難なコードが含まれています。このため、これらのコードは、単体テストで無視できるように、別のモジュールで定義する必要があります。
c)依存関係(依存関係)
モジュールは、依存する他のモジュールをリストできます。モジュールに依存するということは、モジュール(他のモジュールに依存する必要があるモジュール、要求者)がロードされる前に、要求されたモジュール(信頼性)をロードする必要があることを意味します。言い換えれば、要求されたモジュールの構成ブロックは、構成ブロックまたは必要なモジュールの前に実行されます。実行ブロックにも同じことが言えます。それを必要とする他の複数のモジュールがある場合でも、各モジュールは一度しかロードできません。
d)非同期負荷(非同期荷重)
モジュールは、VMにスクリプトを読み込むことで何もすることなく、$インジェクターの構成を管理する方法の1つです。現在、スクリプトの読み込み用に特別に設計された既製のプロジェクトがあり、Angularでも使用できます。モジュールはロード中に何もしないため、任意の順序でVMにロードできます。スクリプトローダーは、この機能を使用して並列負荷を実行できます。
5。単体テスト
単体テストの最も単純な形式では、テストでアプリケーションのサブセットをインスタンス化してから実行することです。重要なことに、各インジェクターについて、各モジュールが1回しかロードされないことを認識する必要があります。通常、アプリケーションには1つのインジェクターのみがあります。しかし、テストでは、各テストケースにはインジェクターがあります。つまり、各VMでモジュールが複数回ロードされることを意味します。次の例のように、モジュールを正しく構築すると、ユニットテストが役立ちます。
この例では、次のモジュールが定義されていると仮定する準備をします。
Angular.Module( 'GreetMod'、[])。Factory( 'alert'、function($ window){return function(text){$ window.alert(text);};})。いくつかのテストケースを書きましょう:
説明( 'myApp'、function(){//アプリケーション応答のモジュールをロードし、次に$ウィンドウをモックバージョンに書き換える指定されたテストモジュールをロードします。実際の$ windoは、「$ window」、{alert:jasmine.createspy( 'alert'))を置き換えます。 $ window){'world'); $ value(alertspy);