NG手段を使用して簡単なページアプリケーションを実行します。サイト上のすべてのページがNGルートを使用し、location.hrefを使用しないようにすることを願っています。ただし、このようなWebAppには多くの利点がありますが、唯一の欠点は、WebAppがより多くのユーザーとより多くの機能を備えており、より多くのコントローラーがますます多くなっていることです。すべてのコントローラーをグローバルモジュールとしてロードする必要があります。これにより、F5を押してサイト内の任意のページで更新した後、コントローラーを見つけられないというエラーなしで他のページにルーティングできます。すべてのコントローラーをロードすると、携帯電話のページの最初の開口速度が遅くなります。今日は、この欠点を改善し、コントローラーのモジュラーロードを実現する方法を紹介します。
app.js
コードコピーは次のとおりです。
app.config（function（$ controllerprovider、$ compileprovider、$ filterprovider、$ sultion）{
app.register = {
コントローラー：$ controllerprovider.register、
指令：$ compileprovider.directive、
フィルター：$ filterprovider.register、
工場：$ sultion.Factory、
サービス：$ sultion.service
};
}）;
ルート時に必要なJSをブロックし、ロードした後も続行します。 $スクリプトがわからない場合は、http：//dustindiaz.com/scriptjsをクリックしてください
コードコピーは次のとおりです。
$ routeprovider.when（ '/：plagin'、{
templateurl：function（rd）{
return 'plugin/' + rd.plugin + '/index.html';
}、
解決する： {
load：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を返します。
}
}
}）;
controller.js
コードコピーは次のとおりです。
app.register.controller（ 'mypluginctrl'、function（$ scope）{
...
}）;
index.html
コードコピーは次のとおりです。
<div ng-controller = "mypluginctrl">
...
</div>
このようにして、変換はルートがルーティング時期に依存するJSを動的にロードできます。ただし、一般的に、WebAppsには多くのルートがあり、それぞれがたくさんのコードを作成する必要があります。最適化することもできます。
app.js
コードコピーは次のとおりです。
app.config（function（$ controllerprovider、$ compileprovider、$ filterprovider、$ sultion）{
app.register = {
コントローラー：$ controllerprovider.register、
指令：$ compileprovider.directive、
フィルター：$ filterprovider.register、
工場：$ sultion.Factory、
サービス：$ sultion.service
};
app.asyncjs = function（js）{
return ["$ q"、 "$ route"、 "$ rootscope"、function（$ q、$ route、$ rootscope）{
var Deferred = $ q.defer（）;
var依存関係= js;
if（array.isarray（依存関係））{
for（var i = 0; i <dependencies.length; i ++）{
依存関係[i] + = "？v =" + v;
}
} それ以外 {
依存関係 + = "？v =" + v; // vはバージョン番号です
}
$ script（依存関係、function（）{
$ rootscope。$ apply（function（）{
deferred.resolve（）;
}）;
}）;
deferred.promiseを返します。
}];
}
}）;
コードコピーは次のとおりです。
$ routeprovider.when（ '/：plagin'、{
templateurl：function（rd）{
return 'plugin/' + rd.plugin + '/index.html';
}、
解決する： {
ロード：app.asyncjs（ 'plugin/controller.js'）
}
}）;
この時点で、モジュールに従って元のController.jsを複数のJSに分割し、モジュールの依存関係を追加してルーティングして負荷速度を向上させます。この方法は、コントローラーのロードオンデマンドだけでなく、jquery.ui.datepicker.jsなどの他のJSモジュールにも使用できます。選択する必要があるルートノードを追加します。
コードコピーは次のとおりです。
$ routeprovider.when（ '/：plagin'、{
templateurl：function（rd）{
return 'plugin/' + rd.plugin + '/index.html';
}、
解決する： {
load：app.asyncjs（['plugin/controller.js'、 'plugin/jquery.ui.datepicker.js']）
}
}）;
それはいいです
PS：$スクリプトは、ロードする必要があるJSを判断できます。以前にロードされた場合、それは成功に直接戻ります。つまり、日付選択インターフェイスを初めて入力した場合にのみ、jquery.ui.datepicker.jsに出てから入力するように要求し、要求しません。