HTML, JavaScript и CSS являются одними из столпов фронтенд-разработки. Angular — одна из наиболее часто используемых сред JavaScript для создания клиентских приложений. С другой стороны, Bootstrap является одним из самых популярных фреймворков пользовательского интерфейса (UI).
Фреймворки — это набор предварительно созданного набора кода, инструментов и библиотек, которые предлагают предопределенный способ создания приложений. Bootstrap и Angular — это фреймворки.
В этой статье будет определена каждая платформа и обсуждены преимущества объединения двух технологий и способы их объединения для создания визуально привлекательных и мощных приложений.
Что такое бутстрап?
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, выполнив эту команду;
узел -v
Вы можете установить его с официального сайта, если он не установлен.
№ 2. Менеджер пакетов узлов (NPM)
NPM будет управлять всеми связанными пакетами, необходимыми для вашего приложения Angular. NPM устанавливается по умолчанию при установке Node.js. Вы можете проверить текущую версию с помощью этой команды;
нпм -в
№3. Угловой интерфейс командной строки
Это инструмент командной строки, который мы будем использовать для создания базовой структуры приложения 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 (вы можете дать своему приложению любое имя, которое вам нравится). Используйте эту команду для настройки вашего приложения;
нг новый угловой-бутстрап-макет
Вы пройдете через эти вопросы;
- Хотите добавить маршрутизацию Angular? (д/н) введите д
- Какой формат таблицы стилей вы хотели бы использовать? Выберите CSS
После завершения настройки у вас на терминале появится что-то похожее на это.
Перейдите в созданный проект и перейдите к шагу 2. Вы можете использовать эту команду;
cd angular-bootstrap-макет
Откройте проект в редакторе кода. Структура проекта будет следующей;
Шаг 2: установите бутстрап и значки бутстрапа.
Запустите эту команду, чтобы установить оба;
npm установить загрузочную загрузочную иконку начальной загрузки
Шаг 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. Запустите приложение
Используйте эту команду;
нг служить
Когда запущена разработка Angular, вы можете открыть http://localhost:4200/ в своем браузере.
Подход 2: добавьте Bootstrap в Angular, используя ссылки CDN
Этот подход позволяет напрямую подключаться к сети доставки контента (CDN), в которой хранятся файлы Bootstrap.
Используя этот подход, мы можем создать несколько кнопок в новом проекте. Следуй этим шагам;
Шаг 1: Создайте новый проект Angular
Мы назовем наше приложение angular-bootstrap-cdn. (Вы можете выбрать любое имя).
Запустите эту команду;
новый 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. Запустите приложение
нг служить
Часто задаваемые вопросы
Можно ли использовать 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.
