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

AngularJS とは何ですか?

AngularJs (以下、ng) は、動的な Web アプリケーションを設計するための構造フレームワークです。まず、これはクラス ライブラリではなくフレームワークであり、EXT と同様に、Web アプリケーションを設計するための完全なソリューション セットを提供します。そのコアは実際には HTML タグの拡張であるため、単なる JavaScript フレームワークではありません。

HTML タグの拡張とは何ですか?実際、タグを使用してページ ロジックの一部を完成させることができます。その具体的な方法は、カスタム タグ、カスタム属性などです。HTML にネイティブではないこれらのタグ/属性には、ng: ディレクティブで名前が付けられます。これについては後で詳しく説明します。では、動的 Web アプリケーションとは何でしょうか?従来の Web システムとは異なり、Web アプリケーションはユーザーに豊富な操作を提供し、URL ジャンプを行わずにユーザーの操作に応じてビューを継続的に更新できます。 ng 公式はまた、ゲームや画像処理アプリケーションよりも、CRUD アプリケーション、つまりデータ操作が多いアプリケーションの開発に適していると述べています。

これを達成するために、ng はテンプレート メカニズム、データ バインディング、モジュール、ディレクティブ、依存関係の注入、ルーティングなどの優れた機能をいくつか導入しました。データとテンプレートをバインドすることで、面倒な DOM 操作を排除し、ビジネス ロジックに集中できます。

もう一つの質問ですが、ng は MVC フレームワークですか?それともMVVMフレームワークでしょうか？公式ウェブサイトでは、ng の設計は MVC の基本的な考え方を採用していると述べられていますが、コードを記述するときに実際に ng-controller 命令を使用しているため、完全に MVC ではありません (少なくとも名前からは MVC です) ) ですが、これはコントローラーによって処理されるビジネスは基本的にビューと対話するものであり、これは MVVM に非常に近いようです。公式 Web サイトのあまり目立たないタイトル「AngularJS — Superheroic JavaScript MVW Framework」に注目してみましょう。

AngularJS の Module クラスは、アプリケーションの起動方法を定義する役割を果たします。また、宣言を通じてアプリケーション内のさまざまなフラグメントを定義することもできます。これらの機能がどのように実装されているかを見てみましょう。

1. Main メソッドはどこですか

Java または Python プログラミング言語を使用している場合は、AngularJS の main メソッドがどこにあるのか知りたいかもしれません。すべてを起動して最初に実行されるメソッドはどこにありますか?インスタンスを作成してすべてをまとめてから、アプリケーションに実行を開始するように指示するメソッドは、JavaScript コードのどこにありますか?

実際、AngularJS には main メソッドがありません。AngularJS は main メソッドを置き換えるためにモジュールの概念を使用します。モジュールを使用すると、アプリケーション内の依存関係と、それをアセンブルして起動する方法を宣言的に記述することができます。この方法を使用する理由は次のとおりです:

1. モジュールは宣言型です。つまり、書きやすく、理解しやすいということです。通常の英語を読むのと同じように読むことができます。

2. モジュール式です。そのため、コンポーネントと依存関係をより明確に定義する方法を考える必要があります。

3. テストが簡単になります。単体テストでは、モジュールを選択的に追加し、単体テストできないコード内のコンテンツを回避できます。同時に、シナリオのテストでは、他の追加モジュールをロードして、他のコンポーネントとより適切に連携できるようにすることができます。

たとえば、アプリケーションには「MyAwesomeApp」というモジュールがあります。 HTML では、次のコードを 100db36a723c770d327fc0aef2ce13b1 タグ (または技術的には任意のタグ) に追加します。

コードをコピーします コードは次のとおりです:

af21531c25ab507e2878278c9b640425

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');
});