في الآونة الأخيرة ، المشروع مشغول للغاية. لا بد لي من الذهاب إلى العمل خلال النهار وأعود ليلا وما زلت بحاجة إلى القيام بنقطة المعرفة الزاوية لزملائي. بعد كل شيء ، سوف أستقيل في نهاية العام ، وسيظل هناك شخص ما سيحتاج إلى تولي التطوير اللاحق للمشروع ، لذلك يستغرق الأمر وقتًا للدراسة في الليل. لم أخطط أبدًا لكتابة ملاحظات الدراسة لهذه المكونات الإضافية الطرف الثالث ، لكنني أعتقد أنه من الفائدة حقًا تحميل الوحدة النمطية للطلب واستخدامها بنجاح ، لذلك يجب أن أسجلها. نظرًا لأن هذا الوحش لم يستخدمه يتطلب عمقًا ، لذلك لا يعرف هذا الوحش الفرق بين هذا ويتطلب J ، ولا يمكن أن يفسر بوضوح ما إذا كان هذا يعتبر التحميل عند الطلب.
من أجل تحقيق تأثير نقطة معرفة ملاحظة هذه الدراسة ، نحتاج إلى استخدام:
Angular: https: //github.com/angular/angular.js
ui-router: https: //github.com/angular-ui/ui-router
Oclazyload: https: //github.com/ocombe/oclazyload
بدون مزيد من اللغط ، سأصل إلى النقطة ...
أولاً ، دعونا نلقي نظرة على بنية الملف:
Angular-oclazyload --- نصوص المجلدات التجريبية --- مجلد الإطار والمجال الزاوي -1.4.7 --- الزاوي لا يفسر Angular-ui-Router --- لا يشرح uirouter oclazyload --- Oclazyload لا يشرح لا يشرح --- Angular-bootstrap --- لا يشرح الزنوج-bootstrap ملفات JS --- ملفات JS JS مكتوبة لوحدات تحكم تجريبية --- مجلد PAGE VILERRER المجلد الزاوي --- control.js --- رمز وحدة التحكم controller angular-tree-contable. Oclazyload.config.js --- تحميل رمز تكوين الوحدة النمطية route.config.js --- تهيئة المسار ومسافات رمز التحميل --- html مجلد الصفحة مجلد الزواج--control.html --- الزواج--treetrol page-ootml-page-page. uibootstrap plug-in effect page index.html --- الصفحة الرئيسية
ملاحظة: لا يقوم هذا العرض التجريبي بالتوجيه المتداخل ، فهو ببساطة ينفذ توجيه عرض واحد لإظهار التأثير.
دعونا نلقي نظرة على رمز الصفحة الرئيسية:
<! doctype html> <html lang = "en" xmlns = "http://www.w3 href = "scripts/bootstrap/dist/css/bootstrap.min.css"/> <script src = "scripts/Angular-1.7/Angular.js"> </script> <script src = "scripts/angular-ui-router/relext/angular-ui src = "scripts/oclazyload/dist/oclazyload.min.js"> </script> <script src = "js/app.config.js"> </script> <script src = "js/oclazload.config.js src = "js/route.config.js"> </script> </head> <body> <div ng-app = "templateapp"> <viv> <a href = "#/default"> home </a> <a href = "#/uibootstrap href = "#/ngtree"> angular-tree-control </a> </viv> <div ui-view> </viv> </viv> </body> </html>
في هذه الصفحة ، نقوم فقط بتحميل CSS الخاص بـ Bootstrap و JS Angular و UI-Router JS و Oclazyload JS و 3 ملفات JS التي تم تكوينها.
دعونا نلقي نظرة على رمز HTML في الصفحات الأربع:
صفحة تأثير السيطرة على الشجرة الزاوية
<TreeControl Tree-Model = "ngtree.treedata" خيارات = "ngtree.treeoptions"> {{node.title}} </treecontrol>يوجد أمر على الصفحة لاستخدام المكون الإضافي.
الصفحة الافتراضية
<viv> {{default.value}} </iv>نحن هنا نستخدمه فقط لإثبات أن التحميل والتنفيذ default.js بشكل صحيح.
صفحة تأثير الطاولة ng
<viv> <viv> <h3> ng-table </h3> </viv> <button ng click = "ngtable.tableparams.sorting ({})"> مسح </button> <p> <strong> الفرز: </strong> {{ngtable.tableparams.sorting ng-table = "ngtable.tableparams"> <tr ng-repeat = "user in $ data"> <td data-title = "'name'" sortable = "'' ''"> {{user.name}} </td> <td data-sitle = '' age '" </table> </viv>فيما يلي بعض تأثيرات طاولة NG البسيطة.
صفحة تأثير ui-bootstrap
<span uib-dropdown> <a href id = "simple-dropdown" uib-dropdown-toggle> مشغل مربع المنسدلة </a> <ul aria-labelledby = "simple-dropdown"> محتوى مربع المنسدلة. اكتب دليلًا على التأثير هنا لتحقيق التحميل الديناميكي </ul> </span>
فيما يلي تأثير مربع منسد لإثبات أنه يتم تحميل المكون الإضافي بشكل صحيح واستخدامه.
حسنًا ، بعد قراءة HTML ، دعونا نلقي نظرة على تكوين التحميل وتكوين التوجيه:
"استخدام صارم" var tempapp = Angular.module ("TemplateApp" ، ["ui.router" ، "OC.LazyLoad"]). config (["$ provide" ، "$ compileprovider" ، "$ controlprovider" ، $ filterprovider "، function ($ compileprovider ، $ controlerprovider) $ controlRProvider.يعتمد الرمز أعلاه فقط على UI.Router و OC.LazyLoad لتسجيل الوحدة النمطية. تم تكوين التكوين ببساطة لتكوين الوحدة النمطية بحيث يمكن لـ JS اللاحقة التعرف على الطريقة على TempApp.
ثم دعونا نلقي نظرة على تكوين وحدة تحميل Oclazyload:
"استخدام صارم" tempapp.constant ("modules_config" ، [{name: "ngtable" ، الوحدة النمطية: صواب ، الملفات: ["نصوص/ng-table/dist/ng-dable.min.css" ، "البرامج النصية/bootstrap/ui-bootstrap-tpls-0.14.3.min.js"]} ، {name: "treecontrol" ، الوحدة النمطية: صواب ، ملفات: "البرامج النصية/السيطرة على الشجرة الزاوية/CSS/CSS-Control-Attribute.css" ، "البرامج النصية/السيطرة على الشجرة الزاوي/----الشجرة الزاوية--control.js"]}]). Routefn ($ OclazyloadProvider ، modules_config) {$ OclazyloadProvider.config ({debug: false ، الأحداث: خطأ ، الوحدات: modules_config}) ؛} ؛تكوين التوجيه:
"استخدام صارم" tempapp.config (["$ stateprovider" ، "$ urlrouterprovider" ، routefn]) ؛ وظيفة Routefn ($ stateProvider ، $ urlrouterprovider) {$ urlrouterprovider.otherivewise (/"/default") ؛ $ stateProvider .state ("افتراضي" ، {url: "/default" ، templateurl: "views/default.html" ، controller: }) .state ("ngtable" ، {url: "/ngtable" ، templateurl: function () {return $ oclazyload.load ("JS/Controllers/ng-table.js") ؛ حل: {DEPS: ["$ oclazyload" ، الدالة ($ oclazyload) {return $ oclazyload.load ("treecontrol").لا يتطلب التنفيذ البسيط لمربع المنسدلة لـ UI-Bootstrap وحدة تحكم ، لذلك دعونا نلقي نظرة فقط على وحدة التحكم في NG-Table و Angular-Tree-Control:
ng table.js
(function () {"استخدم صارم" tempapp.controller ("ngtablectrl" ، ["$ location" ، "ngtableparams" ، "$ filter" ، ngtablectrlfn]) ؛ function ngtablectrlfn ($ location ، ngtableparams ، $ filter) "tiancum" ، العمر: 43} ، {name: "Jacob" ، العمر: 27} ، {name: "nephi" ، ace: 29} ، {name: "enos" ، age: 34} ، {name: "tiancum" ، age: 43} ، "enos" ، العمر: 34} ، {name: "tiancum" ، العمر: 43} ، {name: "Jacob" ، age: 27} ، {name: "nephi" ، age: 29} ، "Nephi" ، العمر: 29} ، {name: "enos" ، العمر: 34}] ؛ ، {total: data.length ، // total data getData: $ refer ، params) {$ location.search ( $ defer.resolve (orderdata.slice ((params.page () - 1) * params.count () ، params.page () * params.count ()) ؛Angular-Tree-Control.JS
(function () {"استخدم صارم" tempapp.controller ("ngtreectrl" ، ngtreectrlfn) ؛ وظيفة ngtreectrlfn () {// tree data this.treedata = [{id: العنوان: "child1" ، eilderlist: [{id: "1-1-1" ، العنوان: "child1" ، ilfild: [{id: "1-2" ، العنوان: }]}]} ، {id: "1-3" ، العنوان: "مستوى الطفل 3" ، القائمة الطفل: []}]} ، {id: "2" ، العنوان: "العلامة 2" ، القائمة الطفل: [{id: "2-1" ، title: العنوان: "child1" ، القائمة القائمة: []} ، {id: "3-2" ، العنوان: "child2" ، childlist: []} ، {id: "3-3"دعونا نتجاهل default.js ، بعد كل شيء ، هناك فقط "Hello Rold" فيه.
Github url: https://github.com/program-monkey/angular-oclazyload-demo
ما سبق هو مجموعة من المعلومات على وحدة التحميل الديناميكية AngularJS والتبعيات. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!