So fügen Sie Bootstrap zu Angular hinzu [Schritt für Schritt]

HTML, JavaScript und CSS gehören zu den Säulen der Frontend-Entwicklung. Angular ist eines der am häufigsten verwendeten JavaScript-Frameworks zum Erstellen clientseitiger Anwendungen. Auf der anderen Seite gehört Bootstrap zu den beliebtesten Frameworks für Benutzeroberflächen (UI). 

Frameworks sind eine Sammlung eines vorgefertigten Satzes von Code, Tools und Bibliotheken, die eine vordefinierte Möglichkeit zum Erstellen von Anwendungen bieten. Bootstrap und Angular sind beides Frameworks. 

In diesem Artikel werden die einzelnen Frameworks definiert und die Vorteile der Kombination der beiden Technologien erörtert und erläutert, wie sie kombiniert werden können, um visuell ansprechende und leistungsstarke Apps zu erstellen. 

What is Bootstrap?

Bootstrap ist ein kostenloses Front-End-Toolkit zum Erstellen von Mobile-First-Anwendungen. Dieses HTML, CSS und JavaScript-Framework hat eine große Sammlung wiederverwendbarer Codeteile, die Entwickler in verschiedenen Teilen ihrer Projekte verwenden können. 

Dieses Framework verfügt über Designvorlagen für verschiedene Funktionen wie Schaltflächen, Modale, Bildkarussells, Tabellen, Navigationen und vieles mehr. Bootstrap verfügt über eine umfangreiche Dokumentation, um die Verwendung zu vereinfachen. 

What is AngularJS?

AngularJS ist ein JavaScript-Framework, das die HTML-Syntax über eine normale Auszeichnungssprache hinaus erweitert. Dieses Framework führt Funktionen wie die Datenbindung ein, die es Entwicklern ermöglichen, den komplexen Prozess der Erstellung responsiver Webseiten bei der Verwendung von HTML zu vermeiden. 

AngularJS verwendet das Model-View-Controller (MVC)-Framework, bei dem eine klare Trennung zwischen der Anwendungslogik und der Benutzeroberfläche besteht. Entwickler können AngularJS zum Erstellen verwenden Single-Page-Webanwendungen, Anwendungen für soziale Netzwerke, E-Commerce-Plattformen, Content-Management-Systeme und mehr. 

Benefits of using Bootstrap in Angular

• Vorgefertigte UI-Komponenten: Sie müssen Navigationsleisten, Schaltflächen, Karussells und Karten nicht von Grund auf neu erstellen, da Bootstrap über vorgefertigte Codeteile verfügt, die Sie verwenden können. So können sich Entwickler mehr auf die Funktionalität konzentrieren, während sich Bootstrap um die Grundstruktur und das Styling kümmert.
• Anpassbar: Die vorgefertigten Komponenten bieten Boilerplate-Code. Sie können den Code jedoch in Ihrer Anwendung anpassen. Wenn Sie beispielsweise eine Karte von Bootstrap nehmen, können Sie verschiedene Elemente wie Bilder und Text nach Ihren Wünschen ändern. 
• Reaktionsschnell: Moderne Webbenutzer surfen auf verschiedenen Geräten, von Smartphones und Tablets bis hin zu Computern. Sie müssen nicht für jede Bildschirmgröße eine Anwendung erstellen, da Bootstrap responsive Webanwendungen bereitstellt. 
• Bringt konsistentes Styling: Eine gute Webanwendung sollte sich auf verschiedenen Seiten einheitlich anfühlen und aussehen. Die Verwendung von Bootstrap-Elementen und -Komponenten kann Ihnen dabei helfen, dieses Ziel zu erreichen.
• Starke Gemeinschaft: Dieses Framework ist vollgepackt mit vielen Ressourcen und einer starken Dokumentation und wird von vielen Entwicklern unterstützt. 

Prerequisites

# 1. Node.js

Dies ist eine JavaScript-Laufzeitumgebung, die Sie verwenden, um JavaScript-Code außerhalb des Browsers auszuführen. Sie können die aktuelle Version Ihrer Node.js überprüfen, indem Sie diesen Befehl ausführen;

node -v

Sie können es von installieren offizielle Website wenn es nicht installiert ist. 

# 2. Knotenpaket-Manager (NPM)

NPM verwaltet alle zugehörigen Pakete, die Sie für Ihre Angular-App benötigen. NPM wird standardmäßig installiert, wenn Sie Node.js installieren. Sie können die aktuelle Version mit diesem Befehl überprüfen;

npm -v

# 3. Winkel-CLI

Es ist ein Befehlszeilentool, mit dem wir die Grundstruktur einer Angular-App erstellen werden. Du kannst Installieren Sie die Angular-CLI mit diesem Befehl;

npm install -g @angular/cli

# 4. Eine integrierte Entwicklungsumgebung (IDE)

Hier werden Sie Ihren Code schreiben. Sie können jede IDE verwenden, die JavaScript unterstützt, wie z Visual Studio-Code or Netzsturm. 

How to add Bootstrap to Angular 

Wir haben jetzt alle Tools, die zum Erstellen unserer Angular-App erforderlich sind. Es gibt zwei Hauptansätze, um Bootstrap zu Angular hinzuzufügen; 1. Installieren von Bootstrap mit NPM. 2. Verwendung von CDN-Links

Annäherung an 1: Verwenden von NPM

Wir können die gesamte Bootstrap-Bibliothek mit NPM in unserem Projekt installieren. Folge diesen Schritten;

Schritt 1: Verwenden Sie Winkel-CLI um die grundlegende App-Struktur einzurichten

Eine typische Angular-App hat viele Dateien. Wir werden unsere App benennen angular-bootstrap-mockup (Sie können Ihrer App einen beliebigen Namen geben, der Ihnen gefällt). Verwenden Sie diesen Befehl, um Ihre App einzurichten;

ng new angular-bootstrap-mockup

Sie werden durch diese Fragen geführt;

• Möchten Sie Angular-Routing hinzufügen? (j/n) j eingeben
• Welches Stylesheet-Format möchten Sie verwenden? Wählen Sie CSS aus

Sobald die Einrichtung abgeschlossen ist, haben Sie etwas Ähnliches auf Ihrem Terminal.

Navigieren Sie in das erstellte Projekt und fahren Sie mit Schritt 2 fort. Sie können diesen Befehl verwenden;

cd angular-bootstrap-mockup

Öffnen Sie das Projekt in Ihrem Code-Editor. Die Projektstruktur wird wie folgt sein;

Schritt 2: installieren bootstrap funktioniert Bootstrap-Symbole. 

Führen Sie diesen Befehl aus, um beide zu installieren;

npm install bootstrap bootstrap-icons

Schritt 3: Binden Sie Bootstrap ein angle.json Datei

Suchen Sie den angular.json Datei im Stammordner Ihrer App und ändern Sie diese Zeilen;

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

]

Schritt 4: installieren ng-bootstrap

Ng-bootstrap ist eine Sammlung von Angular-UI-Komponenten, die auf dem Bootstrap-Framework aufbauen. Die verschiedenen Komponenten in dieser Bibliothek sind so konzipiert, dass sie mit AngularJS funktionieren. 

Verwenden Sie diesen Befehl, um es zu installieren;

npm install @ng-bootstrap/ng-bootstrap

Schritt 5: Ändern app.module.ts zu schließen NgbModul.

Ändern Sie den Inhalt der app.module.ts Datei mit diesem;

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 {

}

Schritt 5: Ändern app.komponente.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);

  }

}

Schritt 6: Bootstrap-Elemente zu hinzufügen app.component.html Datei

Es gibt Tonnen von Komponenten auf der Bootstrap-Website auswählen. Wir erstellen eine einfache Navigationsleiste und fügen zwei Schaltflächen hinzu. 

Ändern Sie den Inhalt von app.component.html wie folgt;

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

Schritt 7: Führen Sie Ihre App aus

Verwenden Sie diesen Befehl;

ng serve

Wenn die Angular-Entwicklung ausgeführt wird, können Sie http://localhost:4200/ in Ihrem Browser öffnen.

Annäherung an 2: Fügen Sie Bootstrap mithilfe von CDN-Links zu Angular hinzu

Mit diesem Ansatz können Sie direkt verlinken Content Delivery Network (CDN), das Bootstrap-Dateien speichert.

Mit diesem Ansatz können wir in einem neuen Projekt mehrere Schaltflächen erstellen. Folge diesen Schritten;

Schritt 1: Erstellen Sie ein neues Angular-Projekt

Wir werden unsere App benennen angular-bootstrap-cdn. (Sie können einen beliebigen Namen auswählen).

Führen Sie diesen Befehl aus;

ng new angular-bootstrap-cdn

Wechseln Sie nach Abschluss der Installation in das Verzeichnis und öffnen Sie Ihr Projekt in einem Code-Editor. Mit diesem Befehl können Sie das Projektverzeichnis eingeben;

cd angular-bootstrap-cdn

Schritt 2: Fügen Sie den CDN-Link in die Datei index.html ein

Suchen Sie den src/index.html Datei und CDN-Link im Head-Bereich. 

<head>

…….

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

………

</head>

Schritt 3: Fügen Sie Bootstrap-Code zu der hinzu app.komponente.html Datei

Suchen Sie den src/app/app.component.html Datei. 

Sie können diesen Code der Datei hinzufügen;

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

Schritt 4: Führen Sie Ihre App aus

ng serve

Frequently Asked Questions

Fazit

Sie können jetzt bequem zwei der beliebtesten Frontend-Frameworks, Angular und Bootstrap, verwenden, um verschiedene Anwendungen zu erstellen. 

Die Wahl des Ansatzes hängt vom Anwendungsfall und der Art der App ab, die Sie erstellen möchten.

Obwohl der CDN-Ansatz einfach aussieht, hat er auch verschiedene Nachteile. Die größte Herausforderung ist die Sicherheit Ihrer App, da Hacker CDNs verwenden können, um bösartige Skripte auf Ihre Website zu schieben. 

Durch die Installation von Bootstrap mit NPM haben Sie die Kontrolle über den Code, den Sie in Ihre Anwendung einfügen. Dieser Ansatz kann jedoch zeitaufwändig sein, da Sie alle Abhängigkeiten herunterladen müssen. 

Zur kasse wie man Bootstrap zu einer React-App hinzufügt.