كيفية استخدام مكتبة مسج مع إطار الزاوي (عندما يكون ذلك ضروريا حقا)

نقدم لك ترجمة لمقالة Aditya Modi المنشورة على blog.bitsrc.io. تتناول هذه المقالة استخدام jQuery في التطبيقات الزاوية.



من النادر أن أتناول شيئًا بحذر. ومع ذلك ، لن يؤذي الحذر هذا الوقت ، لأن دمج مسج في الزاوي ليس بهذه البساطة.

لماذا ، في الواقع ، كتبت هذا المقال؟ أحيانًا يكون jQuery ضروريًا جدًا للتطوير على Angular ، ومع ذلك ، نادراً ما ترتبط أطر عمل JavaScript هذه بهذه المكتبة. Angular مسؤولة عن تقديم DOM وإدارتها ، وإذا قمت بإجراء تغييرات عليها باستخدام jQuery ، فستواجه خطر الحصول على نتيجة غير متوقعة للغاية.

نصيحة : باستخدام Bit ، يمكنك مشاركة المكونات Angular بسرعة وإعادة استخدامها في تطبيقاتك. سيتيح لك ذلك وفريقك قضاء وقت أقل في إنشاء تطبيقات جديدة. محاولة إعطائها.



سواء كان ذلك في بعض الحالات ، فإن التدخل في الإطار ضروري ومبرر ، ويمكن أن يكون مخرجًا حقيقيًا. هذه الحالات غير مشمولة في مدونتي ، ومع ذلك ، ربما سأتحدث عنها في مقالاتي القادمة. الآن ، اسمحوا لي أن أريك كيفية إضافة مكتبة مسج إلى Angular. في هذا البرنامج التعليمي ، سأستخدم رمز VS. يمكنك اختيار محرر برامج آخر أو تنزيل Visual Studio Code لنظام التشغيل Windows و Linux و macOS .

تكامل مسج في الزاوي

بادئ ذي بدء ، نحن بحاجة إلى إنشاء تطبيق Angular باستخدام الأمر ng new . بعد ذلك ، باستخدام cd نذهب إلى المجلد حيث سيتم تثبيت مكتبة jQuery من خلال npm. دعونا ندعو تطبيق angularmeetsjquery الناتج.

 ng new angularmeetsjquery cd angularmeetsjquery npm install jquery — save 

تبدو رائعة ، ولكن يفضل خالص jQuery التنزيل عبر jQuery CDN بدلاً من npm. CDN هي طريقة بديلة لإضافة مكتبة مسج إلى تطبيق Angular ، لكنني أفضل استخدام طريقة npm. إذا نظرت إلى https://jquery.com/download/ ، فستجد مكتبات jQuery CDN وشبكات CDN الأخرى من Google و Microsoft و CDNJS و jsDelivr. أوصي بأحدث إصدار رسمي من CDN ، لأنه يدعم آلية SRI (نزاهة المصدر الفرعي).

لاستخدام jQuery CDN ، ما عليك سوى إنشاء رابط للملف في علامة script مباشرةً من مجال jQuery CDN. سيبدو رمز مع وظيفة تكامل مصدر فرعي مثل هذا. (كما ترون ، أنا أستخدم إصدار مكتبة jQuery 3.3.1.)

 <script src=”https://code.jquery.com/jquery-3.3.1.js" integrity=”sha256–2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=” crossorigin=”anonymous”> </script> 

يمكن نسخ البرنامج النصي من مورد code.jquery.com. بعد ذلك ، تحتاج إلى إدراجه في ملف index.html في نهاية العلامة < body >.

جعل مكتبة jQuery عالمية

ملف jquery.min.js ، الموجود في مجلد dis من وحدة jQuery ، ليس عامًا (الاسم الصحيح للمجلد هو dist. - Ed. ). لجعل مكتبة jQuery عالمية ، انتقل إلى الملف .angular-cli.json واكتب رابطًا إلى المسار إلى ملف jQuery.

عند نقل رابط إلى مسار ملف داخل تطبيق Angular ، يكون المجلد الجذر هو src. ومع ذلك ، توجد مكتبة jQuery داخل دليل node_modules . لذلك ، تحتاج إلى تحديد المسار الصحيح إلى .angular-cli.json .

 ../node_modules/jquery/dist/jquery.min.js 

للتأكد من صحة المسار ، انتقل إلى دليل node_modules→jquery→dist→jquery.min.js . هنا يمكنك رؤية المسار المحدد ، مما يعني أنه تمت إضافة مكتبة jQuery على مستوى العالم لهذا التطبيق. لا تتوقع إعادة تحميل المضيف المحلي: 4200 صفحة في المستعرض الخاص بك ، لأن الملف موجود خارج مجلد src. لكي تظهر التغييرات في التطبيق ، يجب عليك إعادة تشغيلها.

 ng serve –open 

باستخدام مسج في تطبيق الزاوي

لبدء استخدام مكتبة jQuery مع إطار عمل الزاوي ، تحتاج إلى الانتقال إلى مكونات التطبيق. سأوضح لك كيف يمكن لهاتين التقنيتين العمل مع عنصر HTML بسيط button . لكن أولاً ، احذف جميع سطور التعليمات البرمجية في ملف app.component.html وأضف عنصر HTML إلى button .

 <button> Click me </button> 

سيتم إعادة تحميل الصفحة تلقائيًا ، ثم سيظهر زر.



نحتاج إلى تعيين حرف jQuery في ملف app.component.ts .

 declare var $: any; 

ثم قم بإدخال ربط دورة حياة ngOnInit . للقيام بذلك ، يمكنك استيراد OnInit من Angular Core.

 import { Component, OnInit} from '@angular/core'; 

أضف ngOnInit .

 export class AppComponent implements OnInit { 

بغض النظر عن جاهزية DOM ، يمكنك كتابة كود jQuery داخل طريقة ngOnInit ، كما هو الحال مع تطوير تطبيقات الويب القياسية. لاختبار الزر الذي تم إنشاؤه في app.component.html ، أضف الحدث button.click إلى طريقة button.click .

 export class AppComponent implements OnInit { ngOnInit(){ $('button').click(function(){ alert('Wass up!'); }); } } 

إذا قمت بالنقر فوق الزر ، فسيظهر "Wass Up".

استنتاج

إضافة jQuery إلى الزاوي وكذلك استخدام هذه الحزمة هي فكرة مشكوك فيها.

نعم ، للوهلة الأولى تبدو الطريقة بسيطة. ومع ذلك ، كما قلت في بداية المقال ، بغض النظر عن مدى إغراء الاستخدام المشترك لهاتين التقنيتين ، فإن الفكرة غالباً ما تكون سيئة. في التطبيقات الزاويّة الواقعية ، عليك التعامل مع أشياء أكثر تعقيدًا من عنصر button HTML المرتبط بالحدث. نصيحتي لكل من يعمل مع Angular ويبحث عن فرصة لتضمين مسج في كود TypeScript: إذا لم يكن ضروريًا ، فلا. أتمنى لك تجارب ناجحة في مجال مسج الزاوي!