كيفية إضافة Bootstrap إلى Angular [Step-by-Step]
تعد HTML و JavaScript و CSS من بين ركائز تطوير الواجهة الأمامية. Angular هو أحد أطر عمل JavaScript الأكثر استخدامًا لبناء تطبيقات من جانب العميل. من ناحية أخرى ، يعد Bootstrap من بين أكثر أطر واجهة المستخدم (UI) شيوعًا.
الأطر عبارة عن مجموعة من التعليمات البرمجية والأدوات والمكتبات التي تم إنشاؤها مسبقًا والتي توفر طريقة محددة مسبقًا لإنشاء التطبيقات. Bootstrap و Angular كلا الإطارين.
ستحدد هذه المقالة كل إطار عمل وتناقش فوائد الجمع بين التقنيتين وكيفية الجمع بينهما لإنشاء تطبيقات قوية وجذابة بصريًا.
ما هو Bootstrap؟
Bootstrap عبارة عن مجموعة أدوات مجانية للواجهة الأمامية لإنشاء تطبيقات الجوال أولاً. يحتوي إطار عمل HTML و CSS و JavaScript على مجموعة كبيرة من أجزاء التعليمات البرمجية القابلة لإعادة الاستخدام والتي يمكن للمطورين استخدامها في أجزاء مختلفة من مشاريعهم.
يحتوي هذا الإطار على قوالب تصميم للعديد من الميزات مثل الأزرار والوسائط ودوامات الصور والجداول والتنقلات وغير ذلك الكثير. يحتوي Bootstrap على وثائق شاملة لتسهيل استخدامه.
ما هو AngularJS؟
AngularJS هو إطار عمل JavaScript يوسع بناء جملة HTML إلى ما وراء لغة الترميز العادية. يقدم إطار العمل هذا ميزات مثل ربط البيانات التي تسمح للمطورين بتجنب العملية المعقدة لإنشاء صفحات ويب سريعة الاستجابة عند استخدام HTML.
تستخدم AngularJS إطار عمل وحدة التحكم في عرض النموذج (MVC) ، حيث يوجد فصل واضح بين منطق التطبيق وواجهة المستخدم. يمكن للمطورين استخدام AngularJS لإنشاء تطبيقات ويب من صفحة واحدة وتطبيقات الشبكات الاجتماعية ومنصات التجارة الإلكترونية وأنظمة إدارة المحتوى والمزيد.
فوائد استخدام Bootstrap في Angular
- مكونات واجهة المستخدم التي تم إنشاؤها مسبقًا: لا يتعين عليك إنشاء أشرطة تنقل وأزرار ودوامات وبطاقات من البداية ، حيث يحتوي Bootstrap على أجزاء برمجية مسبقة الإنشاء يمكنك استخدامها. وبالتالي ، يمكن للمطورين التركيز أكثر على الوظائف بينما يعتني Bootstrap بالبنية والتصميم الأساسيين.
- قابلة للتخصيص: توفر المكونات المبنية مسبقًا رمز معياري. ومع ذلك ، يمكنك تخصيص الكود أثناء وجودك في التطبيق الخاص بك. على سبيل المثال ، إذا أخذت بطاقة من Bootstrap ، يمكنك تغيير عناصر مختلفة ، مثل الصور والنصوص لتناسب احتياجاتك.
- متجاوب: يتصفح مستخدمو الويب الحديثون على أجهزة مختلفة ، من الهواتف الذكية والأجهزة اللوحية إلى أجهزة الكمبيوتر. لا يتعين عليك إنشاء تطبيق لكل حجم شاشة ، حيث يوفر Bootstrap تطبيقات ويب سريعة الاستجابة.
- يجلب نمطًا متسقًا: يجب أن يكون لتطبيق الويب الجيد إحساس متسق وأن ينظر عبر صفحات مختلفة. يمكن أن يساعدك استخدام عناصر ومكونات Bootstrap في تحقيق هذا الهدف.
- مجتمع قوي: هذا الإطار مليء بالعديد من الموارد والوثائق القوية وهو مدعوم من قبل العديد من المطورين.
المتطلبات الأساسية
# 1. Node.js
هذه بيئة تشغيل JavaScript ستستخدمها لتشغيل كود JavaScript خارج المتصفح. يمكنك التحقق من الإصدار الحالي من Node.js عن طريق تشغيل هذا الأمر ؛
عقدة الخامس
يمكنك تثبيته من الموقع الرسمي إذا لم يكن مثبتًا.
# 2. مدير حزمة العقدة (NPM)
ستدير NPM جميع الحزم المرتبطة التي تحتاجها لتطبيق Angular الخاص بك. يتم تثبيت NPM افتراضيًا عند تثبيت Node.js. يمكنك التحقق من الإصدار الحالي باستخدام هذا الأمر ؛
npm -v
# 3. الزاوي CLI
إنها أداة سطر أوامر سنستخدمها لإنشاء البنية الأساسية لتطبيق Angular. يمكنك تثبيت Angular CLI باستخدام هذا الأمر ؛
تثبيت npm -g @ angular / cli
# 4. بيئة تطوير متكاملة (IDE)
هذا هو المكان الذي ستكتب فيه التعليمات البرمجية الخاصة بك. يمكنك استخدام أي IDE يدعم JavaScript ، مثل Visual Studio Code أو Webstorm.
كيفية إضافة Bootstrap إلى Angular
لدينا الآن جميع الأدوات اللازمة لإنشاء تطبيق Angular الخاص بنا. هناك طريقتان رئيسيتان لإضافة Bootstrap إلى Angular ؛ 1. تثبيت Bootstrap باستخدام NPM. 2. استخدام روابط CDN
المقاربة 1: استخدام NPM
يمكننا تثبيت مكتبة Bootstrap بالكامل على مشروعنا باستخدام NPM. اتبع هذه الخطوات ؛
الخطوة 1: استخدم Angular CLI لإعداد بنية التطبيق الأساسية
يحتوي تطبيق Angular النموذجي على العديد من الملفات. سنقوم بتسمية تطبيقنا angular-bootstrap-mockup (يمكنك إعطاء تطبيقك أي اسم يرضيك). استخدم هذا الأمر لإعداد التطبيق الخاص بك ؛
ng زاوية تمهيد جديدة بالحجم الطبيعي
سيتم توجيهك من خلال هذه الأسئلة ؛
- هل ترغب في إضافة Angular routing؟ (y / N) أدخل y
- ما تنسيق ورقة الأنماط الذي ترغب في استخدامه؟ حدد CSS
بمجرد انتهاء الإعداد ، سيكون لديك شيء مشابه لهذا على جهازك الطرفي.
انتقل إلى المشروع الذي تم إنشاؤه وانتقل إلى الخطوة 2. يمكنك استخدام هذا الأمر ؛
cd الزاوي التمهيد نموذج بالحجم الطبيعي
افتح المشروع في محرر التعليمات البرمجية الخاص بك. سيكون هيكل المشروع على النحو التالي ؛
الخطوة 2: تثبيت أيقونات التمهيد والتمهيد.
قم بتشغيل هذا الأمر لتثبيت كليهما ؛
npm تثبيت أيقونات bootstrap bootstrap
الخطوة 3: قم بتضمين Bootstrap في ملف angular.json
حدد موقع ملف angular.json في المجلد الجذر لتطبيقك وقم بتغيير هذه السطور ؛
"styles": [ "node_modules/bootstrap/scss/bootstrap.scss", "node_modules/bootstrap-icons/font/bootstrap-icons.css", "src/styles.scss" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]
الخطوة 4: تثبيت ng-bootstrap
Ng-bootstrap عبارة عن مجموعة من مكونات Angular UI المبنية أعلى إطار Bootstrap. تم تصميم المكونات المختلفة في هذه المكتبة للعمل مع AngularJS.
استخدم هذا الأمر لتثبيته ؛
npm install @ ng-bootstrap / ng-bootstrap
الخطوة 5: قم بتعديل app.module.ts لتضمين NgbModule.
تغيير محتويات ملف app.module.ts بهذا ؛
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgbModule,
AppRoutingModule,
],
providers: [
],
bootstrap: [
AppComponent,
],
})
export class AppModule {
}
الخطوة 5: تعديل app.component.ts
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private modalService: NgbModal) {
}
public open(modal: any): void {
this.modalService.open(modal);
}
}
الخطوة 6: أضف عناصر Bootstrap إلى ملف app.component.html
هناك الكثير من المكونات للاختيار من بينها على موقع Bootstrap. سننشئ شريط تنقل بسيط ونضيف زرين.
قم بتغيير محتويات app.component.html على النحو التالي ؛
<ul class="nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link disabled">Blog</a> </li> </ul> <button type="button" class="btn btn-primary btn-lg">Angular</button> <button type="button" class="btn btn-secondary btn-lg">Bootstrap</button>
الخطوة 7: قم بتشغيل التطبيق الخاص بك
استخدم هذا الأمر ؛
يخدم ng
عند تشغيل تطوير Angular ، يمكنك فتح http: // localhost: 4200 / من متصفحك.
الطريقة 2: إضافة Bootstrap إلى Angular باستخدام روابط CDN
يتيح لك هذا الأسلوب الارتباط مباشرة بشبكة توصيل المحتوى (CDN) التي تخزن ملفات Bootstrap.
يمكننا إنشاء عدة أزرار باستخدام هذا الأسلوب في مشروع جديد. اتبع هذه الخطوات ؛
الخطوة 1: إنشاء مشروع Angular جديد
سنقوم بتسمية تطبيقنا angular-bootstrap-cdn. (يمكنك اختيار أي اسم).
قم بتشغيل هذا الأمر ؛
ng زاوية تمهيد جديدة cdn
بمجرد انتهاء التثبيت ، قم بتغيير الدليل وافتح مشروعك في محرر التعليمات البرمجية. يمكنك استخدام هذا الأمر للدخول إلى دليل المشروع ؛
cd الزاوي تمهيد cdn
الخطوة 2: قم بتضمين رابط CDN في ملف index.html
حدد موقع ملف src / index.html ورابط CDN في قسم الرأس.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
الخطوة 3: أضف كود Bootstrap إلى ملف app.component.html
حدد موقع ملف src / app / app.component.html.
يمكنك إضافة هذا الرمز إلى الملف ؛
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
الخطوة 4: قم بتشغيل التطبيق الخاص بك
يخدم ng
أسئلة مكررة
هل يمكنك استخدام Bootstrap و Angular Material معًا في نفس المشروع؟
نعم. Bootstrap و Angular Material هي مكتبات واجهة مستخدم تم إنشاؤها لخدمة نفس الغرض. ومع ذلك ، يجب ألا تستخدم كلا المكتبتين عند التعامل مع نفس المكون ، حيث من المحتمل أن تتعطل. على سبيل المثال ، إذا كنت تريد إنشاء صفحة تسجيل دخول ، فاختر إما بناءً على المكونات المتاحة.
ما هو إصدار Bootstrap المتوافق مع Angular؟
الإصدار الحالي من Bootstrap ، حتى كتابة هذه السطور ، هو v5.3.0-alpha2. من ناحية أخرى ، فإن الإصدار الحالي من Angular هو Angular 15. أي شيء من Bootstrap 4 متوافق مع إصدارات Angular المختلفة. ومع ذلك ، تحقق دائمًا من الوثائق على كل من مواقع Bootstrap و Angular الرسمية عند الجمع بين التقنيتين
ما هي المشاريع التي يمكنك إنشاؤها باستخدام Bootstrap و Angular؟
لا توجد قيود على طبيعة التطبيقات التي يمكنك إنشاؤها باستخدام Bootstrap و Angular. يمكنك استخدام الاثنين لإنشاء تطبيقات من صفحة واحدة ، ومواقع التجارة الإلكترونية ، والأنظمة الأساسية الاجتماعية ، ولوحات المعلومات ، ولوحات الإدارة. يمكنك أيضًا استخدام Angular مع إطار عمل Ionic لإنشاء تطبيقات الهاتف المحمول.
هل Angular إطار عمل JavaScript أم TypeScript؟
Angular هو إطار عمل JavaScript. ومع ذلك ، فإن Angular مكتوب بلغة TypeScript ، وهي مجموعة شاملة من JavaScript. يقدم TypeScript وظائف جديدة غير متوفرة في JavaScript. وبالتالي يمكنك استخدام Angular مع كل من تطبيقات TypeScript و Angular.
خاتمة
يمكنك الآن بشكل مريح استخدام اثنين من أكثر إطارات الواجهة الأمامية شيوعًا ، Angular و Bootstrap ، لإنشاء تطبيقات متنوعة.
يعتمد اختيار الأسلوب على حالة الاستخدام ونوع التطبيق الذي تريد إنشاءه.
على الرغم من أن نهج CDN يبدو سهلاً ، إلا أن له العديد من الجوانب السلبية. يتمثل التحدي الرئيسي في أمان تطبيقك ، حيث يمكن للقراصنة استخدام شبكات CDN لدفع البرامج النصية الضارة إلى موقع الويب الخاص بك.
يمنحك تثبيت Bootstrap باستخدام NPM التحكم في الكود الذي تقوم بتضمينه في تطبيقك. ومع ذلك ، يمكن أن يكون هذا الأسلوب مستهلكًا للوقت حيث يتعين عليك تنزيل جميع التبعيات.
تعرف على كيفية إضافة Bootstrap إلى تطبيق React.
