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

HTML, JavaScript i CSS to jedne z filarów rozwoju front-endu. Angular to jeden z najczęściej używanych frameworków JavaScript do tworzenia aplikacji po stronie klienta. Z drugiej strony Bootstrap jest jednym z najpopularniejszych frameworków interfejsu użytkownika (UI).

Frameworki to zbiór gotowych zestawów kodu, narzędzi i bibliotek, które oferują predefiniowany sposób tworzenia aplikacji. Bootstrap i Angular to oba frameworki.

W tym artykule zdefiniujemy każdą platformę i omówimy zalety łączenia tych dwóch technologii oraz sposoby łączenia ich w celu tworzenia atrakcyjnych wizualnie i wydajnych aplikacji.

Co to jest Bootstrap?

Bootstrap to darmowy zestaw narzędzi front-end do tworzenia aplikacji mobilnych. Ta struktura HTML, CSS i JavaScript zawiera dużą kolekcję fragmentów kodu wielokrotnego użytku, których programiści mogą używać w różnych częściach swoich projektów.

Ta platforma zawiera szablony projektów dla różnych funkcji, takich jak przyciski, modały, karuzele obrazków, tabele, nawigacje i wiele więcej. Bootstrap ma obszerną dokumentację, która ułatwia korzystanie z niego.

Co to jest AngularJS?

AngularJS to framework JavaScript, który rozszerza składnię HTML poza zwykły język znaczników. Ta struktura wprowadza funkcje, takie jak wiązanie danych, które pozwalają programistom uniknąć złożonego procesu tworzenia responsywnych stron internetowych podczas korzystania z HTML.

AngularJS wykorzystuje platformę model-view-controller (MVC), w której istnieje wyraźny rozdział między logiką aplikacji a interfejsem użytkownika. Programiści mogą używać AngularJS do tworzenia jednostronicowych aplikacji internetowych, aplikacji sieci społecznościowych, platform handlu elektronicznego, systemów zarządzania treścią i nie tylko.

Korzyści z używania Bootstrap w Angular

  • Gotowe komponenty interfejsu użytkownika: Nie musisz tworzyć od podstaw pasków nawigacyjnych, przycisków, karuzel i kart, ponieważ Bootstrap ma gotowe fragmenty kodu, których możesz użyć. W ten sposób programiści mogą bardziej skupić się na funkcjonalności, podczas gdy Bootstrap zajmuje się podstawową strukturą i stylem.
  • Możliwość dostosowania: wstępnie zbudowane komponenty zapewniają kod wzorcowy. Możesz jednak dostosować kod w swojej aplikacji. Na przykład, jeśli weźmiesz kartę z Bootstrap, możesz zmienić różne elementy, takie jak obrazy i tekst, aby dostosować je do swoich potrzeb.
  • Responsywność: Współcześni użytkownicy sieci przeglądają ją na różnych urządzeniach, od smartfonów i tabletów po komputery. Nie musisz tworzyć aplikacji dla każdego rozmiaru ekranu, ponieważ Bootstrap zapewnia responsywne aplikacje internetowe.
  • Zapewnia spójny styl: dobra aplikacja internetowa powinna mieć spójny styl i wygląd na różnych stronach. Wykorzystanie elementów i komponentów Bootstrap może pomóc w osiągnięciu tego celu.
  • Silna społeczność: ten framework jest pełen wielu zasobów i solidnej dokumentacji oraz jest wspierany przez wielu programistów.

Wymagania wstępne

# 1. Node.js

Jest to środowisko uruchomieniowe JavaScript, którego będziesz używać do uruchamiania kodu JavaScript poza przeglądarką. Możesz sprawdzić aktualną wersję swojego Node.js, uruchamiając to polecenie;

węzeł -v

Możesz zainstalować go z oficjalnej strony internetowej, jeśli nie jest zainstalowany.

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

NPM będzie zarządzać wszystkimi powiązanymi pakietami, których potrzebujesz dla swojej aplikacji Angular. NPM jest instalowany domyślnie podczas instalacji Node.js. Możesz sprawdzić aktualną wersję za pomocą tego polecenia;

npm -v

#3. Kątowy interfejs wiersza polecenia

Jest to narzędzie wiersza poleceń, którego użyjemy do stworzenia podstawowej struktury aplikacji Angular. Możesz zainstalować Angular CLI za pomocą tego polecenia;

npm install -g @angular/cli

#4. Zintegrowane środowisko programistyczne (IDE)

Tutaj będziesz pisać swój kod. Możesz użyć dowolnego środowiska IDE obsługującego JavaScript, takiego jak Visual Studio Code lub Webstorm.

Jak dodać Bootstrap do Angular

Mamy teraz wszystkie narzędzia potrzebne do stworzenia naszej aplikacji Angular. Istnieją dwa główne podejścia do dodawania Bootstrap do Angular; 1. Instalacja Bootstrapa przy użyciu NPM. 2. Korzystanie z linków CDN

Podejście 1: Korzystanie z NPM

Możemy zainstalować całą bibliotekę Bootstrap do naszego projektu za pomocą NPM. Wykonaj następujące kroki;

Krok 1: Użyj Angular CLI, aby skonfigurować podstawową strukturę aplikacji

Typowa aplikacja Angular ma wiele plików. Nazwiemy naszą aplikację angular-bootstrap-mockup (możesz nadać swojej aplikacji dowolną nazwę, która Ci się podoba). Użyj tego polecenia, aby skonfigurować swoją aplikację;

Nowa makieta angular-bootstrap

Zostaniesz przeprowadzony przez te pytania;

  • Czy chcesz dodać routing Angular? (t/N) wprowadź y
  • Jakiego formatu arkusza stylów chcesz użyć? Wybierz CSS

Po zakończeniu konfiguracji będziesz mieć coś podobnego do tego na swoim terminalu.

Przejdź do utworzonego projektu i przejdź do kroku 2. Możesz użyć tego polecenia;

cd angular-bootstrap-makieta

Otwórz projekt w swoim edytorze kodu. Struktura projektu będzie następująca;

Krok 2: zainstaluj ikony bootstrap i bootstrap.

Uruchom to polecenie, aby zainstalować oba;

npm zainstaluj ikony bootstrap bootstrap

Krok 3: Dołącz Bootstrap do pliku angular.json

Znajdź plik angular.json w folderze głównym swojej aplikacji i zmień te linie;

"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: zainstaluj ng-bootstrap

Ng-bootstrap to zbiór komponentów Angular UI zbudowanych na frameworku Bootstrap. Różne komponenty w tej bibliotece są zaprojektowane do pracy z AngularJS.

Użyj tego polecenia, aby go zainstalować;

npm install @ng-bootstrap/ng-bootstrap

Krok 5: Zmodyfikuj plik app.module.ts, aby zawierał moduł NgbModule.

Zmień zawartość pliku app.module.ts za pomocą tego;

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 5: Zmodyfikuj plik 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 6: Dodaj elementy Bootstrap do pliku app.component.html

Istnieje mnóstwo komponentów do wyboru na stronie Bootstrap. Stworzymy prosty navbar i dodamy dwa przyciski.

Zmień zawartość app.component.html w następujący sposób;

<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 7: Uruchom swoją aplikację

Użyj tego polecenia;

służyć

Po uruchomieniu programowania Angular możesz otworzyć http://localhost:4200/ w swojej przeglądarce.

Takie podejście umożliwia bezpośrednie połączenie z siecią dostarczania treści (CDN), która przechowuje pliki Bootstrap.

Korzystając z tego podejścia, możemy utworzyć kilka przycisków w nowym projekcie. Wykonaj następujące kroki;

Krok 1: Utwórz nowy projekt Angular

Nazwiemy naszą aplikację angular-bootstrap-cdn. (Możesz wybrać dowolne imię).

Uruchom to polecenie;

nowy angular-bootstrap-cdn

Po zakończeniu instalacji zmień katalog i otwórz swój projekt w edytorze kodu. Możesz użyć tego polecenia, aby wejść do katalogu projektu;

cd angular-bootstrap-cdn

Krok 2: Umieść łącze CDN w pliku index.html

Znajdź plik src/index.html i łącze CDN w sekcji head.

<head>

…….

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

………

</head>

Krok 3: Dodaj kod Bootstrap do pliku app.component.html

Znajdź plik src/app/app.component.html.

Możesz dodać ten kod do pliku;

<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: Uruchom swoją aplikację

służyć

Często Zadawane Pytania

Czy możesz używać Bootstrap i Angular Material razem w tym samym projekcie?

Tak. Bootstrap i Angular Material to biblioteki interfejsu użytkownika stworzone w tym samym celu. Jednak nie powinieneś używać obu bibliotek, gdy masz do czynienia z tym samym komponentem, ponieważ mogą one ulec awarii. Na przykład, jeśli chcesz utworzyć stronę logowania, wybierz jedną z dostępnych komponentów.

Jaka wersja Bootstrap jest kompatybilna z Angular?

Obecna wersja Bootstrap, w chwili pisania tego tekstu, to v5.3.0-alpha2. Z drugiej strony, obecna wersja Angular to Angular 15. Wszystko z Bootstrap 4 jest kompatybilne z różnymi wersjami Angular. Jednak zawsze sprawdzaj dokumentację na oficjalnych stronach Bootstrap i Angular, łącząc te dwie technologie

Jakie projekty możesz budować przy użyciu Bootstrap i Angular?

Nie ma ograniczeń co do charakteru aplikacji, które można budować przy użyciu Bootstrap i Angular. Tych dwóch można używać do tworzenia aplikacji jednostronicowych, witryn eCommerce, platform społecznościowych, pulpitów nawigacyjnych i paneli administracyjnych. Możesz także używać Angular z frameworkiem Ionic do tworzenia aplikacji mobilnych.

Czy Angular to framework JavaScript czy TypeScript?

Angular to framework JavaScript. Jednak Angular jest napisany w TypeScript, nadzbiorze JavaScript. TypeScript wprowadza nowe funkcjonalności niedostępne w JavaScript. W ten sposób możesz używać Angular zarówno z aplikacjami TypeScript, jak i Angular.

Wniosek

Możesz teraz wygodnie używać dwóch najpopularniejszych frameworków front-end, Angular i Bootstrap, do tworzenia różnych aplikacji.

Wybór podejścia będzie zależał od przypadku użycia i rodzaju aplikacji, którą chcesz utworzyć.

Chociaż podejście CDN wygląda na łatwe, ma również różne wady. Głównym wyzwaniem jest bezpieczeństwo Twojej aplikacji, ponieważ hakerzy mogą wykorzystywać sieci CDN do wysyłania złośliwych skryptów do Twojej witryny.

Instalacja Bootstrapa przy użyciu NPM daje Ci kontrolę nad kodem, który umieszczasz w swojej aplikacji. Jednak takie podejście może być czasochłonne, ponieważ trzeba pobrać wszystkie zależności.

Sprawdź, jak dodać Bootstrap do aplikacji React.

x