Menggunakan NG berarti melakukan aplikasi halaman sederhana, dan saya harap semua halaman di situs akan menggunakan rute NG, dan cobalah untuk tidak menggunakan location.href. Namun, WebApps tersebut memiliki banyak manfaat, tetapi satu -satunya kelemahan adalah bahwa karena WebApp Anda memiliki lebih banyak pengguna dan lebih banyak fungsi, dan lebih banyak pengontrol telah menjadi lebih dan lebih. Anda harus memuat semua pengontrol sebagai modul global sehingga setelah menekan F5 untuk menyegarkan pada halaman apa pun di situs, Anda dapat merutekan ke halaman lain tanpa kesalahan untuk tidak menemukan pengontrol. Memuat semua pengontrol membuat kecepatan pembukaan pertama halaman lebih lambat di ponsel. Hari ini saya akan berbagi dengan Anda bagaimana saya meningkatkan kerugian ini dan menyadari pemuatan modular pengontrol.
app.js
Salinan kode adalah sebagai berikut:
app.config (fungsi ($ controllerProvider, $ compileProvider, $ filterprovider, $ ast) {
app.register = {
Controller: $ ControllerProvider.Register,
Petunjuk: $ compileProvider.Directive,
Filter: $ filterprovider.register,
Pabrik: $ tersedia. Factory,
Layanan: $ tersedia. Layanan
};
});
Blokir JS yang diperlukan saat rute dan lanjutkan setelah pemuatan berhasil. Jika Anda tidak tahu apa $ skrip itu, silakan klik http://dustindiaz.com/scriptjs
Salinan kode adalah sebagai berikut:
$ routeProvider.when ('/: plugin', {
TemplateUrl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
menyelesaikan: {
Load: function ($ q, $ route, $ rootscope) {
var ditangguhkan = $ q.defer ();
var dependensi = [
'plugin/' + $ route.current.params.plugin + '/Controller.js'
];
$ skrip (dependensi, fungsi () {
$ rootscope. $ apply (function () {
Deferred.resolve ();
});
});
return ditangguhkan.promise;
}
}
});
controller.js
Salinan kode adalah sebagai berikut:
app.register.controller ('mypluginctrl', function ($ scope) {
...
});
index.html
Salinan kode adalah sebagai berikut:
<Div ng-controller = "mypluginctrl">
...
</div>
Dengan cara ini, transformasi dapat secara dinamis memuat JS yang tergantung pada rute saat rute dialihkan. Namun, umumnya ada banyak rute di Webapps kami, dan masing -masing harus menulis banyak kode, yang jelek dan sulit dipertahankan. Kami mungkin juga mengoptimalkannya.
app.js
Salinan kode adalah sebagai berikut:
app.config (fungsi ($ controllerProvider, $ compileProvider, $ filterprovider, $ ast) {
app.register = {
Controller: $ ControllerProvider.Register,
Petunjuk: $ compileProvider.Directive,
Filter: $ filterprovider.register,
Pabrik: $ tersedia. Factory,
Layanan: $ tersedia. Layanan
};
app.asyncjs = function (js) {
return ["$ q", "$ route", "$ rootscope", function ($ q, $ route, $ rootscope) {
var ditangguhkan = $ q.defer ();
var dependensi = js;
if (array.isArray (dependensi)) {
untuk (var i = 0; i <dependence.length; i ++) {
dependensi [i] + = "? v =" + v;
}
} kalau tidak {
dependensi + = "? v =" + v; // v adalah nomor versi
}
$ skrip (dependensi, fungsi () {
$ rootscope. $ apply (function () {
Deferred.resolve ();
});
});
return ditangguhkan.promise;
}];
}
});
Salinan kode adalah sebagai berikut:
$ routeProvider.when ('/: plugin', {
TemplateUrl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
menyelesaikan: {
Load: app.asyncjs ('plugin/controller.js')
}
});
Pada titik ini, cukup pisahkan controller asli.js menjadi beberapa JS sesuai dengan modul dan kemudian tambahkan dependensi modul untuk merutekan untuk meningkatkan kecepatan pemuatan. Metode ini tidak hanya dapat digunakan untuk pemuatan pengontrol sesuai permintaan, tetapi juga untuk modul JS lainnya, seperti jQuery.UI.DatePicker.js, tambahkan simpul rute yang perlu dipilih.
Salinan kode adalah sebagai berikut:
$ routeProvider.when ('/: plugin', {
TemplateUrl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
menyelesaikan: {
Load: app.asyncjs (['plugin/controller.js', 'plugin/jQuery.ui.datePicker.js']))
}
});
Tidak apa -apa
PS: $ Script dapat menilai JS yang perlu dimuat. Jika telah dimuat sebelumnya, itu akan kembali langsung ke kesuksesan. Artinya, hanya ketika Anda memasukkan antarmuka pemilihan tanggal untuk pertama kalinya, Anda akan meminta jQuery.ui.datePicker.js untuk keluar dan kemudian masuk, dan Anda tidak akan memintanya.