دمج bootstrap & jquery داخل مشروع angular

سنستخدم بمشروعنا اطار عمل bootstrap من أجل تسهيل العمل

حمل اطار عمل bootstrap من الموقع الرسمي

https://getbootstrap.com/docs/4.1/getting-started/download/

انشيء مجلد plugins داخل مجلد assets وضع داخله ملفات bootstrap

app/assets/plugins/bootstrap-4.1.3-dist/

قم بتضمين مسار bootstrap داخل ملف angular.json بداخل مصفوفة styles + scripts سنضع المسارات بهدا الشكل

            "styles": [
              "./src/assets/plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
                "./src/assets/plugins/bootstrap-4.1.3-dist/js/bootstrap.min.js"
              ]

قم بتنصيب مكتبة jquery عن طريق npm عن طريق مدير الاوامر terminal / comande promp لا تنسى ان تتموضع داخل مشروعك في الـ terminal عن طريق cd your/path

npm install jquery --save

قم بتضمين مكتبة jquery بملف angular.json وضعه هو الأول بملفات scripts

            "styles": [
              "./src/assets/plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
                "./node_modules/jquery/dist/jquery.min.js", 
                "./src/assets/plugins/bootstrap-4.1.3-dist/js/bootstrap.min.js"
              ]

تأكد ان ملف jqeury فوق bootstarp.min.js لأن مكتبة bootstarp تستخدم أكواد ودوال jquery التي يفترض ان تكون جاهزة مسبقا بالمتصفح كما في الشكل اعلاه

شغل المشروع وافتح debugger لتتأكد من عدم وجود اخطاء عن طريق زر F12 ثم اختر console

أمر اقلاع المشروع على البورت 4200 وفترة الاستجابة للتحديثات 2000 ميلي ثانية (2 ثانية)

ng serve --port=4200 --poll=2000

poll=2000 يقصد بها انه في كل مرة تقوم بتحديث في الكود وتعمل حفظ سينتظر 2 ثانية من اجل عمل تحديث تلقائي بالمتصفح من اجل عرض التحديثات الجديدة التي وضعتها بالكود دون الحاجة لاعادة تحديث المتصفح في كل مرة لاستعراض تحديثاتك للكود

مدونتي الرقمية

بحث هذه المدونة الإلكترونية

دمج bootstrap & jquery داخل مشروع angular

الدروس السابقة :

تعليقات

إرسال تعليق