HTML, JavaScript e CSS sono tra i pilastri dello sviluppo front-end. Angular è uno dei framework JavaScript più utilizzati per la creazione di applicazioni lato client. D’altra parte, Bootstrap è tra i framework di interfaccia utente (UI) più popolari.
I framework sono una raccolta di un set predefinito di codice, strumenti e librerie che offrono un modo predefinito per creare applicazioni. Bootstrap e Angular sono entrambi framework.
Questo articolo definirà ogni framework e discuterà i vantaggi della combinazione delle due tecnologie e come combinarle per creare app visivamente accattivanti e potenti.
Sommario:
Cos’è Bootstrap?
Bootstrap è un toolkit front-end gratuito per la creazione di applicazioni mobile-first. Questo framework HTML, CSS e JavaScript ha una vasta raccolta di pezzi di codice riutilizzabili che gli sviluppatori possono utilizzare in varie parti dei loro progetti.
Questo framework ha modelli di progettazione per varie funzionalità come pulsanti, modali, caroselli di immagini, tabelle, navigazioni e molto altro ancora. Bootstrap ha un’ampia documentazione per renderlo facile da usare.
Cos’è AngularJS?
AngularJS è un framework JavaScript che estende la sintassi dell’HTML oltre un normale linguaggio di markup. Questo framework introduce funzionalità come l’associazione dati che consentono agli sviluppatori di evitare il complesso processo di creazione di pagine Web reattive quando si utilizza HTML.
AngularJS utilizza il framework model-view-controller (MVC), in cui esiste una netta separazione tra la logica dell’applicazione e l’interfaccia utente. Gli sviluppatori possono utilizzare AngularJS per creare applicazioni Web a pagina singola, applicazioni di social networking, piattaforme di e-commerce, sistemi di gestione dei contenuti e altro ancora.
Vantaggi dell’utilizzo di Bootstrap in Angular
- Componenti dell’interfaccia utente predefiniti: non è necessario creare barre di navigazione, pulsanti, caroselli e schede da zero, poiché Bootstrap dispone di parti di codice predefinite che è possibile utilizzare. Pertanto, gli sviluppatori possono concentrarsi maggiormente sulla funzionalità mentre Bootstrap si occupa della struttura e dello stile di base.
- Personalizzabile: i componenti predefiniti forniscono il codice boilerplate. Tuttavia, puoi personalizzare il codice mentre sei sulla tua applicazione. Ad esempio, se prendi una carta da Bootstrap, puoi modificare vari elementi, come immagini e testo in base alle tue esigenze.
- Reattivo: gli utenti web moderni navigano su vari dispositivi, da smartphone e tablet a computer. Non è necessario creare un’applicazione per ogni dimensione dello schermo, poiché Bootstrap fornisce applicazioni Web reattive.
- Porta uno stile coerente: una buona applicazione web dovrebbe avere un aspetto coerente e apparire su pagine diverse. L’uso di elementi e componenti Bootstrap può aiutarti a raggiungere questo obiettivo.
- Forte comunità: questo framework è ricco di molte risorse e di una solida documentazione ed è supportato da molti sviluppatori.
Prerequisiti
#1. Node.js
Questo è un ambiente di runtime JavaScript che utilizzerai per eseguire il codice JavaScript al di fuori del browser. Puoi controllare la versione corrente del tuo Node.js eseguendo questo comando;
nodo -v
Puoi installarlo dal sito Web ufficiale se non è installato.
#2. Node Package Manager (NPM)
NPM gestirà tutti i pacchetti associati di cui hai bisogno per la tua app Angular. NPM viene installato per impostazione predefinita quando installi Node.js. Puoi controllare la versione corrente usando questo comando;
npm -v
#3. CLI angolare
È uno strumento da riga di comando che useremo per creare la struttura di base di un’app Angular. Puoi installare Angular CLI usando questo comando;
npm install -g @angular/cli
#4. Un ambiente di sviluppo integrato (IDE)
Qui è dove scriverai il tuo codice. Puoi utilizzare qualsiasi IDE che supporti JavaScript, ad esempio Visual Studio Code o Webstorm.
Come aggiungere Bootstrap ad Angular
Ora abbiamo tutti gli strumenti necessari per creare la nostra app Angular. Esistono due approcci principali per aggiungere Bootstrap ad Angular; 1. Installazione di Bootstrap tramite NPM. 2. Utilizzo dei collegamenti CDN
Approccio 1: utilizzo di NPM
Possiamo installare l’intera libreria Bootstrap nel nostro progetto utilizzando NPM. Segui questi passi;
Passaggio 1: utilizza la CLI angolare per configurare la struttura di base dell’app
Una tipica app Angular ha molti file. Chiameremo la nostra app angular-bootstrap-mockup (puoi dare alla tua app qualsiasi nome ti piaccia). Usa questo comando per configurare la tua app;
ng nuovo angular-bootstrap-mockup
Sarai guidato attraverso queste domande;
- Vuoi aggiungere il routing angolare? (y/N) inserire y
- Quale formato di foglio di stile vorresti utilizzare? Seleziona CSS
Una volta terminata la configurazione, avrai qualcosa di simile a questo sul tuo terminale.
Passare al progetto creato e passare al passaggio 2. È possibile utilizzare questo comando;
cd angular-bootstrap-mockup
Apri il progetto nel tuo editor di codice. La struttura del progetto sarà la seguente;
Passaggio 2: installa le icone bootstrap e bootstrap.
Esegui questo comando per installare entrambi;
npm installa le icone bootstrap di bootstrap
Passaggio 3: includi Bootstrap nel file angular.json
Individua il file angular.json nella cartella principale della tua app e modifica 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: installa ng-bootstrap
Ng-bootstrap è una raccolta di componenti dell’interfaccia utente Angular costruiti sulla base del framework Bootstrap. I diversi componenti di questa libreria sono progettati per funzionare con AngularJS.
Usa questo comando per installarlo;
npm installa @ng-bootstrap/ng-bootstrap
Passaggio 5: modifica app.module.ts per includere NgbModule.
Cambia il contenuto del file app.module.ts con this;
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 5: modifica 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 6: aggiungi gli elementi Bootstrap al file app.component.html
Ci sono tonnellate di componenti tra cui scegliere sul sito web di Bootstrap. Creeremo una semplice barra di navigazione e aggiungeremo due pulsanti.
Modificare il contenuto di app.component.html come segue;
<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 7: esegui la tua app
Usa questo comando;
ng servire
Quando viene eseguito lo sviluppo di Angular, puoi aprire http://localhost:4200/ sul tuo browser.
Approccio 2: aggiungi Bootstrap ad Angular utilizzando i collegamenti CDN
Questo approccio ti consente di collegarti direttamente al Content Delivery Network (CDN) che memorizza i file Bootstrap.
Possiamo creare diversi pulsanti utilizzando questo approccio su un nuovo progetto. Segui questi passi;
Passaggio 1: crea un nuovo progetto Angular
Chiameremo la nostra app angular-bootstrap-cdn. (Puoi scegliere qualsiasi nome).
Esegui questo comando;
ng nuovo angular-bootstrap-cdn
Una volta terminata l’installazione, cambia directory e apri il tuo progetto in un editor di codice. Puoi usare questo comando per entrare nella directory del progetto;
cd angular-bootstrap-cdn
Passaggio 2: includere il collegamento CDN nel file index.html
Individua il file src/index.html e il collegamento CDN nella sezione head.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
Passaggio 3: aggiungi il codice Bootstrap al file app.component.html
Individua il file src/app/app.component.html.
Puoi 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: esegui la tua app
ng servire
Domande frequenti
Puoi usare Bootstrap e Angular Material insieme nello stesso progetto?
SÌ. Bootstrap e Angular Material sono librerie UI create per lo stesso scopo. Tuttavia, non dovresti utilizzare entrambe le librerie quando hai a che fare con lo stesso componente, poiché è probabile che si blocchino. Ad esempio, se desideri creare una pagina di accesso, scegli una delle due in base ai componenti disponibili.
Quale versione di Bootstrap è compatibile con Angular?
La versione corrente di Bootstrap, al momento della stesura di questo documento, è la v5.3.0-alpha2. D’altra parte, l’attuale versione di Angular è Angular 15. Qualsiasi cosa da Bootstrap 4 è compatibile con varie versioni di Angular. Tuttavia, controlla sempre la documentazione sui siti Web ufficiali di Bootstrap e Angular quando combini le due tecnologie
Quali progetti puoi creare utilizzando Bootstrap e Angular?
Non ci sono limitazioni sulla natura delle applicazioni che puoi creare usando Bootstrap e Angular. Puoi utilizzare i due per creare applicazioni a pagina singola, siti Web di e-commerce, piattaforme social, dashboard e pannelli di amministrazione. Puoi anche utilizzare Angular con il framework Ionic per creare applicazioni mobili.
Angular è un framework JavaScript o TypeScript?
Angular è un framework JavaScript. Tuttavia, Angular è scritto in TypeScript, un superset di JavaScript. TypeScript introduce nuove funzionalità che non sono disponibili in JavaScript. Puoi quindi utilizzare Angular sia con le app TypeScript che Angular.
Conclusione
Ora puoi utilizzare comodamente due dei framework front-end più popolari, Angular e Bootstrap, per creare varie applicazioni.
La scelta dell’approccio dipenderà dal caso d’uso e dal tipo di app che desideri creare.
Anche se l’approccio CDN sembra semplice, presenta anche diversi aspetti negativi. La sfida principale è la sicurezza della tua app, poiché gli hacker possono utilizzare i CDN per inviare script dannosi al tuo sito web.
L’installazione di Bootstrap tramite NPM ti dà il controllo sul codice che includi nella tua applicazione. Tuttavia, questo approccio può richiedere molto tempo in quanto è necessario scaricare tutte le dipendenze.
Scopri come aggiungere Bootstrap a un’app React.