HTML, JavaScript og CSS er blandt søjlerne i frontend-udvikling. Angular er en af de mest brugte JavaScript-frameworks til at bygge applikationer på klientsiden. På den anden side er Bootstrap blandt de mest populære User Interface (UI) rammer.
Rammer er en samling af et forudbygget sæt kode, værktøjer og biblioteker, der tilbyder en foruddefineret måde at bygge applikationer på. Bootstrap og Angular er begge rammer.
Denne artikel vil definere hver ramme og diskutere fordelene ved at kombinere de to teknologier, og hvordan man kombinerer dem for at skabe visuelt tiltalende og kraftfulde apps.
Indholdsfortegnelse
Hvad er Bootstrap?
Bootstrap er et gratis frontend-værktøjssæt til at skabe mobile-first-applikationer. Denne HTML-, CSS- og JavaScript-ramme har en stor samling af genanvendelige stykker kode, som udviklere kan bruge på forskellige dele af deres projekter.
Denne ramme har designskabeloner til forskellige funktioner såsom knapper, modaler, billedkarruseller, tabeller, navigationer og meget mere. Bootstrap har omfattende dokumentation for at gøre det nemt at bruge.
Hvad er AngularJS?
AngularJS er en JavaScript-ramme, der udvider HTML-syntaksen ud over et almindeligt opmærkningssprog. Denne ramme introducerer funktioner såsom databinding, der gør det muligt for udviklere at undgå den komplekse proces med at skabe responsive websider, når de bruger HTML.
AngularJS anvender model-view-controller (MVC) frameworket, hvor der er en klar adskillelse mellem applikationens logik og brugergrænsefladen. Udviklere kan bruge AngularJS til at skabe enkeltsidede webapplikationer, sociale netværksapplikationer, e-handelsplatforme, indholdsstyringssystemer og mere.
Fordele ved at bruge Bootstrap i Angular
- Forudbyggede UI-komponenter: Du behøver ikke at oprette navigationslinjer, knapper, karruseller og kort fra bunden, da Bootstrap har forudbyggede kodestykker, som du kan bruge. Dermed kan udviklere fokusere mere på funktionalitet, mens Bootstrap tager sig af den grundlæggende struktur og styling.
- Kan tilpasses: De præbyggede komponenter giver kedelkode. Du kan dog tilpasse koden, mens du er på din applikation. Hvis du for eksempel tager et kort fra Bootstrap, kan du ændre forskellige elementer, såsom billeder og tekst, så de passer til dine behov.
- Responsiv: Moderne webbrugere surfer på forskellige enheder, fra smartphones og tablets til computere. Du behøver ikke oprette en applikation for hver skærmstørrelse, da Bootstrap leverer responsive webapplikationer.
- Giver ensartet styling: En god webapplikation skal have en ensartet følelse og se ud på tværs af forskellige sider. Brugen af Bootstrap-elementer og -komponenter kan hjælpe dig med at nå dette mål.
- Stærkt fællesskab: Denne ramme er spækket med mange ressourcer og stærk dokumentation og understøttes af mange udviklere.
Forudsætninger
#1. Node.js
Dette er et JavaScript runtime-miljø, som du vil bruge til at køre JavaScript-kode uden for browseren. Du kan tjekke den aktuelle version af din Node.js ved at køre denne kommando;
node -v
Du kan installere det fra den officielle hjemmeside, hvis det ikke er installeret.
#2. Node Package Manager (NPM)
NPM vil administrere alle de tilknyttede pakker, du har brug for til din Angular-app. NPM installeres som standard, når du installerer Node.js. Du kan kontrollere den aktuelle version ved hjælp af denne kommando;
npm -v
#3. Kantet CLI
Det er et kommandolinjeværktøj, vi vil bruge til at skabe den grundlæggende struktur for en Angular-app. Du kan installere Angular CLI ved hjælp af denne kommando;
npm installer -g @angular/cli
#4. Et integreret udviklingsmiljø (IDE)
Det er her du skal skrive din kode. Du kan bruge enhver IDE, der understøtter JavaScript, såsom Visual Studio Code eller Webstorm.
Sådan tilføjer du Bootstrap til Angular
Vi har nu alle de nødvendige værktøjer til at skabe vores Angular-app. Der er to hovedtilgange til at tilføje Bootstrap til Angular; 1. Installation af Bootstrap ved hjælp af NPM. 2. Brug af CDN-links
Fremgangsmåde 1: Brug af NPM
Vi kan installere hele Bootstrap-biblioteket til vores projekt ved hjælp af NPM. Følg disse trin;
Trin 1: Brug Angular CLI til at konfigurere den grundlæggende appstruktur
En typisk Angular-app har mange filer. Vi vil navngive vores app angular-bootstrap-mockup (du kan give din app et hvilket som helst navn, der behager dig). Brug denne kommando til at konfigurere din app;
ng ny angular-bootstrap-mockup
Du vil blive ført igennem disse spørgsmål;
- Vil du tilføje Angular routing? (y/N) indtast y
- Hvilket stylesheet-format vil du gerne bruge? Vælg CSS
Når opsætningen er overstået, vil du have noget lignende dette på din terminal.
Naviger ind i det oprettede projekt og gå til trin 2. Du kan bruge denne kommando;
cd vinkel-bootstrap-mockup
Åbn projektet i din kodeeditor. Projektstrukturen vil være som følger;
Trin 2: Installer bootstrap og bootstrap-ikoner.
Kør denne kommando for at installere begge;
npm installer bootstrap bootstrap-ikoner
Trin 3: Inkluder Bootstrap på filen angular.json
Find filen angular.json i rodmappen på din app, og skift disse linjer;
"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" ]
Trin 4: Installer ng-bootstrap
Ng-bootstrap er en samling af Angular UI-komponenter bygget oven på Bootstrap-rammen. De forskellige komponenter i dette bibliotek er designet til at fungere med AngularJS.
Brug denne kommando til at installere den;
npm installer @ng-bootstrap/ng-bootstrap
Trin 5: Rediger app.module.ts for at inkludere NgbModule.
Skift indholdet af app.module.ts-filen med denne;
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 {
}
Trin 5: Rediger 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);
}
}
Trin 6: Tilføj Bootstrap-elementer til filen app.component.html
Der er tonsvis af komponenter at vælge imellem på Bootstrap-webstedet. Vi vil oprette en simpel navigeringslinje og tilføje to knapper.
Rediger indholdet af app.component.html som følger;
<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>
Trin 7: Kør din app
Brug denne kommando;
ng tjene
Når Angular-udvikling kører, kan du åbne http://localhost:4200/ på din browser.
Fremgangsmåde 2: Tilføj Bootstrap til Angular ved hjælp af CDN-links
Denne tilgang lader dig linke direkte til Content Delivery Network (CDN), der gemmer Bootstrap-filer.
Vi kan oprette flere knapper ved hjælp af denne tilgang på et nyt projekt. Følg disse trin;
Trin 1: Opret et nyt Angular-projekt
Vi vil navngive vores app angular-bootstrap-cdn. (Du kan vælge et hvilket som helst navn).
Kør denne kommando;
ng ny angular-bootstrap-cdn
Når installationen er slut, skal du skifte mappe og åbne dit projekt i en kodeeditor. Du kan bruge denne kommando til at gå ind i projektbiblioteket;
cd angular-bootstrap-cdn
Trin 2: Inkluder CDN-linket i filen index.html
Find filen src/index.html og CDN-linket i hovedafsnittet.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
Trin 3: Tilføj Bootstrap-kode til filen app.component.html
Find filen src/app/app.component.html.
Du kan tilføje denne kode til filen;
<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>
Trin 4: Kør din app
ng tjene
Ofte stillede spørgsmål
Kan du bruge Bootstrap og Angular Material sammen i det samme projekt?
Ja. Bootstrap og Angular Material er UI-biblioteker skabt til at tjene det samme formål. Du bør dog ikke bruge begge biblioteker, når du har at gøre med den samme komponent, da de sandsynligvis vil gå ned. For eksempel, hvis du vil oprette en login-side, skal du vælge enten baseret på de tilgængelige komponenter.
Hvilken version af Bootstrap er kompatibel med Angular?
Den nuværende version af Bootstrap, som dette skrives, er v5.3.0-alpha2. På den anden side er den nuværende version af Angular Angular 15. Alt fra Bootstrap 4 er kompatibelt med forskellige Angular-versioner. Tjek dog altid dokumentationen på både Bootstrap og Angular officielle hjemmesider, når du kombinerer de to teknologier
Hvilke projekter kan du bygge med Bootstrap og Angular?
Der er ingen begrænsning på arten af applikationer, du kan bygge ved hjælp af Bootstrap og Angular. Du kan bruge de to til at bygge enkeltsideapplikationer, e-handelswebsteder, sociale platforme, dashboards og adminpaneler. Du kan også bruge Angular med Ionic-rammeværket til at skabe mobile applikationer.
Er Angular en JavaScript- eller TypeScript-ramme?
Angular er en JavaScript-ramme. Dog er Angular skrevet i TypeScript, et supersæt af JavaScript. TypeScript introducerer nye funktioner, der ikke er tilgængelige i JavaScript. Du kan således bruge Angular med både TypeScript og Angular apps.
Konklusion
Du kan nu komfortabelt bruge to af de mest populære frontend-frameworks, Angular og Bootstrap, til at skabe forskellige applikationer.
Valget af tilgang vil afhænge af den use case og type app, du vil oprette.
Selvom CDN-tilgangen ser let ud, har den også forskellige ulemper. Den største udfordring er sikkerheden af din app, da hackere kan bruge CDN’er til at skubbe ondsindede scripts til dit websted.
Installation af Bootstrap ved hjælp af NPM giver dig kontrol over den kode, du inkluderer i din applikation. Denne tilgang kan dog være tidskrævende, da du skal downloade alle afhængigheder.
Se, hvordan du føjer Bootstrap til en React-app.