訪問した page_AngularJS に基づいてコントローラーを動的にロードする AngularJs ソリューション

Ng を使用する目的は、単一ページ アプリケーション (単純なページ アプリケーション) を作成することであり、サイト内のすべてのページが Ng の Route を使用し、location.href を使用しないようにすることを望みます。 Web アプリですが、唯一の欠点は、時間が経つにつれて、Web アプリのユーザーが増え、機能が豊富になり、コントローラーが増えると、サイト内のどのページでも押すことができるように、すべてのコントローラーをグローバル モジュールとして読み込む必要があることです。 F5 キーを押して更新すると、コントローラーが見つからないというエラーが発生せずに他のページに移動できます。携帯電話で最初にページを開くのが遅くなります。今日はそれを解決する方法を紹介します。この欠点を解決するには、Controller

のモジュール読み込みを実装してください。

app.js

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

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
コントローラー: $controllerProvider.register,
ディレクティブ: $compileProvider.directive,
フィルター: $filterProvider.register,
ファクトリー: $provide.factory,
サービス: $provide.service
};
});

必要な js をロードするためにルート中にブロックし、ロードが成功した後に続行します。$script が何なのかわからない場合は、http://dustindiaz.com/scriptjs

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

$routeProvider.when('/:plugin', {
templateUrl: function(rd) {
'plugin/' rd.plugin '/index.html' を返します;
}、
解決: {
ロード: function($q, $route, $rootScope) {
var deferred = $q.defer();
var 依存関係 = [
'plugin/' $route.current.params.plugin '/controller.js'
];
$script(依存関係, function () {
$rootScope.$apply(function() {
deferred.resolve();
});
});
deferred.promise を返します;
}
}
});

コントローラー.js

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

app.register.controller('MyPluginCtrl', function ($scope) {
...
});

index.html

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

...

このようにして、ルートが依存する JS をルート中に動的にロードできます。ただし、通常、Web アプリには多くのルートがあり、それぞれに大量のコードを記述する必要があるため、見苦しく、困難です。維持するには、別の最適化を追加することもできます

app.js

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

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
  app.register = {
    コントローラー: $controllerProvider.register,
    ディレクティブ: $compileProvider.directive,
    フィルター: $filterProvider.register,
    ファクトリー: $provide.factory,
    サービス: $provide.service
  };
  app.asyncjs = 関数 (js) {
        return ["$q", "$route", "$rootScope", function ($q, $route, $rootScope) {
            var deferred = $q.defer();
            var 依存関係 = js;
            if (Array.isArray(依存関係)) {
                for (var i = 0; i < dependency.length; i ) {
                    依存関係[i] = "?v= v;
                }
            } else {
                dependency = "?v=" v;//v はバージョン
            }
            $script(依存関係, function () {
                $rootScope.$apply(function () {
                    deferred.resolve();
                });
            });
            return deferred.promise;
        }];
    }
});

复制代 代码如下:

$routeProvider.when('/:plugin', {
  templateUrl: function(rd) {
    return 'plugin/' rd.plugin '/index.html';
  }、
  解決: {
    ロード: app.asyncjs('plugin/controller.js')
  }
});

ここまでは、1 つのcontroller.js モジュールを複数の js に分割し、ルート追加モジュール依存により追加速度を向上させることができます。この方法は、コントローラーの追加が必要な場合だけでなく、他の js でも使用できます。モジュール、例: jquery.ui.datepicker.js このような日期選択择插件、必要日期選択择插件のルート节点追加

复制代 代码如下:

$routeProvider.when('/:plugin', {
  templateUrl: function(rd) {
    return 'plugin/' rd.plugin '/index.html';
  }、
  解決: {
    ロード: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])
  }
});

便可了

PS:$script は、追加が必要な js を判断することができます。結果の前にすでに追加されている場合は、他の会が直接成功を返します。つまり、最初の通過日期の選択界面での会は去请要求 jquery.ui.datepicker です。 js退出去再进就不会去请求啦