HTML, CSS a JavaScript jsou základními stavebními kameny pro vývoj front-endu. Angular se řadí mezi nejrozšířenější JavaScriptové frameworky pro tvorbu klientských aplikací, zatímco Bootstrap je považován za jeden z nejoblíbenějších frameworků pro uživatelské rozhraní (UI).
Frameworky představují soubory předem připraveného kódu, nástrojů a knihoven, které poskytují standardizovaný způsob vývoje aplikací. Bootstrap i Angular spadají do kategorie frameworků.
Tento článek se věnuje definici každého z těchto frameworků a rozebírá výhody plynoucí z jejich kombinace. Dále se podíváme na to, jak tyto dvě technologie propojit, abyste mohli vytvářet vizuálně poutavé a vysoce funkční aplikace.
Co je Bootstrap?
Bootstrap je bezplatná sada nástrojů pro front-end, určená k vývoji responzivních webových stránek a mobilních aplikací. Tento framework, postavený na HTML, CSS a JavaScriptu, nabízí rozsáhlou sbírku opakovaně použitelných fragmentů kódu, které mohou vývojáři aplikovat v různých částech svých projektů.
Framework obsahuje návrhové šablony pro různé prvky, jako jsou tlačítka, modální okna, karusely obrázků, tabulky, navigace a mnoho dalších. Bootstrap se pyšní rozsáhlou dokumentací, která usnadňuje jeho použití.
Co je AngularJS?
AngularJS je JavaScriptový framework, který rozšiřuje možnosti HTML za hranice běžného značkovacího jazyka. Nabízí funkce, jako je datová vazba, která umožňuje vývojářům vyhnout se složitému procesu vytváření responzivních webových stránek při použití HTML.
AngularJS využívá architekturu model-view-controller (MVC), která jasně odděluje logiku aplikace od uživatelského rozhraní. Pomocí AngularJS lze vytvářet jednostránkové webové aplikace, aplikace pro sociální sítě, e-commerce platformy, systémy pro správu obsahu a další.
Výhody používání Bootstrapu v Angularu
- Předem připravené komponenty UI: Nemusíte vytvářet navigační panely, tlačítka, karusely a karty od začátku, protože Bootstrap poskytuje předpřipravené části kódu. Vývojáři se tak mohou více soustředit na funkčnost, zatímco Bootstrap se postará o základní strukturu a vizuální styl.
- Přizpůsobitelnost: Přestože předpřipravené komponenty poskytují standardizovaný základ, můžete si je dále upravit dle svých potřeb. Například u karty z Bootstrapu můžete měnit různé prvky, jako jsou obrázky a text.
- Responzivita: Vzhledem k tomu, že uživatelé přistupují k webu z různých zařízení, od chytrých telefonů přes tablety až po počítače, není nutné vyvíjet aplikaci pro každou velikost obrazovky zvlášť. Bootstrap vytváří automaticky responzivní webové aplikace.
- Konzistentní styl: Kvalitní webová aplikace by měla mít jednotný vzhled a dojem na všech stránkách. Komponenty a prvky Bootstrap vám k tomuto cíli mohou pomoci.
- Silná komunita: Bootstrap se může pochlubit bohatými zdroji, rozsáhlou dokumentací a silnou komunitou vývojářů.
Předpoklady
1. Node.js
Toto je běhové prostředí JavaScriptu, které umožňuje spouštět JavaScriptový kód mimo prohlížeč. Aktuální verzi Node.js můžete ověřit pomocí následujícího příkazu:
node -v
Pokud Node.js není nainstalován, můžete jej stáhnout z oficiálních stránek.
2. Node Package Manager (NPM)
NPM slouží ke správě všech balíčků potřebných pro vaši aplikaci v Angularu. NPM je standardně součástí instalace Node.js. Aktuální verzi NPM ověříte tímto příkazem:
npm -v
3. Angular CLI
Jedná se o nástroj příkazového řádku, který se používá k vytvoření základní struktury aplikace v Angularu. Angular CLI nainstalujete pomocí následujícího příkazu:
npm install -g @angular/cli
4. Integrované vývojové prostředí (IDE)
Zde budete psát svůj kód. Můžete použít jakékoli IDE podporující JavaScript, například Visual Studio Code nebo Webstorm.
Jak přidat Bootstrap do Angularu
Nyní máte k dispozici veškeré nástroje potřebné pro tvorbu aplikací v Angularu. Existují dva hlavní způsoby, jak přidat Bootstrap do Angularu: 1. Instalace Bootstrap pomocí NPM. 2. Použití odkazů CDN.
Přístup 1: Použití NPM
Prostřednictvím NPM můžeme do projektu nainstalovat celou knihovnu Bootstrap. Postupujte podle následujících kroků:
Krok 1: Vytvoření základní struktury aplikace pomocí Angular CLI
Typická aplikace v Angularu se skládá z mnoha souborů. Naši aplikaci pojmenujeme „angular-bootstrap-mockup“ (můžete použít libovolný název). Aplikaci vytvoříte pomocí tohoto příkazu:
ng new angular-bootstrap-mockup
Následující otázky vás provedou procesem:
- Chcete přidat Angular routing? (y/N) Zadejte ‚y‘
- Jaký formát šablony stylů chcete použít? Vyberte CSS
Po dokončení byste měli na terminálu vidět něco podobného.
Přejděte do vytvořeného projektu a pokračujte ke kroku 2 pomocí tohoto příkazu:
cd angular-bootstrap-mockup
Otevřete projekt v editoru kódu. Struktura projektu bude vypadat takto:
Krok 2: Instalace Bootstrap a ikon Bootstrap
Nainstalujte obojí pomocí tohoto příkazu:
npm install bootstrap bootstrap-icons
Krok 3: Zahrnutí Bootstrap do souboru angular.json
V kořenovém adresáři aplikace vyhledejte soubor ‚angular.json‘ a upravte následující řádky:
"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: Instalace ng-bootstrap
Ng-bootstrap je sada komponent uživatelského rozhraní pro Angular, postavená nad rámcem Bootstrap. Jednotlivé komponenty v této knihovně jsou navrženy pro použití s AngularJS.
Instalace se provede pomocí tohoto příkazu:
npm install @ng-bootstrap/ng-bootstrap
Krok 5: Úprava souboru app.module.ts pro zahrnutí NgbModule
Upravte obsah souboru ‚app.module.ts‘ takto:
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: Úprava souboru 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: Přidání Bootstrap prvků do souboru app.component.html
Na webu Bootstrap najdete spoustu komponent. Vytvoříme jednoduchý navigační panel a přidáme dvě tlačítka.
Upravte obsah souboru ‚app.component.html‘ následovně:
<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: Spuštění aplikace
Použijte tento příkaz:
ng serve
Jakmile se vývojový server Angular rozběhne, můžete otevřít http://localhost:4200/ ve vašem prohlížeči.
Přístup 2: Přidání Bootstrap do Angular pomocí odkazů CDN
Tento přístup umožňuje přímé připojení k síti pro doručování obsahu (CDN), kde jsou uloženy soubory Bootstrap.
Pro ilustraci tohoto přístupu si vytvoříme nový projekt, do kterého přidáme několik tlačítek. Postupujte podle těchto kroků:
Krok 1: Vytvoření nového projektu Angular
Naši aplikaci pojmenujeme „angular-bootstrap-cdn“ (můžete si vybrat libovolný název).
Spusťte tento příkaz:
ng new angular-bootstrap-cdn
Po dokončení instalace přejděte do adresáře projektu a otevřete jej v editoru kódu pomocí tohoto příkazu:
cd angular-bootstrap-cdn
Krok 2: Zahrnutí odkazu CDN do souboru index.html
Vyhledejte soubor ‚src/index.html‘ a v sekci ‚head‘ přidejte odkaz CDN:
<head> ....... <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ....... </head>
Krok 3: Přidání Bootstrap kódu do souboru app.component.html
Vyhledejte soubor ‚src/app/app.component.html‘.
Přidejte do souboru následující kód:
<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: Spuštění aplikace
Použijte příkaz:
ng serve
Často kladené otázky
Můžete v jednom projektu použít Bootstrap i Angular Material?
Ano, Bootstrap i Angular Material jsou knihovny pro uživatelské rozhraní, které slouží stejnému účelu. Nicméně, neměli byste používat obě knihovny pro stejnou komponentu, protože může dojít ke konfliktům. Například, pokud chcete vytvořit přihlašovací stránku, vyberte si pro ni komponenty buď z jedné, nebo z druhé knihovny.
Jaká verze Bootstrapu je kompatibilní s Angularem?
Aktuální verze Bootstrapu v době psaní tohoto článku je v5.3.0-alpha2, zatímco aktuální verze Angularu je Angular 15. Jakákoli verze Bootstrapu 4 a vyšší je kompatibilní s různými verzemi Angularu. Při kombinaci těchto dvou technologií se však vždy podívejte do dokumentace na oficiálních stránkách Bootstrapu i Angularu.
Jaké projekty lze stavět pomocí Bootstrapu a Angularu?
Neexistují žádná omezení, pokud jde o typ aplikací, které můžete pomocí Bootstrapu a Angularu vytvářet. Tyto dvě technologie můžete použít pro jednostránkové aplikace, e-commerce weby, sociální platformy, řídicí panely a administrační rozhraní. Angular můžete kombinovat i s frameworkem Ionic pro vývoj mobilních aplikací.
Je Angular framework JavaScript nebo TypeScript?
Angular je framework pro JavaScript, avšak je napsaný v TypeScriptu, což je nadmnožina JavaScriptu. TypeScript zavádí nové funkce, které nejsou v JavaScriptu dostupné. Proto můžete Angular používat s aplikacemi psanými v TypeScriptu i JavaScriptu.
Závěr
Nyní byste měli být schopni efektivně používat dva z nejoblíbenějších front-end frameworků, Angular a Bootstrap, pro vývoj nejrůznějších aplikací.
Volba konkrétního přístupu závisí na vašich specifických potřebách a typu aplikace, kterou chcete vytvořit.
Přestože se přístup CDN zdá být jednodušší, má také své nevýhody. Hlavním rizikem je zabezpečení vaší aplikace, protože hackeři mohou prostřednictvím CDN vkládat do vašeho webu škodlivé skripty.
Instalace Bootstrapu pomocí NPM vám poskytuje větší kontrolu nad kódem, který je součástí vaší aplikace, avšak tento přístup může být časově náročnější, protože musíte stáhnout veškeré závislosti.
Podívejte se také, jak přidat Bootstrap do aplikace React.