HTML, JavaScript och CSS är bland pelarna i front-end-utveckling. Angular är ett av de mest använda JavaScript-ramverken för att bygga applikationer på klientsidan. Å andra sidan är Bootstrap bland de mest populära ramverken för användargränssnitt (UI).
Ramar är en samling av en förbyggd uppsättning kod, verktyg och bibliotek som erbjuder ett fördefinierat sätt att bygga applikationer. Bootstrap och Angular är båda ramverk.
Den här artikeln kommer att definiera varje ramverk och diskutera fördelarna med att kombinera de två teknikerna och hur man kombinerar dem för att skapa visuellt tilltalande och kraftfulla appar.
Innehållsförteckning
Vad är Bootstrap?
Bootstrap är en gratis front-end-verktygssats för att skapa mobil-först-applikationer. Detta HTML-, CSS- och JavaScript-ramverk har en stor samling återanvändbara kodbitar som utvecklare kan använda i olika delar av sina projekt.
Detta ramverk har designmallar för olika funktioner som knappar, modaler, bildkaruseller, tabeller, navigering och så mycket mer. Bootstrap har omfattande dokumentation för att göra den enkel att använda.
Vad är AngularJS?
AngularJS är ett JavaScript-ramverk som utökar HTML-syntaxen bortom ett vanligt märkningsspråk. Detta ramverk introducerar funktioner som databindning som gör att utvecklare kan undvika den komplexa processen att skapa responsiva webbsidor när de använder HTML.
AngularJS använder ramverket för modell-vy-kontroller (MVC), där det finns en tydlig separation mellan applikationens logik och användargränssnittet. Utvecklare kan använda AngularJS för att skapa ensidiga webbapplikationer, sociala nätverksapplikationer, e-handelsplattformar, innehållshanteringssystem och mer.
Fördelar med att använda Bootstrap i Angular
- Förbyggda UI-komponenter: Du behöver inte skapa navigeringsfält, knappar, karuseller och kort från början, eftersom Bootstrap har förbyggda kodbitar som du kan använda. Därmed kan utvecklare fokusera mer på funktionalitet medan Bootstrap tar hand om grundstrukturen och stylingen.
- Anpassningsbar: De förbyggda komponenterna tillhandahåller standardkod. Du kan dock anpassa koden när du är i din applikation. Om du till exempel tar ett kort från Bootstrap kan du ändra olika element, som bilder och text för att passa dina behov.
- Responsiv: Moderna webbanvändare surfar på olika enheter, från smartphones och surfplattor till datorer. Du behöver inte skapa en applikation för varje skärmstorlek, eftersom Bootstrap tillhandahåller responsiva webbapplikationer.
- Ger konsekvent stil: En bra webbapplikation bör ha en konsekvent känsla och se över olika sidor. Användningen av Bootstrap-element och komponenter kan hjälpa dig att uppnå detta mål.
- Stark gemenskap: Detta ramverk är packat med många resurser och stark dokumentation och stöds av många utvecklare.
Förutsättningar
#1. Node.js
Detta är en JavaScript-runtime-miljö som du kommer att använda för att köra JavaScript-kod utanför webbläsaren. Du kan kontrollera den aktuella versionen av din Node.js genom att köra det här kommandot;
nod -v
Du kan installera det från den officiella webbplatsen om det inte är installerat.
#2. Nod Package Manager (NPM)
NPM kommer att hantera alla associerade paket du behöver för din Angular-app. NPM installeras som standard när du installerar Node.js. Du kan kontrollera den aktuella versionen med detta kommando;
npm -v
#3. Vinkel CLI
Det är ett kommandoradsverktyg som vi kommer att använda för att skapa den grundläggande strukturen för en Angular-app. Du kan installera Angular CLI med detta kommando;
npm installera -g @angular/cli
#4. En integrerad utvecklingsmiljö (IDE)
Det är här du kommer att skriva din kod. Du kan använda vilken IDE som helst som stöder JavaScript, som Visual Studio Code eller Webstorm.
Hur man lägger till Bootstrap till Angular
Vi har nu alla verktyg som behövs för att skapa vår Angular-app. Det finns två stora tillvägagångssätt för att lägga till Bootstrap till Angular; 1. Installera Bootstrap med NPM. 2. Använda CDN-länkar
Metod 1: Använda NPM
Vi kan installera hela Bootstrap-biblioteket i vårt projekt med hjälp av NPM. Följ dessa steg;
Steg 1: Använd Angular CLI för att ställa in den grundläggande appstrukturen
En typisk Angular-app har många filer. Vi kommer att namnge vår app angular-bootstrap-mockup (du kan ge din app vilket namn som helst som behagar dig). Använd det här kommandot för att konfigurera din app;
ng ny angular-bootstrap-mockup
Du kommer att tas igenom dessa frågor;
- Vill du lägga till Angular routing? (y/N) ange y
- Vilket stilmallsformat skulle du vilja använda? Välj CSS
När installationen är över kommer du att ha något liknande detta på din terminal.
Navigera in i det skapade projektet och gå till steg 2. Du kan använda det här kommandot;
cd vinkel-bootstrap-mockup
Öppna projektet i din kodredigerare. Projektstrukturen blir följande;
Steg 2: installera bootstrap och bootstrap-ikoner.
Kör det här kommandot för att installera båda;
npm installera bootstrap bootstrap-ikoner
Steg 3: Inkludera Bootstrap i filen angular.json
Leta upp filen angular.json i rotmappen i din app och ändra dessa rader;
"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" ]
Steg 4: installera ng-bootstrap
Ng-bootstrap är en samling Angular UI-komponenter byggda ovanpå Bootstrap-ramverket. De olika komponenterna i detta bibliotek är designade för att fungera med AngularJS.
Använd detta kommando för att installera det;
npm installera @ng-bootstrap/ng-bootstrap
Steg 5: Ändra app.module.ts för att inkludera NgbModule.
Ändra innehållet i filen app.module.ts med detta;
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 {
}
Steg 5: Ändra 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);
}
}
Steg 6: Lägg till Bootstrap-element i filen app.component.html
Det finns massor av komponenter att välja mellan på Bootstraps webbplats. Vi kommer att skapa ett enkelt navigeringsfält och lägga till två knappar.
Ändra innehållet i app.component.html enligt följande;
<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>
Steg 7: Kör din app
Använd detta kommando;
ng tjäna
När Angular-utvecklingen körs kan du öppna http://localhost:4200/ i din webbläsare.
Tillvägagångssätt 2: Lägg till Bootstrap till Angular med CDN-länkar
Detta tillvägagångssätt låter dig länka direkt till Content Delivery Network (CDN) som lagrar Bootstrap-filer.
Vi kan skapa flera knappar med detta tillvägagångssätt på ett nytt projekt. Följ dessa steg;
Steg 1: Skapa ett nytt Angular-projekt
Vi kommer att namnge vår app angular-bootstrap-cdn. (Du kan välja vilket namn som helst).
Kör detta kommando;
ng ny angular-bootstrap-cdn
När installationen är över, byt katalog och öppna ditt projekt i en kodredigerare. Du kan använda detta kommando för att gå in i projektkatalogen;
cd angular-bootstrap-cdn
Steg 2: Inkludera CDN-länken i filen index.html
Leta reda på filen src/index.html och CDN-länken i rubriken.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
Steg 3: Lägg till Bootstrap-kod till filen app.component.html
Leta upp filen src/app/app.component.html.
Du kan lägga till den här koden i 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>
Steg 4: Kör din app
ng tjäna
Vanliga frågor
Kan du använda Bootstrap och Angular Material tillsammans i samma projekt?
Ja. Bootstrap och Angular Material är UI-bibliotek skapade för att tjäna samma syfte. Du bör dock inte använda båda biblioteken när du hanterar samma komponent, eftersom de sannolikt kraschar. Om du till exempel vill skapa en inloggningssida väljer du antingen baserat på tillgängliga komponenter.
Vilken version av Bootstrap är kompatibel med Angular?
Den nuvarande versionen av Bootstrap, när detta skrivs, är v5.3.0-alpha2. Å andra sidan är den nuvarande versionen av Angular Angular 15. Allt från Bootstrap 4 är kompatibelt med olika Angular-versioner. Kontrollera dock alltid dokumentationen på både Bootstrap och Angulars officiella webbplatser när du kombinerar de två teknologierna
Vilka projekt kan du bygga med Bootstrap och Angular?
Det finns ingen begränsning på vilken typ av applikationer du kan bygga med Bootstrap och Angular. Du kan använda de två för att bygga ensidiga applikationer, e-handelswebbplatser, sociala plattformar, instrumentpaneler och adminpaneler. Du kan också använda Angular med Ionic-ramverket för att skapa mobila applikationer.
Är Angular ett JavaScript- eller TypeScript-ramverk?
Angular är ett JavaScript-ramverk. Angular är dock skrivet i TypeScript, en superuppsättning av JavaScript. TypeScript introducerar nya funktioner som inte är tillgängliga i JavaScript. Du kan alltså använda Angular med både TypeScript- och Angular-appar.
Slutsats
Du kan nu bekvämt använda två av de mest populära front-end-ramverken, Angular och Bootstrap, för att skapa olika applikationer.
Valet av tillvägagångssätt beror på användningsfallet och typen av app du vill skapa.
Även om CDN-tillvägagångssättet ser enkelt ut, har det också olika nackdelar. Den stora utmaningen är säkerheten för din app, eftersom hackare kan använda CDN för att skicka skadliga skript till din webbplats.
Att installera Bootstrap med NPM ger dig kontroll över koden du inkluderar i din applikation. Detta tillvägagångssätt kan dock vara tidskrävande eftersom du måste ladda ner alla beroenden.
Kolla in hur du lägger till Bootstrap i en React-app.