AngularJS_AngularJS のライフサイクルと遅延処理の簡単な分析-jsチュートリアル-php.cn

AngularJS_AngularJS のライフサイクルと遅延処理の簡単な分析

WBOY

リリース： 2016-05-16 15:54:06

オリジナル

1201 人が閲覧しました

ここでは、一般的に使用される高度な制御反転コンテナー (遅延読み込み、有効期間管理、遅延作成/処理の解決) について説明します。

遅延読み込み

いわゆる遅延読み込みとは、オブジェクトを使用する必要があるときにオブジェクトをインスタンス化することです。多くの依存関係注入システムは、最初からコンポーネントを依存関係として作成します。ただし、アプリケーションで使用するまでこれらのコンポーネントをインスタンス化したくない場合もあります。 Angular では、構成中に動作を設定し、その動作がまだ作成されていないコンポーネントを参照する場合が好例です。

システムの組み込み $log サービスをインターセプトしたいので、それを $rootScope に保存するとします。もちろんこれはお勧めしませんが、この例はよりシンプルで効果的です。インターセプトするには、構成中に $provide を使用し、変更されたメソッドを呼び出します。この時点で $rootScope を直接参照しようとすると、循環参照による例外が発生します。そして、解決策は $injector 経由で $rootScope を遅延ロードすることです。

次のコードは、$rootScope を初めて使用するときにのみロードします。

$provide.decorator(, [, ,
   ($delegate, $injector) {
     log = $delegate.log.bind($delegate);
    $delegate.log = (msg) {
       rs = $injector.get();
       (rs.logs === undefined) {
        rs.logs = [];
      }
      rs.logs.push(msg);
      log(msg);
    };
     $delegate;
}]);

ログイン後にコピー

次の呼び出しでは、同じシングルトン $rootScope が取得されます。これは実際の例です。以前に（間違った）ステートメントを聞いたような気がします（Angular はシングルトンのみをサポートしています）...もちろん、それは真実ではありません。 $injector のメソッドは、コンポーネントのライフサイクルを管理するために使用されます。

ライフサイクル管理

ライフサイクルには、コンポーネントのインスタンスを管理する方法が含まれます。デフォルトでは、Angular の依存関係を注入すると、Dependency Injection によってそのコピーが作成され、アプリケーションで再利用されます。ほとんどの場合、これはまさに私たちが期待しているとおりです。場合によっては、同じコンポーネントの複数のインスタンスが必要になります。次の計数サービスを想定します:

Counter($log) {
  $log.log();
}
 
angular.extend(Counter.prototype, {
  count: 0,
  increment: () {
    .count += 1;
     .count;
  }
});
 
Counter.$inject = [];
 
app.service(, Counter);

ログイン後にコピー

アプリケーションはさまざまなカウンターを追跡します。サービスを挿入すると、常に同じカウンターが得られます。これは Angular の制限ですか?

もちろんそうではありません。繰り返しますが、$injector サービスを介していつでも新しいコピーを作成できます。次のコードは 2 つの独立したカウンターを使用します:

app.run([, , ,
   (rs, c, i) {
    rs.count = c.count;
    rs.update = c.increment;
    rs.update2 = () {
       c = i.instantiate(Counter);
      rs.count2 = c.count;
      rs.update2 = () {
        c.increment();
        rs.count2 = c.count;
      };
    };
  }]);

ログイン後にコピー

カウンターが個別のインスタンスによって追跡されていることがわかります。使用可能な例を次に示します。新しいインスタンスを頻繁に生成する必要がある場合は、次のようにサービスを登録できます:

app.factory(, [,
   (i) {
     {
      getCounter: () {
         i.instantiate(Counter);
      }
    };
  }]);

ログイン後にコピー

必要なインスタンスを生成するのは非常に簡単で、$injector:
の代わりにファクトリコンポーネントを使用できます。

app.run([, ,
   (rs, cf) {
     c1 = cf.getCounter(),
      c2 = cf.getCounter();
    rs.count = c1.count;
    rs.update = c1.increment;
    rs.count2 = c2.count;
    rs.update2 = () {
      rs.count2 = c2.increment();
    };
  }]);

ログイン後にコピー

この利用可能なサンプルの完全版をチェックしてください。ご覧のとおり、Angular の組み込み依存関係注入を使用してコンポーネントのライフサイクルを管理することは完全に可能です。遅延解決についてはどうでしょうか。たとえば、Angular の構成後に取り込む必要があり、依存関係でラップする必要があるコンポーネントがあります。

遅延解決

Angular で依存関係を遅延処理する方法を導入しました。何かをラップしたいときは、$injector サービスのインスタンスを呼び出すことができます。その後、パラメータースニッフィングによって依存関係を解決できます。これは、$inject の静的プロパティを使用しているように見えます。または、検査することによっても解決できます。それは配列として実装されます。言い換えれば、以下は完全に有効な書き方です:

$injector.instantiate(['dependency', Constructor]);

ログイン後にコピー

装飾された配列のメソッドを呼び出すこともできます。 $log サービスに依存するメソッドがあるとします。次のように、遅延処理を使用して実行時に呼び出すことができます。

 myFunc = [, ($log) {
  $log.log();
}];
$injector.invoke(myFunc);

ログイン後にコピー

この実際の例をご覧ください (コンソールを開いて、ボタンを押した後に何が起こるかを確認してください)。

概要

要約すると、Angular の依存関係注入は、ビジネスアプリケーションの生産ラインで必要になり、頻繁に使用される多くの高度な機能を提供します。ファクトリ、サービス、プロバイダーの利便性により、Angular 開発者は多くの場合、利用できるオプションは 1 つだけであると信じ込んでいます。魔法は $injector サービスにあり、これを使用して必要なシングルトンを生成したり、新しいコンポーネントを作成したり、依存関係のあるメソッドを動的に参照したりできます。

最後に、クライアントコードでのインジェクションは Angular の外部でも利用できることに注意してください。 Angular の外側でラップされた、インジェクションを通じて $log サービスを呼び出す例を見てみましょう。ここをクリックしてください。なぜメソッドの配列に「ng」を渡す必要があるのでしょうか?これは Angular のコアモジュールであり、モジュールをラップするときに暗黙的に追加されますが、ディレクティブが独自の挿入インスタンスを生成する場合は、明示的に追加する必要があります。