9

私のルートのいくつかは、外部 JS からの機能を必要とします。これらの JS は特定のルートでのみ必要なため、一度にすべてをロードしたくありません (たとえば/upload、写真のアップロードにJS が必要/photos、ライトボックスに別の JS が/funny必要、アニメーション用に JS が必要など)。

これらの外部 JavaScript を遅延読み込みするためのベスト プラクティスは何ですか?

これらのルートには複数回アクセスできます (たとえば、ユーザーはそのルートに/upload再度アクセスできます) 。/photos/upload

4

3 に答える 3

3

Alex が述べたことに加えて、コントローラーやディレクティブなどの AngularJS アーティファクトを遅延読み込みする場合は、モジュール API の代わりに関連するプロバイダーを使用してそれらを登録する必要があります。アプリケーションがブートストラップされた後にモジュール API を使用して登録されたアーティファクトは、アプリケーションで使用できなくなります。たとえば、次のような遅延コントローラーを定義します...

$controllerProvider.register('SomeLazyController', function($scope)
{
   $scope.key = '...'; 
});

これの代わりに...

angular.module('app').controller('SomeLazyController', function($scope)
{
    $scope.key = '...';
});

AngularJS で遅延読み込みを実装するために、これと Alex が話している「resolve」メソッドを使用する方法について詳しく説明したブログ投稿を書きました。http://ify.io/lazy-loading-in-angularjs/

于 2013-04-21T16:23:41.390 に答える
2

このようなケースを処理するために私が知っている唯一の方法は、ルートの「解決」メソッドを使用することです。このメソッドを使用して、ルートのコントローラーがインスタンス化される前にロードされる依存関係を定義できます。このメソッドのさまざまな戻り値の型の 1 つは promise です。したがって、これを使用して外部 JavaScript コードの非同期ロードを開始し、外部スクリプトがロードされるとすぐに解決される promise を返すことができます。

これに関するドキュメントは、https: //docs.angularjs.org/api/ngRoute/provider/$routeProviderの「when」セクションにあります。

于 2012-10-22T06:58:47.580 に答える
2

@ alex3683 の答えはおそらく正しい AngularJS の方法ですが、概念を理解していないため、代わりに jQuery のgetScript(). したがって、CoffeeScript では次のようになります。

yourModule.factory 'foo', ->
    $.getScript 'https://script-to-load', ->
        # whatever you want to do once the script is loaded

そして、コントローラーから呼び出すだけです。AngularJS サービスはレイジーでシングルトンであるため、スクリプトは 1 回だけ読み込まれます。

于 2012-12-23T09:18:36.650 に答える