A HTML, a JavaScript és a CSS a front-end fejlesztés pillérei közé tartoznak. Az Angular az egyik leggyakrabban használt JavaScript-keretrendszer kliensoldali alkalmazások építésére. Másrészt a Bootstrap az egyik legnépszerűbb felhasználói felület (UI) keretrendszer.
A keretrendszerek előre elkészített kódok, eszközök és könyvtárak gyűjteménye, amelyek előre meghatározott módot kínálnak az alkalmazások létrehozására. A Bootstrap és az Angular egyaránt keretrendszer.
Ez a cikk meghatározza az egyes keretrendszereket, és megvitatja a két technológia ötvözésének előnyeit, valamint azt, hogy hogyan kombinálhatja őket látványos és hatékony alkalmazások létrehozásához.
Tartalomjegyzék
Mi az a Bootstrap?
A Bootstrap egy ingyenes front-end eszközkészlet a mobil-első alkalmazások létrehozásához. Ez a HTML, CSS és JavaScript keretrendszer számos újrafelhasználható kódrészletet tartalmaz, amelyet a fejlesztők projektjeik különböző részein használhatnak fel.
Ez a keretrendszer tervezősablonokat tartalmaz különféle funkciókhoz, például gombokhoz, modálokhoz, képkörhintahoz, táblázatokhoz, navigációkhoz és még sok máshoz. A Bootstrap kiterjedt dokumentációval rendelkezik a könnyű használat érdekében.
Mi az AngularJS?
Az AngularJS egy JavaScript-keretrendszer, amely kiterjeszti a HTML szintaxisát a szokásos jelölőnyelveken túl. Ez a keretrendszer olyan funkciókat vezet be, mint például az adat-összerendelés, amely lehetővé teszi a fejlesztők számára, hogy elkerüljék a reszponzív weboldalak létrehozásának összetett folyamatát HTML használatakor.
Az AngularJS a model-view-controller (MVC) keretrendszert alkalmazza, ahol egyértelműen elkülönül az alkalmazás logikája és a felhasználói felület. A fejlesztők az AngularJS segítségével egyoldalas webalkalmazásokat, közösségi hálózati alkalmazásokat, e-kereskedelmi platformokat, tartalomkezelő rendszereket stb. hozhatnak létre.
A Bootstrap használatának előnyei Angularban
- Előre elkészített felhasználói felület összetevői: Nem kell a semmiből létrehoznia a navigációs sávokat, gombokat, körhintákat és kártyákat, mivel a Bootstrap rendelkezik előre elkészített kódrészletekkel, amelyeket használhat. Így a fejlesztők jobban összpontosíthatnak a funkcionalitásra, míg a Bootstrap gondoskodik az alapvető szerkezetről és stílusról.
- Testreszabható: Az előre beépített komponensek alapkódot biztosítanak. Az alkalmazás használata közben azonban testreszabhatja a kódot. Például, ha vesz egy kártyát a Bootstrap alkalmazásból, különféle elemeket, például képeket és szöveget módosíthat igényei szerint.
- Reszponzív: A modern webfelhasználók különféle eszközökön böngésznek, az okostelefonoktól és táblagépektől a számítógépekig. Nem kell minden képernyőmérethez alkalmazást létrehozni, mivel a Bootstrap érzékeny webalkalmazásokat biztosít.
- Konzisztens stílust biztosít: Egy jó webalkalmazásnak egységesnek kell lennie, és a különböző oldalakon áttekinthetőnek kell lennie. A Bootstrap elemek és összetevők használata segíthet elérni ezt a célt.
- Erős közösség: Ez a keretrendszer rengeteg erőforrást és erős dokumentációt tartalmaz, és számos fejlesztő támogatja.
Előfeltételek
#1. Node.js
Ez egy JavaScript futásidejű környezet, amellyel JavaScript kódot futtathat a böngészőn kívül. A parancs futtatásával ellenőrizheti a Node.js aktuális verzióját;
csomópont -v
Telepítheti a hivatalos webhelyről, ha nincs telepítve.
#2. Node Package Manager (NPM)
Az NPM kezeli az Angular alkalmazáshoz szükséges összes kapcsolódó csomagot. Az NPM alapértelmezés szerint a Node.js telepítésekor kerül telepítésre. Ezzel a paranccsal ellenőrizheti az aktuális verziót;
npm -v
#3. Szögletes CLI
Ez egy parancssori eszköz, amelyet egy Angular alkalmazás alapvető szerkezetének létrehozására használunk. Ezzel a paranccsal telepítheti az Angular CLI-t;
npm install -g @angular/cli
#4. Integrált fejlesztői környezet (IDE)
Itt kell beírnia a kódot. Bármilyen JavaScriptet támogató IDE használható, például a Visual Studio Code vagy a Webstorm.
A Bootstrap hozzáadása az Angularhoz
Most már minden eszközzel rendelkezünk Angular alkalmazásunk létrehozásához. Két fő megközelítés létezik a Bootstrap hozzáadásához az Angularhoz; 1. A Bootstrap telepítése NPM használatával. 2. CDN hivatkozások használata
1. megközelítés: NPM használata
A teljes Bootstrap könyvtárat telepíthetjük projektünkbe az NPM segítségével. Kovesd ezeket a lepeseket;
1. lépés: Az Angular CLI használatával állítsa be az alapvető alkalmazásstruktúrát
Egy tipikus Angular alkalmazás sok fájlt tartalmaz. Alkalmazásunkat angular-bootstrap-mockup néven fogjuk elnevezni (alkalmazásának tetszőleges nevet adhat). Ezzel a paranccsal állítsa be az alkalmazást;
új szögletes-bootstrap-makett
Ezeken a kérdéseken végigvezetik Önt;
- Szeretné hozzáadni a szögirányú útválasztást? (y/N) írja be az y-t
- Melyik stíluslap formátumot szeretné használni? Válassza a CSS-t
A telepítés befejeztével valami hasonló lesz a terminálon.
Navigáljon a létrehozott projektbe, és lépjen a 2. lépésre. Használhatja ezt a parancsot;
cd angular-bootstrap-mockup
Nyissa meg a projektet a kódszerkesztőben. A projekt felépítése a következő lesz;
2. lépés: telepítse a bootstrap és a bootstrap ikonokat.
Futtassa ezt a parancsot mindkettő telepítéséhez;
npm install bootstrap bootstrap-icons
3. lépés: Szerelje be a Bootstrap programot az angular.json fájlba
Keresse meg az angular.json fájlt az alkalmazás gyökérmappájában, és módosítsa ezeket a sorokat;
"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" ]
4. lépés: az ng-bootstrap telepítése
Az Ng-bootstrap Angular UI összetevők gyűjteménye, amely a Bootstrap keretrendszerre épül. A könyvtár különböző összetevőit úgy tervezték, hogy az AngularJS-szel működjenek.
Használja ezt a parancsot a telepítéshez;
npm telepítés @ng-bootstrap/ng-bootstrap
5. lépés: Módosítsa az app.module.ts fájlt az NgbModule hozzáadásával.
Ezzel módosítsa az app.module.ts fájl tartalmát;
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 {
}
5. lépés: Módosítsa az app.component.ts fájlt
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);
}
}
6. lépés: Adja hozzá a Bootstrap elemeket az app.component.html fájlhoz
A Bootstrap webhelyén rengeteg összetevő közül választhat. Létrehozunk egy egyszerű navigációs sávot, és hozzáadunk két gombot.
Módosítsa az app.component.html tartalmát az alábbiak szerint;
<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>
7. lépés: Futtassa az alkalmazást
Használja ezt a parancsot;
ng szolgálni
Amikor az Angular fejlesztés fut, megnyithatja a http://localhost:4200/ címet a böngészőjében.
2. megközelítés: A Bootstrap hozzáadása az Angularhoz CDN-hivatkozások segítségével
Ezzel a megközelítéssel közvetlenül kapcsolódhat a rendszerindító fájlokat tároló Content Delivery Network (CDN) hálózathoz.
Ezzel a megközelítéssel több gombot is létrehozhatunk egy új projekten. Kovesd ezeket a lepeseket;
1. lépés: Hozzon létre egy új Angular projektet
Alkalmazásunkat angular-bootstrap-cdn névvel látjuk el. (Bármilyen nevet választhat.)
Futtassa ezt a parancsot;
új angular-bootstrap-cdn
A telepítés befejeztével váltson könyvtárat, és nyissa meg a projektet egy kódszerkesztőben. Ezzel a paranccsal beléphet a projektkönyvtárba;
cd angular-bootstrap-cdn
2. lépés: Adja meg a CDN hivatkozást az index.html fájlban
Keresse meg az src/index.html fájlt és a CDN hivatkozást a fejrészben.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
3. lépés: Adja hozzá a Bootstrap kódot az app.component.html fájlhoz
Keresse meg az src/app/app.component.html fájlt.
Ezt a kódot hozzáadhatja a fájlhoz;
<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>
4. lépés: Futtassa az alkalmazást
ng szolgálni
Gyakran Ismételt Kérdések
Használhatja a Bootstrap-et és az Angular Material-t együtt ugyanabban a projektben?
Igen. A Bootstrap és az Angular Material ugyanazt a célt szolgáló felhasználói felületi könyvtárak. Mindazonáltal ne használja mindkét könyvtárat, ha ugyanazt az összetevőt kezeli, mivel ezek valószínűleg összeomlanak. Például, ha bejelentkezési oldalt szeretne létrehozni, válassza ki bármelyiket a rendelkezésre álló összetevők alapján.
A Bootstrap melyik verziója kompatibilis az Angularral?
A Bootstrap jelenlegi verziója az írás pillanatában a v5.3.0-alpha2. Másrészt az Angular jelenlegi verziója az Angular 15. A Bootstrap 4-ből bármi kompatibilis a különböző Angular verziókkal. A két technológia kombinálásakor azonban mindig ellenőrizze a Bootstrap és az Angular hivatalos webhelyein található dokumentációt
Milyen projekteket építhet a Bootstrap és az Angular segítségével?
A Bootstrap és az Angular használatával létrehozható alkalmazások jellege nincs korlátozva. A kettő segítségével egyoldalas alkalmazásokat, e-kereskedelmi webhelyeket, közösségi platformokat, irányítópultokat és adminisztrációs paneleket hozhat létre. Az Angulart az Ionic keretrendszerrel is használhatja mobil alkalmazások létrehozásához.
Az Angular JavaScript vagy TypeScript keretrendszer?
Az Angular egy JavaScript keretrendszer. Az Angular azonban TypeScriptben, a JavaScript szuperkészletében van írva. A TypeScript olyan új funkciókat vezet be, amelyek nem érhetők el a JavaScriptben. Így az Angular a TypeScript és az Angular alkalmazásokkal is használható.
Következtetés
Mostantól kényelmesen használhatja a két legnépszerűbb front-end keretrendszert, az Angular-t és a Bootstrapet különféle alkalmazások létrehozásához.
A megközelítés kiválasztása a használati esettől és a létrehozni kívánt alkalmazás típusától függ.
Annak ellenére, hogy a CDN megközelítés egyszerűnek tűnik, számos hátránya is van. A legnagyobb kihívást az alkalmazás biztonsága jelenti, mivel a hackerek CDN-ek segítségével rosszindulatú szkripteket küldhetnek a webhelyére.
A Bootstrap NPM-mel történő telepítése lehetővé teszi az alkalmazásban szereplő kód vezérlését. Ez a megközelítés azonban időigényes lehet, mivel le kell töltenie az összes függőséget.
Nézze meg, hogyan adhatja hozzá a Bootstrap-ot egy React alkalmazáshoz.