AngularJS ng-include: تضمين ملفات HTML مع مثال

بشكل افتراضي، لا يوفر HTML إمكانية تضمين تعليمات برمجية من جانب العميل من ملفات أخرى. من الممارسات الجيدة في أي لغة برمجة توزيع الوظائف عبر الملفات المختلفة لأي تطبيق.

على سبيل المثال، إذا كان لديك منطق للعمليات الرقمية، فمن الطبيعي أن ترغب في تعريف هذه الوظيفة في ملف منفصل واحد. ومن الممكن بعد ذلك إعادة استخدام هذا الملف المنفصل عبر تطبيقات متعددة بمجرد تضمين هذا الملف.

هذا هو عادة مفهوم تضمين البيانات والتي تتوفر في لغات البرمجة مثل .Net و Java.

يتناول هذا الدرس طرقًا أخرى لملفات (الملفات التي تحتوي على ملفات خارجية) HTML يمكن تضمين الكود في ملف HTML الرئيسي.

يشمل جانب العميل

إحدى أكثر الطرق شيوعًا لإدراج كود HTML هي عبر Javaالنصي. Javaسيناريو هي لغة برمجة يمكن استخدامها لمعالجة المحتوى في صفحة HTML بسرعة. لذلك، Javaيمكن أيضًا استخدام البرنامج النصي لتضمين التعليمات البرمجية من ملفات أخرى.

توضح الخطوات التالية كيفية تحقيق ذلك.

الخطوة 1) قم بتحديد ملف يسمى Sub.html وأضف الكود التالي إلى الملف.

<div>
	This is an included file
</div>

الخطوة 2) قم بإنشاء ملف يسمى Sample.html، وهو ملف التطبيق الرئيسي الخاص بك وقم بإضافة مقتطف التعليمات البرمجية أدناه.

فيما يلي الجوانب الرئيسية التي يجب ملاحظتها حول الكود أدناه،

1. يوجد في علامة الجسم علامة div التي تحتوي على معرف المحتوى. هذا هو المكان الذي سيتم فيه إدراج التعليمات البرمجية من الملف الخارجي "Sub.html".
2. يوجد إشارة إلى سكربت jQuery. jQuery هي لغة برمجة نصية مبنية على... Javaنص برمجي يجعل التلاعب بنموذج كائن المستند (DOM) أسهل.
3. في خانة رمز الخصم، أدخل TABBYDAY. Javaفي وظيفة البرنامج النصي، يوجد بيان '$(“#Content”).load(“Sub.html”);' الذي يتسبب في حقن الكود الموجود في الملف Sub.html في علامة div التي تحمل المعرف Content.

   <html> 
   	  <head> 
   	    <script src="jquery.js"></script> 
   	    <script> 
   	    $(function(){
   	      $("#Content").load("Sub.html"); 
   	    });
       </script> 
     </head> 
   
   <body> 
        <div id="Content"></div>
     </body> 
   </html>

يشمل جانب الخادم

تتوفر أيضًا تضمينات جانب الخادم لتضمين جزء شائع من التعليمات البرمجية في جميع أنحاء الموقع. يتم ذلك عادةً لتضمين المحتوى في الأجزاء التالية من مستند HTML.

1. رأس الصفحة
2. تذييل الصفحة
3. قائمة الإبحار.

لكي يتعرف خادم الويب على ملفات التضمين من جانب الخادم، يجب أن تحمل أسماء الملفات امتدادات خاصة. وعادةً ما يقبلها خادم الويب، مثل .shtml و .stm و .shtm و .cgi.

يُستخدم التوجيه "include" لإدراج المحتوى. فيما يلي مثال على هذا التوجيه:

<!--#include virtual="navigation.cgi" -->

• يسمح التوجيه أعلاه بإدراج محتوى مستند واحد في مستند آخر.
• يتم استخدام الأمر "الافتراضي" الموجود أعلاه لتحديد الهدف بالنسبة إلى جذر مجال التطبيق.
• أيضًا، بالنسبة للمعلمة الافتراضية، هناك أيضًا معلمة الملف التي يمكن استخدامها. يتم استخدام معلمات "الملف" عندما يحتاج المرء إلى تحديد المسار المتعلق بدليل الملف الحالي.

ملاحظة:

يتم استخدام المعلمة الافتراضية لتحديد الملف (صفحة HTML، ملف نصي، برنامج نصي، وما إلى ذلك) الذي يجب تضمينه. إذا لم يكن لدى عملية خادم الويب حق الوصول لقراءة الملف أو تنفيذ البرنامج النصي، فسيفشل أمر التضمين. الكلمة "الافتراضية" هي كلمة أساسية مطلوب وضعها في توجيه التضمين.

كيفية تضمين ملف HTML في AngularJS

AngularJS توفر هذه الوظيفة إمكانية تضمين وظائف من ملفات AngularJS أخرى باستخدام ng-include توجيهات.

الغرض الأساسي من "توجيه ng-include" هو جلب وتجميع وتضمين جزء HTML خارجي في تطبيق AngularJS الرئيسي.

ملاحظة حول الإصدار: انتهى الدعم طويل الأمد لـ AngularJS 1.x في 31 ديسمبر 2021، ويذكر فريق تطوير الإطار أن انتهى دعم AngularJS رسميًا في يناير 2022، لذا لن تتبعها أي إصدارات أو تحديثات أمنية. تبقى كل خطوة وكل جزء من التعليمات البرمجية أدناه كما نُشرت تمامًا، كمرجع تاريخي. لا يوفر Angular الحديث بديلاً مباشرًا: يتكون الترميز من مكونات، ويتم عرض جزء يتم اختياره في وقت التشغيل باستخدام ng-container و ngComponentOutlet.

دعونا نلقي نظرة على قاعدة التعليمات البرمجية أدناه ونشرح كيف يمكن تحقيق ذلك باستخدام AngularJS.

الخطوة 1) لنكتب الكود أدناه في ملف يسمى Table.html. هذا هو الملف الذي سيتم إدراجه في ملف التطبيق الرئيسي لدينا باستخدام التوجيه ng-include.

يفترض مقتطف الشفرة أدناه وجود متغير نطاق يسمى "tutorial". ثم يستخدم نانوغرام تكرار التوجيه، الذي يستعرض كل موضوع في متغير "البرنامج التعليمي" ويعرض قيم "الاسم" و"Descriptزوج المفتاح والقيمة ion.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Description }}</td>
    </tr>
</table>

الخطوة 2) لنكتب الكود التالي في ملف باسم Main.html. هذا تطبيق AngularJS بسيط يتضمن الجوانب التالية

1. استخدم "توجيه ng-include" لإدخال الكود في الملف الخارجي "Table.html". وقد تم تسليط الضوء على البيان بالخط العريض في الكود أدناه. إذن علامة div ' ' سيتم استبداله بالكود بأكمله الموجود في ملف "Table.html".
2. في خانة رمز الخصم، أدخل TABBYDAY. مراقب يتم إنشاء متغير "tutorial" كجزء من كائن $scope. يحتوي هذا المتغير على قائمة من أزواج المفاتيح والقيم.

في مثالنا، أزواج القيمة الرئيسية هي

1. الاسم - يشير هذا إلى اسم موضوع مثل وحدات التحكم والنماذج والتوجيهات.
2. Descriptأيون – هذا يعطي وصفًا لكل موضوع

يمكن أيضًا الوصول إلى متغير البرنامج التعليمي في ملف "Table.html".

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
    <h3> Guru99 Global Event</h3>
		<div ng-include="'Table.html'"></div>
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.controller('AngularController', function($scope) {
        $scope.tutorial =[
            {Name: "Controllers" , Description : "Controllers in action"},
            {Name: "Models" , Description : "Models and binding data"},
            {Name: "Directives" , Description : "Flexibility of Directives"}
        ];

    });
</script>
</body>
</html>

عند تنفيذ الكود أعلاه، سوف تحصل على الإخراج التالي.

الناتج:

تُظهر الصورة أدناه النتيجة النهائية: يحمل تبويب المتصفح عنوان "تسجيل الحدث"، ويظهر العنوان أعلى الجدول المُضاف، وتُستمد الصفوف الثلاثة من مصفوفة البرنامج التعليمي في ملف Main.html من خلال الجزء. تُظهر لقطة الشاشة المُرفقة العنوان Gur99 بينما يكتب الكود Guru99.

سمات ng-include: src و onload و autoscroll

بالإضافة إلى اسم الملف، يقبل التوجيه سمتين اختياريتين، ويمكن كتابته بثلاث طرق: كسمة على أي عنصر، أو كـ <ng-include> عنصر، أو كفئة CSS. المرجع أدناه يتبع المرجع الرسمي توثيق ngInclude.

<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div>
<ng-include src="templateUrl"></ng-include>

الخطأ الأكثر شيوعاً يتبع من الصف الأول: src يأخذ التعبيرليس سلسلة نصية عادية. لذلك، يحتاج المسار الحرفي إلى علامات اقتباس خاصة به داخل الخاصية، ولهذا السبب يقرأ المثال أعلاه ng-include="'Table.html'". جاري الكتابة ng-include="Table.html" يجعل AngularJS يقوم بالتقييم Table كخاصية نطاق، لا تجد شيئًا، وتترك العنصر فارغًا.

لماذا يقوم ng-include بإنشاء نطاق فرعي جديد؟

لا يقوم التوجيه بلصق الترميز في النطاق المحيط. كل تضمين يُنشئ عنصرًا فرعيًا جديدًا نطاق التي ترث بشكل نموذجي من النطاق الذي تم الإعلان عنه فيه، وهذه الحقيقة تفسر معظم المفاجآت الملزمة.

تتم عملية القراءة كما هو متوقع. النص الجزئي أعلاه يقرأ tutorial مباشرة من الوالدين، ولهذا السبب ng-repeat يجد المصفوفة. تكمن المشكلة في الكتابة: عندما يُسند جزء من البيانات إلى قيمة أولية، كما هو الحال مع ng-model="topic"يقوم AngularJS بإنشاء topic في نطاق الطفل، ولا تتغير نسخة الأصل أبدًا.

هناك عادتان تتجنبان الوقوع في الفخ:

• الربط من خلال كائن، كما في ng-model="data.topic"لذلك يصل الوالد والطفل إلى نفس المرجع.
• احتفظ بالحالة في وحدة تحكم أو خدمة، واعرض وظائف بدلاً من العناصر الأولية المجردة.

يتضمن أيضًا إصدار $includeContentRequested, $includeContentLoaded و $includeContentErrorحتى يتمكن الوالد من التفاعل من خلال $scope.$on دون الخوض في نطاق الطفل على الإطلاق.

كيفية إصلاح مشكلة ملف ng-include الفارغ أو الفاشل

عادةً ما يفشل تضمين ملف لا يُنتج أي شيء لأحد الأسباب القليلة التالية. عالج هذه الأسباب بهذا الترتيب.

1. تحقق من الاقتباسات. يجب وضع اسم الملف الحرفي بين علامتي اقتباس مفردتين داخل قيمة الخاصية. وبدونهما، يُفسَّر التعبير إلى قيمة غير مُعرَّفة، ولا يتم إرسال أي طلب.
2. قم بعرض الصفحة عبر بروتوكول HTTP. يُصدر التوجيه طلب XHR للجزء، لذا فإن فتح ملف Main.html مباشرةً من القرص عبر عنوان ملف يفشل في معظم المتصفحات. أي خادم ويب محلي يُزيل هذا الخطأ.
3. تأكد من أن المسار يعمل. راقب لوحة الشبكة بحثًا عن الطلب. يشير الخطأ 404 إلى أن المسار نسبي إلى الصفحة التي تستضيف الملف المضمن، وليس إلى الجزء الذي يشير إليه.
4. احترم قاعدة الأصل الواحد. بشكل افتراضي، القالب URL يجب أن يتطابق مع نطاق وبروتوكول مستند التطبيق، لأن AngularJS يمرره من خلاله $sce.getTrustedResourceUrlيحتاج القالب من مكان آخر إلى إدخال في المورد الموثوق. URL القائمة، أو غلاف trustAsResourceUrl صريح، ولا يزال يتعين على الخادم البعيد إرسال رؤوس CORS.
5. استمع إلى صوت الفشل. يتم تشغيل $includeContentError كلما انخفض مستوى الاستجابة عن 200 إلى 299، مما يحول منطقة فارغة صامتة إلى رسالة تستحق التسجيل.

هناك سبب آخر يسهل إغفاله. يحتفظ AngularJS بكل جزء يتم جلبه في $templateCache، لذا قد يستمر الملف المُعدَّل في عرض ترميز قديم حتى تتم إزالة إدخال ذاكرة التخزين المؤقت أو إعادة تحميل الصفحة من المصدر. عندما يحتاج جزء من الصفحة إلى سلوك خاص به بدلاً من الترميز فقط، توجيهات الجمارك إن وجود قالب خاص بها ونطاق معزول هو الأداة الأفضل.

الأسئلة الشائعة