HTML, JavaScript e CSS costituiscono le fondamenta dello sviluppo front-end. Angular si distingue come uno dei framework JavaScript più utilizzati per la creazione di applicazioni lato client. Parallelamente, Bootstrap è un framework di interfaccia utente (UI) molto popolare.
I framework offrono un insieme predefinito di codice, strumenti e librerie, fornendo un approccio standardizzato alla creazione di applicazioni. Bootstrap e Angular sono entrambi esempi di framework.
Questo articolo esplorerà la natura di ciascun framework, i vantaggi derivanti dalla loro combinazione e le modalità per integrarli al fine di sviluppare applicazioni visivamente accattivanti e altamente funzionali.
Che cos’è Bootstrap?
Bootstrap è un toolkit front-end gratuito progettato per lo sviluppo di applicazioni “mobile-first”. Questo framework, basato su HTML, CSS e JavaScript, include un’ampia varietà di elementi di codice riutilizzabili che gli sviluppatori possono incorporare in diverse sezioni dei loro progetti.
Il framework offre modelli di design per diverse funzionalità, come pulsanti, finestre modali, caroselli di immagini, tabelle, menu di navigazione e altro ancora. Bootstrap è ben documentato, il che lo rende facile da usare.
Che cos’è AngularJS?
AngularJS è un framework JavaScript che espande le potenzialità del linguaggio HTML oltre le sue normali funzioni di markup. Introduce funzionalità come il data binding, consentendo agli sviluppatori di evitare il complesso processo di creazione manuale di pagine web reattive.
AngularJS si basa sull’architettura model-view-controller (MVC), che prevede una chiara separazione tra la logica dell’applicazione e l’interfaccia utente. Gli sviluppatori possono utilizzare AngularJS per realizzare applicazioni web a singola pagina, piattaforme di social networking, siti di e-commerce, sistemi di gestione dei contenuti e molto altro.
Vantaggi dell’utilizzo di Bootstrap in Angular
- Componenti UI predefiniti: Non è necessario creare da zero elementi come barre di navigazione, pulsanti, caroselli e schede, poiché Bootstrap offre elementi di codice predefiniti. Questo consente agli sviluppatori di concentrarsi sulla funzionalità, mentre Bootstrap si occupa della struttura e dello stile di base.
- Personalizzabile: I componenti predefiniti offrono codice base, che può essere personalizzato in base alle necessità specifiche dell’applicazione. Ad esempio, una card di Bootstrap può essere modificata per includere immagini e testi personalizzati.
- Reattivo: Gli utenti navigano su una vasta gamma di dispositivi. Bootstrap garantisce che le applicazioni web siano reattive e si adattino a schermi di diverse dimensioni, senza necessità di sviluppare applicazioni separate per ogni dispositivo.
- Stile coerente: Una buona applicazione web dovrebbe avere uno stile omogeneo. L’uso dei componenti Bootstrap contribuisce a raggiungere questo obiettivo, assicurando una presentazione uniforme su tutte le pagine.
- Comunità attiva: Bootstrap gode di un ampio supporto da parte di una vasta comunità di sviluppatori, offrendo risorse, documentazione e supporto.
Prerequisiti
#1. Node.js
Questo è un ambiente di runtime JavaScript che consente di eseguire codice JavaScript al di fuori del browser. È possibile verificare la versione di Node.js installata utilizzando il comando:
node -v
Se non è installato, è possibile scaricarlo dal sito Web ufficiale.
#2. Node Package Manager (NPM)
NPM si occupa della gestione di tutti i pacchetti necessari per l’applicazione Angular. Viene installato di default con Node.js. La versione di NPM può essere verificata con il comando:
npm -v
#3. Angular CLI
È uno strumento da riga di comando utilizzato per creare la struttura di base di un’applicazione Angular. Può essere installato utilizzando il comando:
npm install -g @angular/cli
#4. Ambiente di sviluppo integrato (IDE)
L’IDE è l’ambiente in cui si scrive il codice. Si può usare un qualsiasi IDE che supporti JavaScript, come Visual Studio Code o Webstorm.
Come aggiungere Bootstrap ad Angular
Ora, disponiamo degli strumenti necessari per creare la nostra applicazione Angular. Esistono due metodi principali per includere Bootstrap in Angular: 1. Installazione tramite NPM; 2. Utilizzo di link CDN.
Metodo 1: Utilizzo di NPM
Si può installare l’intera libreria Bootstrap nel progetto usando NPM. Seguire questi passaggi:
Passaggio 1: Configurare la struttura di base dell’app con Angular CLI
Un tipico progetto Angular include molti file. Chiameremo la nostra applicazione “angular-bootstrap-mockup” (è possibile assegnare qualsiasi nome). Per configurare l’app, utilizzare il comando:
ng new angular-bootstrap-mockup
Verranno poste alcune domande:
- Vuoi aggiungere il routing Angular? (y/N) Inserire “y”
- Quale formato di foglio di stile desideri utilizzare? Seleziona “CSS”
Una volta terminata la configurazione, l’output nel terminale sarà simile a questo:
Entrare nella cartella del progetto e procedere con il passaggio 2 usando il comando:
cd angular-bootstrap-mockup
Aprire il progetto nell’editor di codice. La struttura del progetto sarà simile a questa:
Passaggio 2: Installare Bootstrap e le icone Bootstrap
Eseguire questo comando per installare entrambi:
npm install bootstrap bootstrap-icons
Passaggio 3: Includere Bootstrap nel file angular.json
Localizzare il file angular.json nella cartella principale e modificare queste righe:
"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"
]
Passaggio 4: Installare ng-bootstrap
Ng-bootstrap è una collezione di componenti UI Angular realizzati sulla base di Bootstrap. I componenti di questa libreria sono progettati per funzionare con AngularJS.
Utilizzare questo comando per l’installazione:
npm install @ng-bootstrap/ng-bootstrap
Passaggio 5: Modificare app.module.ts per includere NgbModule.
Sostituire il contenuto del file app.module.ts con questo:
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 { }
Passaggio 6: Modificare 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);
}
}
Passaggio 7: Aggiungere elementi Bootstrap al file app.component.html
Il sito web di Bootstrap offre molti componenti tra cui scegliere. Creeremo una semplice barra di navigazione e aggiungeremo due pulsanti.
Sostituire il contenuto di app.component.html con questo:
<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>
Passaggio 8: Eseguire l’applicazione
Utilizzare questo comando:
ng serve
Una volta compilata l’applicazione Angular, è possibile aprirla all’indirizzo https://localhost:4200/ nel browser.
Metodo 2: Aggiungere Bootstrap ad Angular utilizzando i link CDN
Questo metodo consente di collegarsi direttamente alla Content Delivery Network (CDN) che ospita i file di Bootstrap.
Si possono creare diversi pulsanti usando questo metodo in un nuovo progetto. Seguire questi passaggi:
Passaggio 1: Creare un nuovo progetto Angular
Chiameremo la nostra app “angular-bootstrap-cdn”. (Si può scegliere un altro nome).
Eseguire il comando:
ng new angular-bootstrap-cdn
Una volta completata l’installazione, entrare nella cartella del progetto e aprirlo in un editor di codice. Per entrare nella cartella del progetto, si può usare il comando:
cd angular-bootstrap-cdn
Passaggio 2: Includere il link CDN nel file index.html
Localizzare il file src/index.html e aggiungere il link CDN nella sezione head:
<head>
…….
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
………
</head>
Passaggio 3: Aggiungere il codice Bootstrap al file app.component.html
Localizzare il file src/app/app.component.html.
Aggiungere questo codice al file:
<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>
Passaggio 4: Eseguire l’applicazione
ng serve
Domande frequenti
È possibile utilizzare Bootstrap e Angular Material insieme nello stesso progetto?
Sì. Sia Bootstrap che Angular Material sono librerie UI create per lo stesso scopo. Tuttavia, è consigliabile non usare entrambe le librerie per lo stesso componente, poiché potrebbero verificarsi conflitti. Ad esempio, se si desidera creare una pagina di login, è meglio scegliere una sola libreria in base ai componenti che offre.
Quale versione di Bootstrap è compatibile con Angular?
La versione attuale di Bootstrap è la v5.3.0-alpha2, mentre la versione attuale di Angular è la 15. Tutte le versioni di Bootstrap successive alla 4 sono compatibili con le varie versioni di Angular. Tuttavia, è sempre consigliabile consultare la documentazione ufficiale di Bootstrap e Angular per informazioni dettagliate sulla compatibilità quando si combinano queste tecnologie.
Quali progetti si possono creare con Bootstrap e Angular?
Non ci sono limitazioni sui tipi di applicazioni che si possono sviluppare con Bootstrap e Angular. Si possono creare applicazioni a singola pagina, siti web di e-commerce, piattaforme social, dashboard e pannelli di amministrazione. Inoltre, si può combinare Angular con il framework Ionic per creare app mobile.
Angular è un framework JavaScript o TypeScript?
Angular è un framework JavaScript. Tuttavia, Angular è scritto in TypeScript, un soprainsieme di JavaScript. TypeScript introduce nuove funzionalità non presenti in JavaScript. Angular può essere utilizzato sia con progetti TypeScript che JavaScript.
Conclusione
Ora è possibile utilizzare con facilità due tra i framework front-end più popolari, Angular e Bootstrap, per creare una vasta gamma di applicazioni.
La scelta del metodo di integrazione dipende dalle esigenze specifiche del progetto e dal tipo di applicazione che si desidera sviluppare.
Sebbene l’approccio CDN appaia più semplice, presenta anche alcuni svantaggi. Il principale problema riguarda la sicurezza dell’applicazione, poiché i CDN possono essere utilizzati da hacker per iniettare script dannosi.
L’installazione di Bootstrap tramite NPM offre un maggiore controllo sul codice incluso nell’applicazione, anche se questo approccio può richiedere più tempo a causa della necessità di scaricare tutte le dipendenze.
Approfondisci le tecniche per aggiungere Bootstrap a un’applicazione React.