استخدام NG يعني القيام بتطبيق صفحة بسيط ، وآمل أن تستخدم جميع الصفحات على الموقع مسار NG ، ومحاولة عدم استخدام الموقع. ومع ذلك ، فإن هذه WebApps لها العديد من الفوائد ، ولكن العيب الوحيد هو أنه نظرًا لأن WebApp لديه المزيد من المستخدمين والمزيد من الوظائف ، وأصبحت المزيد من وحدات التحكم أكثر فأكثر. يجب عليك تحميل جميع وحدات التحكم كوحدات عالمية بحيث بعد الضغط على F5 للتحديث على أي صفحة في الموقع ، يمكنك توجيه أي صفحة أخرى دون وجود خطأ في عدم العثور على وحدة التحكم. يجعل تحميل جميع وحدات التحكم أول سرعة فتح للصفحة أبطأ على الهاتف المحمول. اليوم سأشارككم كيف قمت بتحسين هذا العيب وأدرك التحميل المعياري لوحدة التحكم.
app.js
نسخة الكود كما يلي:
app.config (وظيفة ($ controllerProvider ، $ compileprovider ، $ filterprovider ، $ sevel) {
app.register = {
وحدة التحكم: $ controllerProvider.register ،
التوجيه: $ compileprovider.dircive ،
مرشح: $ filterprovider.register ،
المصنع: $ SOVE.Factory ،
الخدمة: $ SOVE.SERVICE
} ؛
}) ؛
منع JS المطلوبة عند المسار والاستمرار بعد التحميل بنجاح. إذا كنت لا تعرف ما هو البرنامج النصي $ ، يرجى النقر على http://dustindiaz.com/scriptjs
نسخة الكود كما يلي:
$ routeprovider. عندما ('/: البرنامج المساعد' ، {
templateurl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html' ؛
} ،
حل: {
تحميل: وظيفة ($ Q ، $ route ، $ rootscope) {
var مؤلف = $ q.defer () ؛
تبعيات var = [
"البرنامج المساعد/" + $ route.current.params.plugin + '/controller.js'
] ؛
$ script (التبعيات ، الدالة () {
$ rootscope. $ تطبيق (function () {
deferred.Resolve () ؛
}) ؛
}) ؛
العودة المؤجلة.
}
}
}) ؛
Controller.js
نسخة الكود كما يلي:
app.register.controller ('MyPluginctrl' ، function ($ scope) {
...
}) ؛
index.html
نسخة الكود كما يلي:
<div ng-controller = "myPluginctrl">
...
</div>
وبهذه الطريقة ، يمكن للتحول تحميل ديناميكي JS الذي يعتمد عليه المسار عند توجيه المسار. ومع ذلك ، هناك بشكل عام العديد من الطرق في WebApps لدينا ، ويتعين على كل واحد منهم كتابة مجموعة من التعليمات البرمجية ، والتي يصعب الحفاظ عليها. قد نحسن ذلك أيضًا.
app.js
نسخة الكود كما يلي:
app.config (وظيفة ($ controllerProvider ، $ compileprovider ، $ filterprovider ، $ sevel) {
app.register = {
وحدة التحكم: $ controllerProvider.register ،
التوجيه: $ compileprovider.dircive ،
مرشح: $ filterprovider.register ،
المصنع: $ SOVE.Factory ،
الخدمة: $ SOVE.SERVICE
} ؛
app.asyncjs = function (js) {
إرجاع ["$ Q" ، "$ route" ، "$ rootscope" ، وظيفة ($ Q ، $ route ، $ rootscope) {
var مؤلف = $ q.defer () ؛
تبعيات var = JS ؛
if (array.isarray (تبعيات)) {
لـ (var i = 0 ؛ i <تبعية. length ؛ i ++) {
التبعيات [i] + = "؟ v =" + v ؛
}
} آخر {
التبعيات + = "؟ V =" + V ؛ // V هو رقم الإصدار
}
$ script (التبعيات ، الدالة () {
$ rootscope. $ تطبيق (function () {
deferred.Resolve () ؛
}) ؛
}) ؛
العودة المؤجلة.
}] ؛
}
}) ؛
نسخة الكود كما يلي:
$ routeprovider. عندما ('/: البرنامج المساعد' ، {
templateurl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html' ؛
} ،
حل: {
load: app.asyncjs ('plugin/controller.js')
}
}) ؛
في هذه المرحلة ، ما عليك سوى تقسيم وحدة التحكم الأصلية إلى JS متعددة وفقًا للوحدة ، ثم أضف تبعيات الوحدة النمطية إلى التوجيه لتحسين سرعة التحميل. لا يمكن استخدام هذه الطريقة فقط لتحميل وحدة تحكم عند الطلب ، ولكن أيضًا لوحدات JS الأخرى ، مثل jquery.ui.datepicker.js ، أضف عقدة الطريق التي يجب تحديدها.
نسخة الكود كما يلي:
$ routeprovider. عندما ('/: البرنامج المساعد' ، {
templateurl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html' ؛
} ،
حل: {
load: app.asyncjs (['plugin/controller.js' ، 'plugin/jquery.ui.datepicker.js'])
}
}) ؛
هذا جيّد
ملاحظة: يمكن للنص $ الحكم على JS الذي يجب تحميله. إذا تم تحميله من قبل ، فسيعود مباشرة إلى النجاح. وهذا يعني ، فقط عند إدخال واجهة تحديد التاريخ لأول مرة ، سوف تطلب jQuery.ui.datepicker.js للخروج ثم الدخول ، ولن تطلب ذلك.