Як додати Bootstrap до Angular [Step-by-Step]

Автор

Основи Веб-Розробки: Інтеграція Bootstrap з Angular

В основі фронтенд-розробки лежать технології HTML, JavaScript та CSS. Angular виступає одним з лідерів серед JavaScript-фреймворків, призначених для створення клієнтських застосунків. Паралельно з цим, Bootstrap займає чільне місце серед фреймворків для розробки інтерфейсу користувача (UI).

Фреймворки, по суті, є комплектами попередньо розробленого коду, інструментів і бібліотек, які надають структурований підхід до створення програм. І Bootstrap, і Angular належать до цієї категорії.

Ця стаття присвячена детальному аналізу кожного з цих фреймворків, дослідженню переваг їх поєднання та методам їх інтеграції для створення не тільки функціональних, але й візуально привабливих програм.

Що таке Bootstrap?

Bootstrap є безкоштовним набором інструментів для фронтенд-розробки, спеціально розробленим для створення мобільних застосунків. Цей фреймворк, що базується на HTML, CSS та JavaScript, пропонує широкий спектр готових фрагментів коду, які можуть бути використані розробниками у різних аспектах їхніх проектів.

Він включає шаблони дизайну для різних елементів, таких як кнопки, модальні вікна, каруселі зображень, таблиці, навігаційні панелі та багато іншого. Bootstrap має детальну документацію, що значно полегшує його використання.

Що таке AngularJS?

AngularJS – це платформа JavaScript, що виходить за рамки стандартного HTML. Він впроваджує такі можливості, як зв’язування даних, що дозволяє розробникам спростити процес створення адаптивних веб-сторінок без потреби в складному ручному кодуванні.

AngularJS використовує архітектуру Model-View-Controller (MVC), де чітко розмежовано логіку програми та її інтерфейс користувача. Розробники можуть застосовувати AngularJS для розробки односторінкових додатків, соціальних мереж, платформ електронної комерції, систем управління контентом та багато іншого.

Переваги застосування Bootstrap в Angular

  • Готові UI-компоненти: Забудьте про створення навігаційних панелей, кнопок, каруселей та інших елементів з нуля. Bootstrap надає готові до використання блоки коду, дозволяючи розробникам концентруватися на функціоналі, тоді як Bootstrap забезпечує базову структуру та стиль.
  • Можливість кастомізації: Хоча компоненти Bootstrap ідуть з готовим кодом, ви завжди можете налаштувати їх під конкретні потреби вашого проекту. Наприклад, ви можете легко змінити текст, зображення та інші елементи картки, взятої з Bootstrap.
  • Адаптивність: Сучасні користувачі переглядають веб-сторінки з різних пристроїв, від смартфонів до комп’ютерів. Bootstrap гарантує, що ваш веб-додаток буде коректно відображатися на будь-якому екрані.
  • Узгодженість стилю: Для якісного веб-додатку важливо, щоб всі сторінки виглядали одноманітно. Використання елементів та компонентів Bootstrap допоможе вам досягти цієї мети.
  • Активна спільнота: Bootstrap підтримується великою спільнотою розробників, пропонуючи численні ресурси та детальні посібники.

Необхідні умови

1. Node.js:

Це JavaScript-середовище виконання, яке дозволяє запускати JavaScript-код поза браузером. Ви можете перевірити версію Node.js за допомогою команди:

node -v

Якщо Node.js не встановлено, завантажте його з офіційного веб-сайту.

2. Менеджер пакетів Node (NPM):

NPM керує пакетами, потрібними для вашого Angular-застосунку. Він встановлюється автоматично разом з Node.js. Перевірити його версію можна командою:

npm -v

3. Angular CLI:

Цей інструмент командного рядка потрібен для створення базової структури Angular-застосунку. Встановлюється командою:

npm install -g @angular/cli

4. Інтегроване середовище розробки (IDE):

Використовуйте будь-яке IDE, яке підтримує JavaScript, наприклад, Visual Studio Code або Webstorm.

Інтеграція Bootstrap в Angular

Після налаштування необхідних інструментів можна приступити до інтеграції Bootstrap в Angular. Є два основні підходи: встановлення Bootstrap через NPM і використання CDN-посилань.

Підхід 1: Використання NPM

Цей метод передбачає встановлення всієї бібліотеки Bootstrap у проект за допомогою NPM. Виконайте наступні кроки:

Крок 1: Створення базової структури Angular-застосунку через Angular CLI.

Типовий Angular-проект має багато файлів. Назвемо наш проект “angular-bootstrap-mockup”. Використайте команду:

ng new angular-bootstrap-mockup

Під час створення буде поставлено декілька запитань:

  • Додати Angular routing? (y/N): введіть y
  • Який формат таблиці стилів використовувати? Виберіть CSS

Після налаштування, в терміналі буде виведено повідомлення про успішне завершення процесу.

Перейдіть в папку створеного проекту за допомогою команди:

cd angular-bootstrap-mockup

Відкрийте проект в обраному редакторі коду. Структура проекту буде подібною до наступної:

Крок 2: Встановіть Bootstrap та Bootstrap Icons.

Виконайте команду:

npm install bootstrap bootstrap-icons

Крок 3: Інтегруйте Bootstrap в файл angular.json.

У кореневій папці проекту знайдіть файл angular.json і відредагуйте блоки styles та scripts:

"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-компонентів інтерфейсу користувача, розроблених на основі 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 {
}

Крок 6: Змініть 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);
  }
}

Крок 7: Додайте компоненти 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>

Крок 8: Запустіть застосунок.

Використайте команду:

ng serve

Після запуску, відкрийте http://localhost:4200/ у вашому браузері.

Підхід 2: Інтеграція Bootstrap за допомогою CDN-посилань

Цей метод передбачає пряме підключення до мережі доставки контенту (CDN), де зберігаються файли Bootstrap.

Створимо кілька кнопок, використовуючи цей підхід. Дотримуйтесь наступних інструкцій:

Крок 1: Створіть новий Angular-проект.

Назвемо наш проект “angular-bootstrap-cdn” (можна обрати будь-яку назву).

Виконайте команду:

ng new angular-bootstrap-cdn

Після встановлення, перейдіть до каталогу та відкрийте проект у вашому редакторі. Для переходу до каталогу проекту використовуйте команду:

cd angular-bootstrap-cdn

Крок 2: Додайте CDN-посилання в файл index.html.

Знайдіть файл src/index.html та додайте посилання CDN в межах тегу <head>.

<head>
  .......
  <link rel="stylesheet" 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 serve

Часті Питання

Чи можна використовувати 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, але він написаний на TypeScript, надбудові JavaScript, яка має розширений функціонал. Таким чином, ви можете використовувати Angular з застосунками на TypeScript.

Висновок

Тепер у вас є знання для ефективного використання двох популярних фронтенд-фреймворків: Angular і Bootstrap. Ви можете створювати різноманітні веб-додатки, використовуючи ці технології.

Вибір підходу залежить від конкретних потреб та типу вашого проекту.

Хоча CDN-підхід здається простим, він має ряд недоліків. Одним з ключових є безпека, оскільки зловмисники можуть використовувати CDN для впровадження шкідливого коду на ваш сайт.

Встановлення Bootstrap через NPM дає більше контролю над кодом, але може зайняти більше часу через необхідність завантаження залежностей.

Перегляньте, як можна інтегрувати Bootstrap у React-додаток.