Jak dodać Bootstrap do Angular [Step-by-Step]

W świecie tworzenia interfejsów użytkownika, HTML, CSS i JavaScript stanowią fundament. Wśród frameworków JavaScript, Angular wyróżnia się jako popularne narzędzie do budowy aplikacji klienckich, natomiast Bootstrap jest ceniony jako framework do tworzenia responsywnych interfejsów użytkownika.

Frameworki, w uproszczeniu, to gotowe struktury kodu, narzędzi i bibliotek, które ułatwiają i przyspieszają proces tworzenia aplikacji, oferując określony sposób na ich projektowanie. Zarówno Bootstrap, jak i Angular należą do tej kategorii.

Celem tego artykułu jest zdefiniowanie obu tych platform, omówienie korzyści płynących z ich połączenia oraz przedstawienie praktycznych metod ich integracji, aby tworzyć nie tylko estetyczne, ale również wydajne aplikacje.

Czym jest Bootstrap?

Bootstrap to otwartoźródłowy zbiór narzędzi front-end, idealny do budowy aplikacji responsywnych. Ten zestaw, składający się z HTML, CSS i JavaScript, zawiera obszerną bibliotekę komponentów wielokrotnego użytku. Deweloperzy mogą korzystać z tych elementów w różnych aspektach swoich projektów.

Platforma ta dostarcza gotowe szablony dla różnorodnych funkcji, takich jak przyciski, okna modalne, karuzele, tabele i systemy nawigacji. Bootstrap cechuje się bogatą dokumentacją, która znacząco ułatwia jego wykorzystanie.

Czym jest AngularJS?

AngularJS, to framework JavaScript, który rozszerza możliwości HTML. Umożliwia on na przykład wiązanie danych, co znacznie upraszcza proces tworzenia interaktywnych stron internetowych. Dzięki temu programiści mogą unikać skomplikowanego ręcznego implementowania responsywności.

AngularJS opiera się na architekturze Model-View-Controller (MVC), w której wyraźnie oddzielona jest logika aplikacji od interfejsu użytkownika. Angulara można używać do tworzenia różnego rodzaju aplikacji, takich jak aplikacje jednostronicowe, platformy mediów społecznościowych, sklepy internetowe czy systemy zarządzania treścią.

Zalety wykorzystania Bootstrap w Angular

• Gotowe elementy interfejsu użytkownika: Zamiast tworzyć od podstaw elementy takie jak paski nawigacyjne, przyciski czy karuzele, Bootstrap dostarcza gotowe rozwiązania. Pozwala to programistom skoncentrować się na funkcjonalności, podczas gdy Bootstrap zajmuje się strukturą i stylem.
• Personalizacja: Wbudowane komponenty oferują bazowy kod, który można dostosować do potrzeb konkretnej aplikacji. Można zmieniać elementy takie jak obrazy i teksty, dostosowując je do wymagań projektu.
• Responsywność: W dobie różnorodności urządzeń, z których korzystamy, Bootstrap zapewnia responsywność aplikacji, dostosowując jej wygląd do różnych rozmiarów ekranów.
• Spójność stylów: Jednolity wygląd i styl na wszystkich stronach aplikacji to klucz do dobrego UX. Bootstrap pomaga w utrzymaniu tej spójności.
• Aktywna społeczność: Bootstrap dysponuje obszerną dokumentacją, bogatą bazą zasobów oraz wsparciem ze strony licznej społeczności programistów.

Wymagania wstępne

# 1. Node.js

Jest to środowisko uruchomieniowe JavaScript, które umożliwia wykonywanie kodu JavaScript poza przeglądarką. Aktualną wersję można sprawdzić, wpisując w konsoli:

node -v

Jeżeli Node.js nie jest zainstalowany, można go pobrać z oficjalnej strony.

#2. Menedżer pakietów węzłów (NPM)

NPM zarządza pakietami potrzebnymi do działania aplikacji Angular. Zazwyczaj NPM jest instalowany automatycznie podczas instalacji Node.js. Jego wersję można sprawdzić poleceniem:

npm -v

#3. Angular CLI

Angular CLI, to narzędzie wiersza poleceń, które pozwala stworzyć podstawową strukturę aplikacji Angular. Można je zainstalować, używając polecenia:

npm install -g @angular/cli

#4. Zintegrowane środowisko programistyczne (IDE)

IDE to program, w którym piszemy kod. Można używać dowolnego środowiska, które obsługuje JavaScript, na przykład Visual Studio Code lub Webstorm.

Jak dodać Bootstrap do Angular

Po przygotowaniu wszystkich niezbędnych narzędzi, możemy przejść do integracji Bootstrap z Angular. Istnieją dwa główne sposoby: instalacja za pomocą NPM oraz wykorzystanie linków CDN.

Podejście 1: Wykorzystanie NPM

Za pomocą NPM możemy zainstalować pełną bibliotekę Bootstrap do projektu. Oto kroki, które należy wykonać:

Krok 1: Stworzenie struktury aplikacji za pomocą Angular CLI

Aplikacja Angular składa się z wielu plików. Naszą przykładową aplikację nazwiemy „angular-bootstrap-mockup”. Polecenie, aby ją utworzyć:

ng new angular-bootstrap-mockup

Następnie pojawią się pytania:

• Czy chcesz dodać routing Angular? (y/N) – wpisz „y”
• Jakiego formatu arkuszy stylów chcesz użyć? – wybierz „CSS”

Po zakończeniu procesu, w terminalu zobaczymy podobny komunikat.

Następnie przejdź do utworzonego katalogu projektu. Można to zrobić za pomocą polecenia:

cd angular-bootstrap-mockup

Otwórz projekt w wybranym edytorze kodu. Struktura projektu będzie podobna do tej:

Krok 2: Instalacja Bootstrap i ikon Bootstrap

Aby zainstalować Bootstrap i jego ikony, użyj polecenia:

npm install bootstrap bootstrap-icons

Krok 3: Dodanie Bootstrap do pliku angular.json

Otwórz plik „angular.json” znajdujący się w głównym katalogu aplikacji i zmień w nim sekcję „styles” i „scripts”, tak aby zawierała następujące wpisy:

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

Krok 4: Instalacja ng-bootstrap

ng-bootstrap to zestaw komponentów interfejsu użytkownika dla Angular, które korzystają z frameworka Bootstrap. Użyj polecenia:

npm install @ng-bootstrap/ng-bootstrap

Krok 5: Modyfikacja pliku app.module.ts

Zmodyfikuj plik „app.module.ts”, tak aby zawierał moduł `NgbModule`:

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

Krok 6: Modyfikacja pliku 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);
  }
}

Krok 7: Dodanie elementów Bootstrap do app.component.html

Wybierz interesujące Cię komponenty Bootstrap. W naszym przykładzie dodamy prosty pasek nawigacyjny i dwa przyciski. Zmień zawartość pliku „app.component.html” na:

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

Krok 8: Uruchomienie aplikacji

Użyj polecenia:

ng serve

Po uruchomieniu serwera, aplikacja będzie dostępna pod adresem http://localhost:4200/.

Podejście 2: Dodawanie Bootstrap za pomocą linków CDN

W tym podejściu łączymy się bezpośrednio z siecią CDN, gdzie przechowywane są pliki Bootstrap.

Aby zademonstrować to podejście, stworzymy nowy projekt i dodamy do niego kilka przycisków. Wykonaj kroki:

Krok 1: Utworzenie nowego projektu Angular

Nazwijmy aplikację „angular-bootstrap-cdn”. Polecenie, aby ją utworzyć:

ng new angular-bootstrap-cdn

Po zakończeniu instalacji, przejdź do katalogu projektu. Możesz to zrobić za pomocą polecenia:

cd angular-bootstrap-cdn

Krok 2: Umieszczenie linku CDN w pliku index.html

Otwórz plik „src/index.html” i dodaj link CDN w sekcji head:

<head>
  ...
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  ...
</head>

Krok 3: Dodanie kodu Bootstrap do pliku app.component.html

Otwórz plik „src/app/app.component.html” i dodaj w nim:

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

Krok 4: Uruchomienie aplikacji

Użyj polecenia:

ng serve

Często Zadawane Pytania

Czy można używać Bootstrap i Angular Material razem w jednym projekcie?

Tak. Zarówno Bootstrap, jak i Angular Material to biblioteki interfejsu użytkownika. Nie zaleca się jednak używania obu bibliotek dla tego samego komponentu, ponieważ może to prowadzić do konfliktów. Przy wyborze komponentu (np. strona logowania) należy zdecydować się na jedną z bibliotek.

Jaka wersja Bootstrap jest kompatybilna z Angular?

W chwili pisania tego artykułu, najnowsza wersja Bootstrap to v5.3.0-alpha2, a Angular to 15. Wszystko z Bootstrap 4 powinno działać poprawnie z różnymi wersjami Angular. Zawsze warto jednak sprawdzić dokumentację na oficjalnych stronach obu technologii.

Jakie projekty można tworzyć za pomocą Bootstrap i Angular?

Nie ma ograniczeń co do typów aplikacji, które można budować przy użyciu tych dwóch technologii. Można tworzyć aplikacje jednostronicowe, sklepy internetowe, platformy społecznościowe, pulpity nawigacyjne i panele administracyjne. Angular może być także użyty z frameworkiem Ionic do budowy aplikacji mobilnych.

Czy Angular to framework JavaScript, czy TypeScript?

Angular jest frameworkiem JavaScript, ale jest napisany w TypeScript, który jest nadzbiorem JavaScript. TypeScript wprowadza nowe funkcjonalności niedostępne w czystym JavaScript. Można używać Angular zarówno w aplikacjach TypeScript, jak i JavaScript.

Podsumowanie

Teraz posiadasz wiedzę, która pozwala na efektywne wykorzystanie dwóch czołowych frameworków front-end: Angular i Bootstrap. Możesz tworzyć różnorodne aplikacje, dopasowując metody integracji do specyfiki projektu.

Wybór pomiędzy podejściem NPM a CDN zależy od konkretnego przypadku i wymagań projektu. Podejście CDN, choć prostsze, może nieść za sobą pewne ryzyko związane z bezpieczeństwem aplikacji, ponieważ hakerzy mogą wykorzystywać sieci CDN do przesyłania złośliwego kodu. Z kolei instalacja za pomocą NPM, choć może być bardziej czasochłonna, daje pełną kontrolę nad kodem.

Sprawdź także, jak dodać Bootstrap do aplikacji React.