HTML, JavaScript și CSS sunt printre pilonii dezvoltării front-end. Angular este unul dintre cele mai utilizate cadre JavaScript pentru construirea de aplicații pe partea clientului. Pe de altă parte, Bootstrap este printre cele mai populare cadre de interfață cu utilizatorul (UI).
Framework-urile sunt o colecție de un set pre-construit de cod, instrumente și biblioteci care oferă o modalitate predefinită de a crea aplicații. Bootstrap și Angular sunt ambele cadre.
Acest articol va defini fiecare cadru și va discuta despre beneficiile combinării celor două tehnologii și despre cum să le combinați pentru a crea aplicații puternice și atractive din punct de vedere vizual.
Cuprins
Ce este Bootstrap?
Bootstrap este un set de instrumente front-end gratuit pentru crearea de aplicații mobile. Acest cadru HTML, CSS și JavaScript are o colecție mare de bucăți de cod reutilizabile pe care dezvoltatorii le pot folosi în diferite părți ale proiectelor lor.
Acest cadru are șabloane de design pentru diverse caracteristici, cum ar fi butoane, modale, carusele de imagini, tabele, navigații și multe altele. Bootstrap are o documentație extinsă pentru a-l face ușor de utilizat.
Ce este AngularJS?
AngularJS este un cadru JavaScript care extinde sintaxa HTML dincolo de un limbaj de marcare obișnuit. Acest cadru introduce caracteristici precum legarea de date care permit dezvoltatorilor să evite procesul complex de creare a paginilor web receptive atunci când folosesc HTML.
AngularJS folosește cadrul model-view-controller (MVC), unde există o separare clară între logica aplicației și interfața cu utilizatorul. Dezvoltatorii pot folosi AngularJS pentru a crea aplicații web cu o singură pagină, aplicații de rețele sociale, platforme de comerț electronic, sisteme de gestionare a conținutului și multe altele.
Beneficiile utilizării Bootstrap în Angular
- Componente UI preconstruite: nu trebuie să creați bare de navigare, butoane, carusele și carduri de la zero, deoarece Bootstrap are bucăți de cod pre-construite pe care le puteți utiliza. Astfel, dezvoltatorii se pot concentra mai mult pe funcționalitate, în timp ce Bootstrap are grijă de structura și stilul de bază.
- Personalizabil: Componentele prefabricate oferă codul standard. Cu toate acestea, puteți personaliza codul în timpul aplicației dvs. De exemplu, dacă luați un card din Bootstrap, puteți modifica diferite elemente, cum ar fi imagini și text, pentru a se potrivi nevoilor dvs.
- Reactiv: utilizatorii web moderni navighează pe diverse dispozitive, de la smartphone-uri și tablete la computere. Nu trebuie să creați o aplicație pentru fiecare dimensiune de ecran, deoarece Bootstrap oferă aplicații web receptive.
- Aduce un stil consecvent: o aplicație web bună ar trebui să aibă un aspect și să arate consecvent în diferite pagini. Utilizarea elementelor și componentelor Bootstrap vă poate ajuta să atingeți acest obiectiv.
- Comunitate puternică: acest cadru este plin de multe resurse și documentație puternică și este susținut de mulți dezvoltatori.
Cerințe preliminare
#1. Node.js
Acesta este un mediu de rulare JavaScript pe care îl veți folosi pentru a rula cod JavaScript în afara browserului. Puteți verifica versiunea curentă a Node.js rulând această comandă;
nodul -v
Îl puteți instala de pe site-ul oficial dacă nu este instalat.
#2. Node Package Manager (NPM)
NPM va gestiona toate pachetele asociate de care aveți nevoie pentru aplicația dvs. Angular. NPM este instalat implicit când instalați Node.js. Puteți verifica versiunea curentă folosind această comandă;
npm -v
#3. CLI unghiular
Este un instrument de linie de comandă pe care îl vom folosi pentru a crea structura de bază a unei aplicații Angular. Puteți instala Angular CLI folosind această comandă;
npm install -g @angular/cli
#4. Un mediu de dezvoltare integrat (IDE)
Aici vei scrie codul. Puteți utiliza orice IDE care acceptă JavaScript, cum ar fi Visual Studio Code sau Webstorm.
Cum să adăugați Bootstrap la Angular
Acum avem toate instrumentele necesare pentru a crea aplicația noastră Angular. Există două abordări majore pentru adăugarea Bootstrap la Angular; 1. Instalarea Bootstrap folosind NPM. 2. Utilizarea legăturilor CDN
Abordarea 1: Utilizarea NPM
Putem instala întreaga bibliotecă Bootstrap în proiectul nostru folosind NPM. Urmați acești pași;
Pasul 1: Utilizați Angular CLI pentru a configura structura de bază a aplicației
O aplicație tipică Angular are multe fișiere. Vom numi aplicația noastră angular-bootstrap-mockup (puteți da aplicației dvs. orice nume care vă place). Utilizați această comandă pentru a vă configura aplicația;
ng nou unghiular-bootstrap-mockup
Veți fi condus prin aceste întrebări;
- Doriți să adăugați rutare unghiulară? (y/N) introduceți y
- Ce format de foaie de stil ați dori să utilizați? Selectați CSS
Odată terminată configurarea, veți avea ceva similar cu acesta pe terminal.
Navigați în proiectul creat și treceți la pasul 2. Puteți utiliza această comandă;
cd angular-bootstrap-mockup
Deschideți proiectul în editorul de cod. Structura proiectului va fi după cum urmează;
Pasul 2: instalați pictogramele bootstrap și bootstrap.
Rulați această comandă pentru a instala ambele;
npm instalează bootstrap bootstrap-icoane
Pasul 3: Includeți Bootstrap în fișierul angular.json
Localizați fișierul angular.json în folderul rădăcină al aplicației dvs. și modificați aceste linii;
"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" ]
Pasul 4: instalați ng-bootstrap
Ng-bootstrap este o colecție de componente Angular UI construite deasupra cadrului Bootstrap. Diferitele componente din această bibliotecă sunt proiectate să funcționeze cu AngularJS.
Utilizați această comandă pentru a o instala;
npm install @ng-bootstrap/ng-bootstrap
Pasul 5: Modificați app.module.ts pentru a include NgbModule.
Schimbați conținutul fișierului app.module.ts cu aceasta;
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 {
}
Pasul 5: Modificați 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);
}
}
Pasul 6: Adăugați elemente Bootstrap în fișierul app.component.html
Există o mulțime de componente din care să alegeți pe site-ul web Bootstrap. Vom crea o bară de navigare simplă și vom adăuga două butoane.
Modificați conținutul app.component.html după cum urmează;
<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>
Pasul 7: rulați aplicația
Utilizați această comandă;
ng servi
Când rulează dezvoltarea Angular, puteți deschide http://localhost:4200/ în browser.
Abordarea 2: Adăugați Bootstrap la Angular folosind link-uri CDN
Această abordare vă permite să vă conectați direct la Content Delivery Network (CDN) care stochează fișiere Bootstrap.
Putem crea mai multe butoane folosind această abordare pe un proiect nou. Urmați acești pași;
Pasul 1: Creați un nou proiect Angular
Vom numi aplicația noastră angular-bootstrap-cdn. (Puteți alege orice nume).
Rulați această comandă;
ng nou unghiular-bootstrap-cdn
Odată ce instalarea s-a încheiat, schimbați directorul și deschideți proiectul într-un editor de cod. Puteți folosi această comandă pentru a intra în directorul proiectului;
cd angular-bootstrap-cdn
Pasul 2: Includeți linkul CDN în fișierul index.html
Găsiți fișierul src/index.html și linkul CDN în secțiunea head.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
Pasul 3: Adăugați codul Bootstrap în fișierul app.component.html
Găsiți fișierul src/app/app.component.html.
Puteți adăuga acest cod la fișier;
<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>
Pasul 4: rulați aplicația
ng servi
întrebări frecvente
Puteți folosi Bootstrap și Angular Material împreună în același proiect?
Da. Bootstrap și Angular Material sunt biblioteci UI create pentru a servi aceluiași scop. Cu toate acestea, nu ar trebui să utilizați ambele biblioteci atunci când aveți de-a face cu aceeași componentă, deoarece este posibil să se blocheze. De exemplu, dacă doriți să creați o pagină de conectare, alegeți oricare în funcție de componentele disponibile.
Ce versiune de Bootstrap este compatibilă cu Angular?
Versiunea actuală de Bootstrap, la momentul scrierii acestui articol, este v5.3.0-alpha2. Pe de altă parte, versiunea actuală de Angular este Angular 15. Orice din Bootstrap 4 este compatibil cu diverse versiuni Angular. Cu toate acestea, verificați întotdeauna documentația de pe site-urile web oficiale Bootstrap și Angular atunci când combinați cele două tehnologii
Ce proiecte puteți construi folosind Bootstrap și Angular?
Nu există nicio limitare privind natura aplicațiilor pe care le puteți crea folosind Bootstrap și Angular. Le puteți folosi pe cele două pentru a crea aplicații cu o singură pagină, site-uri de comerț electronic, platforme sociale, tablouri de bord și panouri de administrare. De asemenea, puteți utiliza Angular cu cadrul Ionic pentru a crea aplicații mobile.
Este Angular un cadru JavaScript sau TypeScript?
Angular este un cadru JavaScript. Cu toate acestea, Angular este scris în TypeScript, un superset de JavaScript. TypeScript introduce noi funcționalități care nu sunt disponibile în JavaScript. Astfel, puteți utiliza Angular atât cu aplicațiile TypeScript, cât și cu aplicațiile Angular.
Concluzie
Acum puteți utiliza confortabil două dintre cele mai populare cadre front-end, Angular și Bootstrap, pentru a crea diverse aplicații.
Alegerea abordării va depinde de cazul de utilizare și de tipul de aplicație pe care doriți să o creați.
Chiar dacă abordarea CDN pare ușoară, are și diverse dezavantaje. Provocarea majoră este securitatea aplicației dvs., deoarece hackerii pot folosi CDN-uri pentru a trimite scripturi rău intenționate pe site-ul dvs.
Instalarea Bootstrap folosind NPM vă oferă control asupra codului pe care îl includeți în aplicația dvs. Cu toate acestea, această abordare poate consuma mult timp, deoarece trebuie să descărcați toate dependențele.
Aflați cum să adăugați Bootstrap la o aplicație React.