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に出てから入力するように要求し、要求しません。