Hvordan legge til Bootstrap til Angular [Step-by-Step]

0 Shares

HTML, JavaScript og CSS er blant pilarene i frontend-utvikling. Angular er et av de mest brukte JavaScript-rammeverkene for å bygge applikasjoner på klientsiden. På den annen side er Bootstrap blant de mest populære rammeverkene for brukergrensesnitt (UI).

Rammer er en samling av et forhåndsbygd sett med kode, verktøy og biblioteker som tilbyr en forhåndsdefinert måte å bygge applikasjoner på. Bootstrap og Angular er begge rammeverk.

Denne artikkelen vil definere hvert rammeverk og diskutere fordelene ved å kombinere de to teknologiene og hvordan man kan kombinere dem for å lage visuelt tiltalende og kraftige apper.

Innholdsfortegnelse

Hva er Bootstrap?

Bootstrap er et gratis front-end-verktøysett for å lage mobile-first-applikasjoner. Dette HTML-, CSS- og JavaScript-rammeverket har en stor samling av gjenbrukbare kodebiter som utviklere kan bruke på ulike deler av prosjektene sine.

Dette rammeverket har designmaler for ulike funksjoner som knapper, modaler, bildekaruseller, tabeller, navigasjoner og mye mer. Bootstrap har omfattende dokumentasjon for å gjøre det enkelt å bruke.

Hva er AngularJS?

AngularJS er et JavaScript-rammeverk som utvider syntaksen til HTML utover et vanlig markeringsspråk. Dette rammeverket introduserer funksjoner som databinding som lar utviklere unngå den komplekse prosessen med å lage responsive nettsider når de bruker HTML.

AngularJS bruker modell-visningskontroller (MVC) rammeverket, der det er et klart skille mellom applikasjonens logikk og brukergrensesnittet. Utviklere kan bruke AngularJS til å lage enkeltsides nettapplikasjoner, sosiale nettverksapplikasjoner, e-handelsplattformer, innholdsstyringssystemer og mer.

Fordeler med å bruke Bootstrap i Angular

Forhåndsbygde UI-komponenter: Du trenger ikke lage navigasjonslinjer, knapper, karuseller og kort fra bunnen av, siden Bootstrap har forhåndsbygde kodebiter som du kan bruke. Dermed kan utviklere fokusere mer på funksjonalitet mens Bootstrap tar seg av den grunnleggende strukturen og stylingen.
Tilpassbar: De forhåndsbygde komponentene gir boilerplate-kode. Du kan imidlertid tilpasse koden mens du er på programmet. Hvis du for eksempel tar et kort fra Bootstrap, kan du endre ulike elementer, for eksempel bilder og tekst for å passe dine behov.
Responsiv: Moderne nettbrukere surfer på ulike enheter, fra smarttelefoner og nettbrett til datamaskiner. Du trenger ikke lage en applikasjon for hver skjermstørrelse, siden Bootstrap tilbyr responsive nettapplikasjoner.
Gir konsistent stil: En god nettapplikasjon bør ha et konsistent preg og se på forskjellige sider. Bruken av Bootstrap-elementer og komponenter kan hjelpe deg med å nå dette målet.
Sterkt fellesskap: Dette rammeverket er fullpakket med mange ressurser og sterk dokumentasjon og støttes av mange utviklere.

8 beste analyseverktøy for e-handel for markedsførere

Forutsetninger

#1. Node.js

Dette er et JavaScript-kjøretidsmiljø som du vil bruke til å kjøre JavaScript-kode utenfor nettleseren. Du kan sjekke gjeldende versjon av Node.js ved å kjøre denne kommandoen;

node -v

Du kan installere det fra det offisielle nettstedet hvis det ikke er installert.

#2. Node Package Manager (NPM)

NPM vil administrere alle de tilknyttede pakkene du trenger for Angular-appen din. NPM er installert som standard når du installerer Node.js. Du kan sjekke gjeldende versjon ved å bruke denne kommandoen;

npm -v

#3. Kantet CLI

Det er et kommandolinjeverktøy vi skal bruke til å lage den grunnleggende strukturen til en Angular-app. Du kan installere Angular CLI ved å bruke denne kommandoen;

npm install -g @angular/cli

#4. Et integrert utviklingsmiljø (IDE)

Det er her du skal skrive koden din. Du kan bruke hvilken som helst IDE som støtter JavaScript, for eksempel Visual Studio Code eller Webstorm.

Hvordan legge til Bootstrap til Angular

Vi har nå alle verktøyene som trengs for å lage Angular-appen vår. Det er to hovedtilnærminger for å legge Bootstrap til Angular; 1. Installere Bootstrap ved hjelp av NPM. 2. Bruke CDN-koblinger

Tilnærming 1: Bruke NPM

Vi kan installere hele Bootstrap-biblioteket til prosjektet vårt ved hjelp av NPM. Følg disse instruksjonene;

Trinn 1: Bruk Angular CLI til å sette opp den grunnleggende appstrukturen

En typisk Angular-app har mange filer. Vi vil navngi appen vår angular-bootstrap-mockup (du kan gi appen din et hvilket som helst navn som behager deg). Bruk denne kommandoen til å sette opp appen din;

ng ny angular-bootstrap-mockup

Du vil bli tatt gjennom disse spørsmålene;

Vil du legge til Angular routing? (y/N) skriv inn y
Hvilket stilarkformat vil du bruke? Velg CSS

Slik sjekker du databruk på iPhone

Når oppsettet er over, vil du ha noe lignende på terminalen din.

Naviger inn i det opprettede prosjektet og gå til trinn 2. Du kan bruke denne kommandoen;

cd angular-bootstrap-mockup

Åpne prosjektet i koderedigeringsprogrammet. Prosjektstrukturen vil være som følger;

Trinn 2: installer bootstrap og bootstrap-ikoner.

Kjør denne kommandoen for å installere begge;

npm installer bootstrap bootstrap-ikoner

Trinn 3: Inkluder Bootstrap på filen angular.json

Finn filen angular.json i rotmappen til appen din og endre disse linjene;

"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"

]

Trinn 4: installer ng-bootstrap

Ng-bootstrap er en samling av Angular UI-komponenter bygget på toppen av Bootstrap-rammeverket. De forskjellige komponentene i dette biblioteket er designet for å fungere med AngularJS.

Bruk denne kommandoen til å installere den;

npm installer @ng-bootstrap/ng-bootstrap

Trinn 5: Endre app.module.ts for å inkludere NgbModule.

Endre innholdet i 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 {

}

Trinn 5: Endre 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);

  }

}

Trinn 6: Legg til Bootstrap-elementer i app.component.html-filen

Det er tonnevis av komponenter å velge mellom på Bootstrap-nettstedet. Vi vil lage en enkel navigasjonslinje og legge til to knapper.

Endre innholdet i 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>

Trinn 7: Kjør appen din

Bruk denne kommandoen;

ng tjene

Når Angular-utvikling kjører, kan du åpne http://localhost:4200/ i nettleseren din.

Tilnærming 2: Legg til Bootstrap til Angular ved hjelp av CDN-koblinger

Denne tilnærmingen lar deg koble direkte til Content Delivery Network (CDN) som lagrer Bootstrap-filer.

Vi kan lage flere knapper ved å bruke denne tilnærmingen på et nytt prosjekt. Følg disse instruksjonene;

Trinn 1: Lag et nytt Angular-prosjekt

Vi vil navngi appen vår angular-bootstrap-cdn. (Du kan velge hvilket som helst navn).

Kjør denne kommandoen;

ng ny angular-bootstrap-cdn

Når installasjonen er over, bytt katalog og åpne prosjektet i et koderedigeringsprogram. Du kan bruke denne kommandoen til å gå inn i prosjektkatalogen;

Sorteringsalgoritmer-implementeringer i Python

cd angular-bootstrap-cdn

Trinn 2: Inkluder CDN-koblingen i index.html-filen

Finn src/index.html-filen og CDN-koblingen i head-delen.

<head>

…….

  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

………

</head>

Trinn 3: Legg til Bootstrap-kode i app.component.html-filen

Finn filen src/app/app.component.html.

Du kan legge til denne 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>

Trinn 4: Kjør appen din

ng tjene

ofte stilte spørsmål

Kan du bruke Bootstrap og Angular Material sammen i samme prosjekt?

Ja. Bootstrap og Angular Material er UI-biblioteker laget for å tjene samme formål. Du bør imidlertid ikke bruke begge bibliotekene når du arbeider med den samme komponenten, da de sannsynligvis krasjer. Hvis du for eksempel vil opprette en påloggingsside, velger du enten basert på de tilgjengelige komponentene.

Hvilken versjon av Bootstrap er kompatibel med Angular?

Den nåværende versjonen av Bootstrap, når dette skrives, er v5.3.0-alpha2. På den annen side er den nåværende versjonen av Angular Angular 15. Alt fra Bootstrap 4 er kompatibelt med ulike Angular-versjoner. Sjekk imidlertid alltid dokumentasjonen på både Bootstrap og Angular offisielle nettsteder når du kombinerer de to teknologiene

Hvilke prosjekter kan du bygge med Bootstrap og Angular?

Det er ingen begrensning på typen applikasjoner du kan bygge med Bootstrap og Angular. Du kan bruke de to til å bygge enkeltsideapplikasjoner, e-handelsnettsteder, sosiale plattformer, dashbord og adminpaneler. Du kan også bruke Angular med Ionic-rammeverket for å lage mobilapplikasjoner.

Er Angular et JavaScript- eller TypeScript-rammeverk?

Angular er et JavaScript-rammeverk. Imidlertid er Angular skrevet i TypeScript, et supersett av JavaScript. TypeScript introduserer nye funksjoner som ikke er tilgjengelige i JavaScript. Du kan dermed bruke Angular med både TypeScript- og Angular-apper.

Konklusjon

Du kan nå komfortabelt bruke to av de mest populære frontend-rammeverkene, Angular og Bootstrap, for å lage ulike applikasjoner.

Valget av tilnærming vil avhenge av brukstilfellet og typen app du vil lage.

Selv om CDN-tilnærmingen ser enkel ut, har den også forskjellige ulemper. Den største utfordringen er sikkerheten til appen din, ettersom hackere kan bruke CDN-er til å sende ondsinnede skript til nettstedet ditt.

Å installere Bootstrap ved hjelp av NPM gir deg kontroll over koden du inkluderer i applikasjonen din. Imidlertid kan denne tilnærmingen være tidkrevende siden du må laste ned alle avhengighetene.

Sjekk ut hvordan du legger til Bootstrap i en React-app.