English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. الموقع الحالي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. النص الرئيسي

تحميل المكونات الديناميكية والاعتماد في AngularJs

أخيرًا كان المشروع مشغولًا جدًا، يجب العمل في النهار، وعند العودة في الليل يجب إعداد شرائح Angular Knowledge Points للزملاء، لأنني سأستقيل في نهاية السنة، ويجب على شخص آخر الاستمرار في تطوير المشروع، لذا استخدمت وقت الدراسة في الليل. لم أكن أرغب في كتابة ملاحظات دراسة هذه الأدوات الثالثة، ولكنني وجدت أن تحميل المodule عند الحاجة واستخدامه حقًا مفيد، لذا سأقوم بتسجيله. لأنني لم أستخدم requireJs بشكل عميق، لا أعرف الفرق بين هذا والـ requireJs، ولا أستطيع توضيح ما إذا كان هذا يعتبر تحميل Angular على الطلب.

لتحقيق تأثير نقاط المعرفة لهذا المقال التعليمي، نحتاج إلى استخدام:

angular:https://github.com/angular/angular.js

ui-router:https://github.com/angular-ui/ui-router

ocLazyLoad:https://github.com/ocombe/ocLazyLoad

لا نكثر الحديث، دعونا ننتقل إلى الموضوع الرئيسي...

أولاً دعونا نرى بنية الملفات:

Angular-ocLazyLoad           --- demo文件夹
  Scripts               --- 框架及插件文件夹
    angular-1.4.7          --- angular 不解释
    angular-ui-router        --- uirouter 不解释
    oclazyload           --- ocLazyload 不解释
    bootstrap            --- bootstrap 不解释
    angular-tree-control-master   --- angular-tree-control-master 不解释
    ng-table            --- ng-table 不解释
    angular-bootstrap        --- angular-bootstrap 不解释
  js                 --- js文件夹 针对demo写的js文件
    controllers           --- 页面控制器文件夹
      angular-tree-control.js   --- angular-tree-control控制器代码
      default.js         --- default控制器代码
      ng-table.js         --- ng-table控制器代码
    app.config.js          --- كود تسجيل وتكوين الوحدات
    oclazyload.config.js      --- كود تكوين تحميل الوحدات
    route.config.js         --- كود تكوين المسار والتحميل
  views                --- مجلد صفحات HTML
    angular-tree-control.html    --- صفحة تأثير واجهة المستخدم angular-tree-control
    default.html          --- الصفحة الافتراضية
    ng-table.html          --- صفحة تأثير واجهة المستخدم ng-table
    ui-bootstrap.html        --- صفحة تأثير واجهة المستخدم UI Bootstrap
  index.html             --- الصفحة الرئيسية

ملاحظة: هذا الدمو لم يتم فيه تنفيذ مسار داخلي، بل تم تنفيذ مسار رؤية واحدة بسيط لعرض التأثير.

نحن سننظر إلى كود الصفحة الرئيسية:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Scripts/bootstrap/dist/css/bootstrap.min.css" />
  <script src="Scripts/angular-1.4.7/angular.js"></script>
  <script src="Scripts/angular-ui-router/release/angular-ui-router.min.js"></script>
  <script src="Scripts/oclazyload/dist/ocLazyLoad.min.js"></script>
  <script src="js/app.config.js"></script>
  <script src="js/oclazyload.config.js"></script>
  <script src="js/route.config.js"></script>
</head>
<body>
<div ng-app="templateApp">
  <div>
    <a href="#/default">الصفحة الرئيسية</a>
    <a href="#/uibootstrap" >ui-bootstrap</a>
    <a href="#/ngtable">ng-table</a>
    <a href="#/ngtree">angular-tree-control</a>
  </div>
  <div ui-view></div>
</div>
</body>
</html>

في هذه الصفحة، قمنا بتحميل فقط css لـ bootstrap، js لـ angular، js لـ ui-router، js لـ ocLazyLoad، بالإضافة إلى 3 ملفات js من إعداداتنا.

لنلقي نظرة على كود html لأربعة الصفحات:

صفحة تأثير angular-tree-control

<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">
   {{node.title}}
 </treecontrol>

على الصفحة هناك تعليمات تستخدمها هذه الإضافة.

صفحة default

<div class="ng-cloak">
   {{default.value}}
 </div>

هنا نستخدمها فقط لاثبات التحميل والتنفيذ الصحيح لملف default.js.

صفحة تأثير ng-table

<div class="ng-cloak">
  <div class="p-h-md p-v bg-white box-shadow pos-rlt">
    <h3 class="no-margin">ng-table</h3>
  </div>
  <button ng-click="ngtable.tableParams.sorting({})" class="btn btn-default pull-right">إزالة الترتيب</button>
  <p>
    <strong>الترتيب:</strong> {{ngtable.tableParams.sorting()|json}}
  </p>
  <table ng-table="ngtable.tableParams" class="table table-bordered table-striped">
    <tr ng-repeat="user in $data">
      <td data-title="[#1#]" sortable="'name'">
        {{user.name}}
      </td>
      <td data-title="[#2#]" sortable="'age'">
        {{user.age}}
      </td>
    </tr>
  </table>
</div>

هنا تم كتابة تأثيرات ng-table البسيطة.

صفحة تأثير ui-bootstrap

<span uib-dropdown class="ng-cloak">
   <a href id="simple-dropdown" uib-dropdown-toggle>
     استشعار القائمة المنسدلة
   </a>
   <ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
     محتوى القائمة المنسدلة. هنا يتم كتابة تأثير لاثبات تحميل ديناميكي
   </ul>
 </span>

هناك فقط تم كتابة تأثير القائمة المنسدلة لاثبات التحميل الصحيح واستخدام هذه الأداة.

حسنًا، بعد قراءة html، لننظر في تكوينات التحميل والطريق

"use strict"
var tempApp = angular.module("templateApp",["ui.router","oc.lazyLoad"])
.config(["$provide","$compileProvider","$controllerProvider","$filterProvider",
        function($provide,$compileProvider,$controllerProvider,$filterProvider){
          tempApp.controller = $controllerProvider.register;
          tempApp.directive = $compileProvider.directive;
          tempApp.filter = $filterProvider.register;
          tempApp.factory = $provide.factory;
          tempApp.service = $provide.service;
          tempApp.constant = $provide.constant;
        });

كود المشاركة أعلاه يعتمد فقط على ui.router وoc.LazyLoad. الإعداد هو إعداد بسيط للوحدات لتمكين التعرف على طرق tempApp في js اللاحق.

ثم نرى إعدادات تحميل الوحدات الخاصة بـ ocLazyLoad:

"use strict"
tempApp
.constant("Modules_Config",[
  {
    name:"ngTable",
    module:true,
    files:[
      "Scripts/ng-table/dist/ng-table.min.css",
      "Scripts/ng-table/dist/ng-table.min.js"
    ]
  },
  {
    name:"ui.bootstrap",
    module:true,
    files:[
      "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
    ]
  },
  {
    name:"treeControl",
    module:true,
    files:[
      "Scripts/angular-tree-control-master/css/tree-control.css",
      "Scripts/angular-tree-control-master/css/tree-control-attribute.css",
      "Scripts/angular-tree-control-master/angular-tree-control.js"
    ]
  }
])
.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
  $ocLazyLoadProvider.config({
    debug:false,
    events:false,
    modules:Modules_Config
  });
};

الإعداد الخاص بالطريق:

"use strict"
tempApp.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
  $urlRouterProvider.otherwise("/default");
  $stateProvider
  .state("default",{
    url:"/default",
    templateUrl:"views/default.html"
    controller:"defaultCtrl",
    controllerAs:"default",
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("js/controllers/default.js");
      }]
    } 
  )
  .state("uibootstrap",{
    url:"/uibootstrap",
    templateUrl:"views/ui-bootstrap.html",
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("ui.bootstrap");
      }]
    } 
  )
  .state("ngtable",{
    url:"/ngtable",
    templateUrl:"views/ng-table.html",
    controller:"ngTableCtrl",
    controllerAs:"ngtable",
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("ngTable").then(
          function() {
            return $ocLazyLoad.load("js/controllers/ng-table.js");
          }
        );
      }]
    } 
  )
  .state("ngtree",{
    url:"/ngtree",
    templateUrl:"views/angular-tree-control.html",
    controller:"ngTreeCtrl",
    controllerAs:"ngtree",
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("treeControl").then(
          function() {
            return $ocLazyLoad.load("js/controllers/angular-tree-control.js");
          }
        );
      }]
    } 
  )
};

النموذج البسيط لـ ui-bootstrap مع القائمة المنسدلة لا يحتاج إلى مدير، لذا دعنا نرى فقط ملفات الجافاسكربت للمديرين لـ ng-table و angular-tree-control:

ng-table.js

(function(){
"use strict"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
  //بيانات
  var data = [{ name: "Moroni", age: 50 },
         { name: "Tiancum ", age: 43 },
         { name: "Jacob", age: 27 },
         { name: "Nephi", age: 29 },
         { name: "Enos", age: 34 },
         { name: "Tiancum", age: 43 },
         { name: "Jacob", age: 27 },
         { name: "Nephi", age: 29 },
         { name: "Enos", age: 34 },
         { name: "Tiancum", age: 43 },
         { name: "Jacob", age: 27 },
         { name: "Nephi", age: 29 },
         { name: "Enos", age: 34 },
         { name: "Tiancum", age: 43 },
         { name: "Jacob", age: 27 },
         { name: "Nephi", age: 29 },
         { name: "Enos", age: 34 }];
  this.tableParams = new NgTableParams(  //دمج الإعدادات الافتراضية والمعلمات في url
    angular.extend({
      page: 1,      //الصفحة الأولى
      count: 10,     //عدد البيانات في كل صفحة
      sorting: {
        name: 'asc'   //ترتيب افتراضي
      }
    },
    $location.search())
    ,{
      total: data.length, //عدد البيانات الإجمالي
      getData: function ($defer, params) {
        $location.search(params.url()); //تضع المعلمات في url لتحقيق تحديث الصفحة دون العودة إلى الصفحة الأولى والضبط الافتراضي
        var orderedData = params.sorting ?
            $filter('orderBy')(data, params.orderBy()) :data;
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
      }
    }
  );
};
})();

angular-tree-control.js

(function(){
"use strict"
tempApp
.controller("ngTreeCtrl",ngTreeCtrlFn);
function ngTreeCtrlFn(){
  //بيانات الشجرة
  this.treeData = [
        {
          id: "1",
          title: ":العلامة1",
          childList: [
            {
              id: "1-1"
              title: "الفرع 1",
              childList: [
                {
                  id: "1-1-1",
                  title: "الفرع الفرعي 1",
                  childList: [],
                }
              ]
            },
            {
              id: "1-2",
              title: "الفرع 2",
              childList: [
                {
                  id: "1-2-1",
                  title: "الفرع الفرعي 2",
                  childList: [
                    {
                      id: "1-2-1-1",
                      title: "الفرع الفرعي 1",
                      childList: [],
                    }
                  ]
                }
              ]
            },
            {
              id: "1-3",
              title: "الفرع 3",
              childList: [],
            }
          ]
        },
        {
          id: "2",
          title: "العلامة 2",
          childList: [
            {
              id: "2-1",
              title: "الفرع 1",
              childList: [],
            },
            {
              id: "2-2",
              title: "الفرع 2",
              childList: [],
            },
            {
              id: "2-3",
              title: "الفرع 3",
              childList: [],
            }
          }]
        ,
        {
          id: "3",
          title: "العلامة 3",
          childList: [
            {
              id: "3-1",
              title: "الفرع 1",
              childList: [],
            },
            {
              id: "3-2",
              title: "الفرع 2",
              childList: [],
            },
            {
              id: "3-3",
              title: "الفرع 3",
              childList: [],
            }
          ]
        }
      ];
  // إعدادات الشجرة
  this.treeOptions = {
    nodeChildren: "childList",
    dirSelectable: false
  };
};
})();

دعونا نتجاهل default.js، لأنه يحتوي فقط على "Hello Wrold".

رابط github: https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo

هذا هو جمع المعلومات المتعلقة بتحميل المكونات الديناميكية واعتماد AngularJS، وسنواصل إضافة المعلومات ذات الصلة لاحقًا، شكرًا للدعم الذي قدمته للواقع!

البيان: محتويات هذا المقال تم جمعها من الإنترنت، حقوق النشر تخص المالك الأصلي، المحتوى تم تقديمه من قبل مستخدمي الإنترنت وتم تحميله بشكل مستقل، هذا الموقع لا يملك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (الرجاء استبدال # بـ @ عند إرسال البريد الإلكتروني) للإبلاغ، وقدم الأدلة ذات الصلة، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم عن حقوق النسخ فورًا.

تعليميات الأساس
أعجبك هذا