كود إعلان Angular Module و الحصول على مثيلات إعادة التحميل

module هي طريقة تنظيم مهمة في angular، حيث تقدم القدرة على تعبئة مجموعة من المكونات التجمعية (controller،service،filter،directive...). بهذه الطريقة، يمكننا تعبئة الشيفرة وفقًا لمشاكل مجالات الأعمال كـ module،ثم استخدام تعبئة module لاستيراد محتويات module المرتبطة، مما يسمح لنا بتحقيق "فصل الاهتمام" بشكل أفضل،وإيجاد "التجميع العالي والتعتماد المنخفض". "التجميع العالي والتعتماد المنخفض" هو من مبادئ تصميم المواجهة الأوبتيكية. التجميع تشير إلى كاملية module أو الكائن الداخلي، يجب أن تكون مجموعة المنطق المشتركة محكمة التكامل في نفس module أو الكائن أو وحدة الشيفرة الأخرى، وليس موزعة في كل مكان؛ التعتماد تشير إلى درجة الاعتماد بين وحدات module أو الكائن، إذا كان تعديل module يؤثر على module آخر، فإن هذا يعني أن هذين module مرتبطين بشكل تام.

في نفس الوقت،module أيضًا هو مدخل شيفرة angular الخاص بنا، يجب أولاً إعلان module، ثم يمكن تعريف العناصر المكونة لangular مثل controller،service،filter،directive،كود block config،كود block run وما إلى ذلك.

تعريف module هو: angular.module('com.ngbook.demo', []). يمكن نقل ثلاثة معاملات إلى دالة module، وهي:

1. name: هو الاسم الذي يتم تعريفه لـ module، يجب أن يكون متفردًا وضروري، وسيتم استخدامه للاعتماد أو الإعلان عن module الرئيسي في ngAPP directive؛
2. requires: هي الاعتماديات الخاصة بالmodule، وهي المعامل الذي يتم إعلانه لـ module هذا يحتاج إلى اعتماد module أخرى. ملاحظة خاصة: إذا لم يتم إعلان اعتماد module هنا، فإننا لن نتمكن من استخدام أي عنصر من module الاعتمادية في module هذا؛ وهي متغير اختياري.
3. configFn: هي دالة تكوين بدء module، يتم استدعاء هذه الدالة في مرحلة config لـ angular، حيث يتم إعداد التكوين الخاص بالعناصر قبل إنشاء موضوعات العناصر، مثل تكويننا الشائع لـ $routeProvider لتكوين معلومات مسار التطبيق. إنه يساوي 'module.config'، يُنصح باستبدالها بدالة 'module.config'. وهي أيضًا متغير اختياري.
   

بالنسبة لطريقة angular.module، هناك عدة طرق مستخدمة، مثل angular.module('com.ngbook.demo', [dependencies]) و angular.module('com.ngbook.demo'). يرجى ملاحظة أن الطريقتين مختلفتان تمامًا، حيث أن الأولى تُستخدم للإعلان عن إنشاء module، بينما تُستخدم الثانية لاستنساخ module الذي تم إعلانه مسبقًا. في تطبيق البرنامج، يجب أن يكون الإعلان عن module مرة واحدة فقط؛ أما للاستنساخ، فيمكن القيام بذلك عدة مرات. يُنصح بفصل مكونات angular بشكل مستقل في ملفات مختلفة، حيث يتم الإعلان عن module في ملف module، ويتم استيراد المكونات الأخرى إليه. يجب الانتباه إلى أنه عند التعبئة أو الاستيراد عبر script، يجب أولاً تحميل ملف إعلان module، ثم يمكن تحميل مكونات المodule الأخرى.

في مجتمع angular باللغة الصينية، يُسمع أحيانًا بعض الأصدقاء يسألون عن خطأ 'ng:areq':

　[ng:areq] 'DemoCtrl' هو ليس دالة، تم الحصول على undefined!

هذا يحدث غالبًا بسبب نسيان تعريف controller أو تكرار الإعلان عن module عدة مرات، حيث يؤدي تكرار الإعلان عن module إلى حذف معلومات تعريف module السابقة، لذا لن يجد البرنامج العنصر المحدد. نحن نستطيع أيضًا معرفة ذلك من ملفات المصدر الخاصة بـ angular (من loader.js):

function setupModuleLoader(window) {
      ...
      function ensure(obj, name, factory) {}}
        return obj[name] || (obj[name] = factory());
      }
      var angular = ensure(window, 'angular', Object);
      return ensure(angular, 'module', function() {
        var modules = {};
        return function module(name, requires, configFn) {
          var assertNotHasOwnProperty = function(name, context) {
            if (name === 'hasOwnProperty') {
              throw ngMinErr('badname', 'hasOwnProperty is not a valid {0} name', context);
            }
          };
          assertNotHasOwnProperty(name, 'module');
          if (requires && modules.hasOwnProperty(name)) {
            modules[name] = null;
          }
          return ensure(modules, name, function() {
            if (!requires) {
              throw $injectorMinErr('nomod', "وحدة '{0}' غير متاحة! قد تكون قد كتبت" +
                "اسم الوحدة أو نسيته تحميله. تأكد عند تسجيل الوحدة من أنك " +
                "تحديد الاعتماد كالمعامل الثاني." name);
            }
            var invokeQueue = [];
            var runBlocks = [];
            var config = invokeLater('$injector', 'invoke');
            var moduleInstance = {
              _invokeQueue: invokeQueue ,
              _runBlocks: runBlocks ,
              requires: requires,
              name: name,
              provider: invokeLater('$provide', 'provider'),
              factory: invokeLater('$provide', 'factory'),
              service: invokeLater('$provide', 'service'),
              value: invokeLater('$provide', 'value'),
              constant: invokeLater('$provide', 'constant', 'unshift'),
              animation: invokeLater('$animateProvider', 'register'),
              filter: invokeLater('$filterProvider', 'register'),
              controller: invokeLater('$controllerProvider', 'register'),
              directive: invokeLater('$compileProvider', 'directive'),
              config: config,
              run: function(block) {
                runBlocks.push(block);
                return this;
              }
            };
            if (configFn) {
              config(configFn);
            }
            return moduleInstance;
            function invokeLater(provider, method, insertMethod) {
              return function() {
                invokeQueue[insertMethod || 'push']([provider, method, arguments]);
                return moduleInstance;
              };
            }
          });
        };
      });
    }

في الكود، يمكننا معرفة أن angular يضبط جهاز التحكم العالمي عند بدء التشغيل، ثم ينشر API module على جهاز التحكم العالمي. يمكن رؤية الجملة الأولى بوضوح في كود API module، لا يمكن أن تكون اسم module بدءًا بـ hasOwnProperty، وإلا سيتم إطلاق رسالة خطأ "badname". وبعدها، إذا تم تمرير معامل name، فإنه يعني أن هناك إعلانًا عن module، سيتم حذف معلومات module الموجودة، وإضافتها إلى null.

من تعريف moduleInstance، يمكننا رؤية أن واجهات برمجة تطبيقات التي公开ها angular لدينا هي: invokeQueue،runBlocks،requires،name،provider،factory،servic،value،constant،animation،filter،controller،directive،config،run. invokeQueue و runBlocks هي خصائص خاصة موافق عليها بناءً على الأسماء، لا تستخدمها عشوائيًا، وأي واجهة برمجة تطبيقات أخرى هي طرق تعريف المكونات الشائعة لـ angular، يمكن رؤيتها من كود invokeLater، والذي يكون مكون angular هذا يعود بمثال moduleInstance، مما يكوين API سلس، يُنصح باستخدام تعريف السلس لهذه المكونات بدلاً من تعريف متغير module عالمي.

في النهاية، إذا تم تقديم المعامل الثالثة configFn، فإنه سيتم تكوينها في معلومات config، عندما يدخل angular في مرحلة config، فإنها ستقوم بالتنفيذ على التوالي، لتكوين التطبيق أو المكونات مثل service من angular قبل إنشاء المثال.

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

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