AngularJSモジュールメソッドの詳しい説明_AngularJS

ng-app ディレクティブは、MyAwesomeApp モジュールを使用してアプリケーションを起動するように AngularJS に指示します。では、モジュールはどのように定義すればよいのでしょうか?たとえば、サービス、ディレクティブ、フィルターに対して個別のモジュールを定義することをお勧めします。その後、メイン モジュールはこれらのモジュールへの依存関係を宣言できます。

これにより、モジュールの管理が容易になります。これらはすべて優れた完全なコード ブロックであり、各モジュールには 1 つの関数しかないからです。同時に、単体テストは焦点を当てたモジュールのみをロードできるため、初期化の数が削減され、単体テストがより洗練され、焦点が絞られたものになります。

2. 読み込みと依存関係

モジュールのロード アクションは、関数名からわかるように、Config コード ブロックと Run コード ブロック (またはステージと呼ばれます) の 2 つの異なるステージで発生します。

1.Config コードブロック

この段階では、AngularJS はすべてのデータ ソースに接続して登録します。したがって、Config ブロックに挿入できるのはデータ ソースと定数のみです。初期化されているかどうかが不明なサービスは挿入できません。

2.コードブロックの実行

Run コード ブロックは、アプリケーションを起動し、インジェクターの作成後に実行を開始するために使用されます。この時点以降にシステムを構成する必要がないようにするには、インスタンスと定数のみを Run ブロックに挿入できます。 AngularJS では、Run ブロックが main メソッドに最も似ていることがわかります。

3. 簡単な方法

モジュールで何ができるの?これを使用してコントローラー、ディレクティブ、フィルター、サービスをインスタンス化できますが、モジュール クラスでできることはさらにたくさんあります。 API メソッドは次のように構成されています:

1.config(configFn)

このメソッドを使用して、モジュールのロード時に完了する必要がある登録作業を行うことができます。

2.constant(名前, オブジェクト)

このメソッドは最初に実行されるため、このメソッドを使用してアプリケーション全体の定数を宣言し、それらをすべての構成 (config メソッド) およびインスタンス (コントローラー、サービスなどの後続のすべてのメソッド) メソッドで使用できるようにすることができます。

3.コントローラー(名前,コンストラクター)

その基本的な機能は、後で使用できるようにコントローラーを設定することです。

4.directive(name,directiveFactory)

このメソッドを使用して、アプリ内にディレクティブを作成できます。

5.filter(name,filterFactory)

前のセクションで説明したように、名前付き AngularJS フィルターを作成できます。

6.run(初期化Fn)

インジェクターの開始後にいくつかのアクションを実行したい場合は、このメソッドを使用できますが、これらのアクションはユーザーがページを使用できるようになる前に実行する必要があります。

7.value(名前,オブジェクト)

アプリケーション全体に値を挿入できるようにします。

8.factory(name,factoryFn)

クラスまたはオブジェクトがあり、初期化する前にいくつかのロジックまたはパラメーターを提供する必要がある場合は、ここでファクトリ インターフェイスを使用できます。ファクトリは、いくつかの特定の値 (またはオブジェクト) を作成する役割を担う関数です。グリーター関数の例を見てみましょう。この関数には初期化するためのグリーティングが必要です。

function Greeter(salutation) {
 this.greet = function(name) {
 return salutation + ' ' + name;
};
}

グリーター関数の例は次のとおりです。

myApp.factory('greeter', function(salut) {
 return new Greeter(salut);
});

次に、次のように呼び出すことができます:

var myGreeter = greeter('Halo');

9.service(名前,オブジェクト)

ファクトリとサービスの違いは、ファクトリは渡された関数を直接呼び出して実行結果を返すのに対し、サービスは「new」キーワードを使用して渡されたコンストラクタを呼び出して結果を返すことです。したがって、以前のグリーター ファクトリは次のグリーター サービスに置き換えることができます:

myApp.service('greeter', Greeter);

每当我们需要一个greeter实例的时候，AngularJS就会调用新的Greeter()来返回一个实例。

10.provider(name,providerFn)

provider是这几个方法中最复杂的部分（显然，也是可配置性最好的部分）。provider中既绑定了factory也绑定了service，并且在注入系统准备完毕之前，还可以享受到配置provider函数的好处（也就是config块）。

我们来看看使用provider改造之后的greeter Service是什么样子：

myApp.provider('greeter', function() {
 var salutation = 'Hello';
 this.setSalutation = function(s) {
 salutation = s;
}
 function Greeter(a) {
 this.greet = function() {
 return salutation + ' ' + a;
}
}
 this.$get = function(a) {
 return new Greeter(a);
};
});

这样我们就可以在运行时动态设置问候语了（例如，可以根据用户使用的不同语言进行设置）。

var myApp = angular.module(myApp, []).config(function(greeterProvider) {
greeterProvider.setSalutation('Namaste');
});