ХТМЛ, ЈаваСцрипт и ЦСС су међу стубовима фронт-енд развоја. Ангулар је један од најчешће коришћених ЈаваСцрипт оквира за прављење апликација на страни клијента. С друге стране, Боотстрап је међу најпопуларнијим оквирима корисничког интерфејса (УИ).
Оквири су колекција унапред изграђеног скупа кода, алата и библиотека које нуде унапред дефинисан начин за прављење апликација. Боотстрап и Ангулар су оба оквира.
Овај чланак ће дефинисати сваки оквир и расправљати о предностима комбиновања две технологије и како их комбиновати да бисте креирали визуелно привлачне и моћне апликације.
Преглед садржаја
Шта је Боотстрап?
Боотстрап је бесплатни фронт-енд алат за креирање апликација за мобилне уређаје. Овај ХТМЛ, ЦСС и ЈаваСцрипт оквир има велику колекцију делова кода за вишекратну употребу које програмери могу да користе у различитим деловима својих пројеката.
Овај оквир има шаблоне дизајна за различите функције као што су дугмад, модали, вртешке са сликама, табеле, навигације и још много тога. Боотстрап има обимну документацију која олакшава коришћење.
Шта је АнгуларЈС?
АнгуларЈС је ЈаваСцрипт оквир који проширује синтаксу ХТМЛ-а изван уобичајеног језика за означавање. Овај оквир уводи функције као што је везивање података које омогућавају програмерима да избегну сложен процес креирања веб страница које реагују када користе ХТМЛ.
АнгуларЈС користи оквир модел-виев-цонтроллер (МВЦ), где постоји јасно раздвајање између логике апликације и корисничког интерфејса. Програмери могу да користе АнгуларЈС за креирање веб апликација на једној страници, апликација за друштвене мреже, платформи за е-трговину, система за управљање садржајем и још много тога.
Предности коришћења Боотстрапа у Ангулар-у
- Унапред изграђене компоненте корисничког интерфејса: Не морате да креирате навигационе траке, дугмад, вртешке и картице од нуле, пошто Боотстрап има унапред направљене делове кода које можете да користите. Дакле, програмери се могу више фокусирати на функционалност док се Боотстрап брине о основној структури и стилу.
- Прилагодљиво: Унапред изграђене компоненте дају основни код. Међутим, можете прилагодити код док сте у апликацији. На пример, ако узмете картицу из Боотстрапа, можете променити различите елементе, као што су слике и текст, како би одговарали вашим потребама.
- Одговарајући: Савремени корисници веба претражују на различитим уређајима, од паметних телефона и таблета до рачунара. Не морате да креирате апликацију за сваку величину екрана, пошто Боотстрап пружа веб апликације које реагују.
- Доноси доследан стил: Добра веб апликација треба да има доследан осећај и изглед на различитим страницама. Употреба Боотстрап елемената и компоненти може вам помоћи да постигнете овај циљ.
- Јака заједница: Овај оквир је препун много ресурса и јаке документације и подржан је од стране многих програмера.
Предуслови
#1. Ноде.јс
Ово је окружење за извршавање ЈаваСцрипт-а које ћете користити за покретање ЈаваСцрипт кода ван претраживача. Можете проверити тренутну верзију вашег Ноде.јс-а тако што ћете покренути ову команду;
чвор -в
Можете га инсталирати са званичне веб странице ако није инсталиран.
#2. Ноде Пацкаге Манагер (НПМ)
НПМ ће управљати свим повезаним пакетима који су вам потребни за вашу Ангулар апликацију. НПМ се подразумевано инсталира када инсталирате Ноде.јс. Можете проверити тренутну верзију користећи ову команду;
нпм -в
#3. Ангулар ЦЛИ
То је алат командне линије који ћемо користити за креирање основне структуре Ангулар апликације. Можете инсталирати Ангулар ЦЛИ користећи ову команду;
нпм инсталл -г @ангулар/цли
#4. Интегрисано развојно окружење (ИДЕ)
Овде ћете писати свој код. Можете користити било који ИДЕ који подржава ЈаваСцрипт, као што је Висуал Студио Цоде или Вебсторм.
Како додати Боотстрап у Ангулар
Сада имамо све алате потребне за креирање наше Ангулар апликације. Постоје два главна приступа за додавање Боотстрапа у Ангулар; 1. Инсталирање Боотстрап-а користећи НПМ. 2. Коришћење ЦДН веза
Приступ 1: Коришћење НПМ-а
Можемо да инсталирамо целу Боотстрап библиотеку у наш пројекат користећи НПМ. Пратите ове кораке;
Корак 1: Користите Ангулар ЦЛИ да подесите основну структуру апликације
Типична Ангулар апликација има много датотека. Нашој апликацији даћемо име ангулар-боотстрап-моцкуп (можете својој апликацији дати било које име које вам одговара). Користите ову команду да бисте подесили своју апликацију;
нови ангулар-боотстрап-моцкуп
Бићете спроведени кроз ова питања;
- Да ли желите да додате Ангулар рутирање? (и/Н) унесите и
- Који формат листе стилова бисте желели да користите? Изаберите ЦСС
Када се подешавање заврши, имаћете нешто слично овоме на свом терминалу.
Идите у креирани пројекат и пређите на корак 2. Можете користити ову команду;
цд ангулар-боотстрап-моцкуп
Отворите пројекат у уређивачу кода. Структура пројекта ће бити следећа;
Корак 2: инсталирајте боотстрап и иконе за покретање.
Покрените ову наредбу да бисте инсталирали оба;
нпм инсталл боотстрап боотстрап-ицонс
Корак 3: Укључите Боотстрап у датотеку ангулар.јсон
Пронађите датотеку ангулар.јсон у основном директоријуму ваше апликације и промените ове редове;
"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: инсталирајте нг-боотстрап
Нг-боотстрап је колекција Ангулар УИ компоненти изграђених на врху Боотстрап оквира. Различите компоненте у овој библиотеци су дизајниране да раде са АнгуларЈС.
Користите ову команду да је инсталирате;
нпм инсталл @нг-боотстрап/нг-боотстрап
Корак 5: Измените апп.модуле.тс да бисте укључили НгбМодуле.
Промените садржај датотеке апп.модуле.тс овим;
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: Измените апп.цомпонент.тс
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: Додајте Боотстрап елементе у апп.цомпонент.хтмл датотеку
Постоји много компоненти које можете изабрати на веб локацији Боотстрап. Направићемо једноставну навигациону траку и додати два дугмета.
Промените садржај апп.цомпонент.хтмл на следећи начин;
<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: Покрените своју апликацију
Користите ову команду;
нг служе
Када се Ангулар развој покрене, можете отворити хттп://лоцалхост:4200/ у свом претраживачу.
Приступ 2: Додајте Боотстрап у Ангулар користећи ЦДН везе
Овај приступ вам омогућава да се директно повежете са мрежом за испоруку садржаја (ЦДН) која чува Боотстрап датотеке.
Можемо креирати неколико дугмади користећи овај приступ на новом пројекту. Пратите ове кораке;
Корак 1: Креирајте нови Ангулар пројекат
Нашу апликацију ћемо назвати ангулар-боотстрап-цдн. (Можете одабрати било које име).
Покрените ову команду;
нови ангулар-боотстрап-цдн
Када се инсталација заврши, промените директоријум и отворите свој пројекат у уређивачу кода. Ову команду можете користити за улазак у директоријум пројекта;
цд ангулар-боотстрап-цдн
Корак 2: Укључите ЦДН везу у датотеку индек.хтмл
Пронађите датотеку срц/индек.хтмл и ЦДН везу у одељку заглавља.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
Корак 3: Додајте Боотстрап код у датотеку апп.цомпонент.хтмл
Пронађите датотеку срц/апп/апп.цомпонент.хтмл.
Можете додати овај код у датотеку;
<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: Покрените своју апликацију
нг служе
Често постављана питања
Можете ли користити Боотстрап и Ангулар Материал заједно у истом пројекту?
Да. Боотстрап и Ангулар Материал су УИ библиотеке креиране да служе истој сврси. Међутим, не би требало да користите обе библиотеке када радите са истом компонентом, јер је вероватно да ће се срушити. На пример, ако желите да креирате страницу за пријаву, изаберите било коју на основу доступних компоненти.
Која верзија Боотстрапа је компатибилна са Ангулар-ом?
Тренутна верзија Боотстрапа, у тренутку писања овог текста, је в5.3.0-алпха2. С друге стране, тренутна верзија Ангулар-а је Ангулар 15. Све из Боотстрап-а 4 је компатибилно са различитим Ангулар верзијама. Међутим, увек проверите документацију на званичним веб локацијама Боотстрап и Ангулар када комбинујете ове две технологије
Које пројекте можете да направите користећи Боотстрап и Ангулар?
Не постоји ограничење у погледу природе апликација које можете да направите користећи Боотстрап и Ангулар. Можете користити ова два за прављење апликација на једној страници, веб локација за е-трговину, друштвених платформи, контролних табли и административних панела. Такође можете користити Ангулар са јонским оквиром за креирање мобилних апликација.
Да ли је Ангулар ЈаваСцрипт или ТипеСцрипт оквир?
Ангулар је ЈаваСцрипт оквир. Међутим, Ангулар је написан у ТипеСцрипт-у, надскупу ЈаваСцрипт-а. ТипеСцрипт уводи нове функционалности које нису доступне у ЈаваСцрипт-у. Тако можете користити Ангулар са апликацијама ТипеСцрипт и Ангулар.
Закључак
Сада можете удобно да користите два најпопуларнија фронт-енд оквира, Ангулар и Боотстрап, за креирање различитих апликација.
Избор приступа зависиће од случаја употребе и типа апликације коју желите да креирате.
Иако ЦДН приступ изгледа лако, он такође има разне недостатке. Највећи изазов је безбедност ваше апликације, јер хакери могу да користе ЦДН-ове да гурну злонамерне скрипте на вашу веб локацију.
Инсталирање Боотстрапа помоћу НПМ-а даје вам контролу над кодом који укључите у своју апликацију. Међутим, овај приступ може бити дуготрајан јер морате да преузмете све зависности.
Погледајте како да додате Боотстрап у Реацт апликацију.