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

| | 0 Comments| 5:25 AM
Categories:

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

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

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

Що таке Bootstrap?

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

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

Що таке AngularJS?

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

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

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

  • Попередньо зібрані компоненти інтерфейсу користувача: вам не потрібно створювати навігаційні панелі, кнопки, каруселі та картки з нуля, оскільки Bootstrap має попередньо зібрані фрагменти коду, які ви можете використовувати. Таким чином, розробники можуть більше зосередитися на функціональності, тоді як Bootstrap піклується про базову структуру та стиль.
  • Можливість налаштування: попередньо зібрані компоненти забезпечують шаблонний код. Однак ви можете налаштувати код у своїй програмі. Наприклад, якщо ви берете картку з Bootstrap, ви можете змінити різні елементи, такі як зображення та текст, відповідно до ваших потреб.
  • Чуйний: сучасні користувачі Інтернету переглядають на різних пристроях, від смартфонів і планшетів до комп’ютерів. Вам не потрібно створювати програму для кожного розміру екрана, оскільки Bootstrap забезпечує адаптивні веб-програми.
  • Забезпечує узгоджений стиль: хороший веб-додаток повинен виглядати однаково на різних сторінках. Використання елементів і компонентів Bootstrap може допомогти вам досягти цієї мети.
  • Сильна спільнота: цей фреймворк наповнений багатьма ресурсами та надійною документацією та підтримується багатьма розробниками.
  Як відновити Redistributable Microsoft Visual C++

передумови

#1. Node.js

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

вузол -в

Ви можете встановити його з офіційного сайту, якщо він не встановлений.

#2. Менеджер пакетів вузлів (NPM)

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

npm -v

#3. Кутовий CLI

Це інструмент командного рядка, який ми будемо використовувати для створення базової структури програми Angular. Ви можете встановити Angular CLI за допомогою цієї команди;

npm install -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-bootstrap

Ви відповісте на ці запитання;

  • Бажаєте додати кутову маршрутизацію? (y/N) введіть y
  • Який формат таблиці стилів ви хотіли б використовувати? Виберіть CSS

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

Перейдіть до створеного проекту та перейдіть до кроку 2. Ви можете скористатися цією командою;

cd angular-bootstrap-mockup

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

Крок 2: установіть bootstrap і піктограми bootstrap.

  Як перенести відео на iPad

Виконайте цю команду, щоб інсталювати обидва;

npm інсталювати bootstrap bootstrap-icons

Крок 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, створених на основі фреймворку Bootstrap. Різні компоненти цієї бібліотеки розроблено для роботи з AngularJS.

Використовуйте цю команду, щоб встановити його;

npm інсталювати @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/ у своєму браузері.

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

Ми можемо створити кілька кнопок, використовуючи цей підхід у новому проекті. Виконайте такі дії;

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

Ми назвемо нашу програму angular-bootstrap-cdn. (Ви можете вибрати будь-яке ім’я).

Виконайте цю команду;

ng новий angular-bootstrap-cdn

Після завершення встановлення змініть каталог і відкрийте свій проект у редакторі коду. Ви можете використовувати цю команду для входу в каталог проекту;

cd angular-bootstrap-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. Запустіть програму

  Що таке LAN і VLAN? Вступний посібник

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.