Как да добавите Bootstrap към Angular [Step-by-Step]

HTML, JavaScript и CSS са сред стълбовете на front-end разработката. 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 може да ви помогне да постигнете тази цел.
Силна общност: Тази рамка е пълна с много ресурси и силна документация и е подкрепена от много разработчици.

Как да архивирате и разархивирате файлове и папки на Mac

Предпоставки

#1. Node.js

Това е среда за изпълнение на JavaScript, която ще използвате за изпълнение на JavaScript код извън браузъра. Можете да проверите текущата версия на вашия Node.js, като изпълните тази команда;

възел -v

Можете да го инсталирате от официалния уебсайт, ако не е инсталиран.

#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

14 най-добри разработки на игри 14 онлайн курса, които да следвате през 2022 г

След като настройката приключи, ще имате нещо подобно на вашия терминал.

Отидете в създадения проект и преминете към стъпка 2. Можете да използвате тази команда;

cd angular-bootstrap-mockup

Отворете проекта във вашия редактор на код. Структурата на проекта ще бъде както следва;

Стъпка 2: инсталирайте bootstrap и икони на bootstrap.

Изпълнете тази команда, за да инсталирате и двете;

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 UI компоненти, изградени върху рамката на 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/ на вашия браузър.

Подход 2: Добавете Bootstrap към Angular с помощта на CDN връзки

Този подход ви позволява да се свържете директно с мрежата за доставка на съдържание (CDN), която съхранява Bootstrap файлове.

Можем да създадем няколко бутона, използвайки този подход в нов проект. Следвай тези стъпки;

Стъпка 1: Създайте нов Angular проект

Ще кръстим нашето приложение angular-bootstrap-cdn. (Можете да изберете всяко име).

Изпълнете тази команда;

ng нов angular-bootstrap-cdn

След като инсталацията приключи, променете директорията и отворете проекта си в редактор на кодове. Можете да използвате тази команда, за да влезете в директорията на проекта;

cd ъглов-бутстрап-cdn

Стъпка 2: Включете CDN връзката към файла index.html

Опитайте тези 10 безплатни софтуера за управление на задачи и проекти

Намерете файла src/index.html и CDN връзката в секцията head.

<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 са UI библиотеки, създадени да служат на същата цел. Въпреки това не трябва да използвате и двете библиотеки, когато работите с един и същи компонент, тъй като има вероятност да се сринат. Например, ако искате да създадете страница за вход, изберете едно от двете въз основа на наличните компоненти.

Коя версия на Bootstrap е съвместима с Angular?

Текущата версия на Bootstrap към момента на писане е v5.3.0-alpha2. От друга страна, текущата версия на Angular е Angular 15. Всичко от Bootstrap 4 е съвместимо с различни версии на Angular. Винаги обаче проверявайте документацията на официалните уебсайтове на Bootstrap и Angular, когато комбинирате двете технологии

Кои проекти можете да създавате с помощта на Bootstrap и Angular?

Няма ограничение за естеството на приложенията, които можете да създавате с помощта на Bootstrap и Angular. Можете да използвате двете за създаване на приложения с една страница, уебсайтове за електронна търговия, социални платформи, табла за управление и административни панели. Можете също да използвате Angular с Ionic framework за създаване на мобилни приложения.

Angular JavaScript или TypeScript рамка ли е?

Angular е JavaScript рамка. Angular обаче е написан на TypeScript, надмножество на JavaScript. TypeScript въвежда нови функционалности, които не са налични в JavaScript. По този начин можете да използвате Angular както с TypeScript, така и с Angular приложения.

Заключение

Вече можете удобно да използвате две от най-популярните предни рамки, Angular и Bootstrap, за създаване на различни приложения.

Изборът на подход ще зависи от случая на употреба и типа на приложението, което искате да създадете.

Въпреки че CDN подходът изглежда лесен, той също има различни недостатъци. Основното предизвикателство е сигурността на вашето приложение, тъй като хакерите могат да използват CDN, за да прокарат злонамерени скриптове към уебсайта ви.

Инсталирането на Bootstrap с помощта на NPM ви дава контрол върху кода, който включвате във вашето приложение. Този подход обаче може да отнеме много време, тъй като трябва да изтеглите всички зависимости.

Вижте как да добавите Bootstrap към приложение на React.