Dopo aver visto nell’articolo precedente come creare ed inizializzare un progetto in Angular, vediamo ora come è possibile aggiungere un po’ di stile senza dover definire da noi le regole del css.
Dipendenze
Per poter raggiungere il nostro scopo però, dobbiamo introdurre l’argomento delle dipendenze di progetto. Per funzionare correttamente, infatti, la nostra applicazione ha bisogno di appoggiarsi a codice esterno, contenuti all’interno di pacchetti o dipendenze. Anche Angular è una dipendenza esterna che il nostro progetto importa per poterne sfruttare le funzionalità.
La lista di dipendenze presenti all’interno del progetto sono visibili e consultabili, insieme alla loro versione, nel file `package.json` nella cartella root.
All’interno di tale file sono suddivise, in due proprietà differenti, le dipendenze che servono all’applicazione per poter essere eseguita in generale anche in produzione (proprietà dependencies) e quelle che invece sono necessarie solo in ambiente di sviluppo (proprietà devDependencies).
Ora che sappiamo dove andare ad inserire l’indicazione dei pacchetti per usufruire delle funzionalità di terze parti, possiamo andare ad aggiungere la libreria bootstrap al nostro progetto.
Installazione Bootstrap
Bootstrap è il framework CSS più conosciuto in ambito di sviluppo di siti web responsive con la finalità di renderne più facile e più piacevole la navigazione anche su dispositivi mobile.
Seguendo la guida di installazione di Bootstrap, notiamo come possiamo aggiungerlo all’interno della nostra applicazione in diversi modi, come semplice link all’interno del file `index.html`, oppure utilizzando un package manager, metodo che utilizzeremo in questo articolo.
Ricordando che il package manager utilizzato in questi articoli è Yarn, scorrendo la guida possiamo infatti trovare il paragrafo ad esso relativo. Il comando da lanciare, all’interno di un terminale che punta alla cartella di root del progetto, è il seguente:
yarn add bootstrap
E dovrebbe produrre un risultato del genere:
Per controllare che l’installazione sia andata a buon fine, possiamo controllare all’interno del file `package.json` se è presente la relativa riga di riferimento alla dipendenza:
Inoltre se Bootstrap è stato correttamente installato, all’interno della cartella `node_modules` nella root del progetto, sarà presente la relativa directory (per chi usa Visual Studio Code potrebbe essere necessario eseguire l’aggiornamento dell’esplora risorse – comando Refresh Explorer).
Importare Bootstrap
Ora siamo quasi pronti per utilizzare a pieno le funzionalità di Bootstrap nella nostra applicazione, quello che ci manca, a questo punto, è aggiungere il riferimento dei fogli di stile. Per fare ciò abbiamo due strade percorribili:
- Aggiungere il riferimento all’interno del file `angular.json`
- Importare i fogli di stile di Bootstrap all’interno del foglio di stile globale della nostra applicazione, lo `styles.scss`
angular.json
All’interno del file, ricercare la proprietà styles ed aggiungere la riga “node_modules/bootstrap/dist/css/bootstrap.min.css”.
styles.scss
Poiché ogni modifica che avviene nel file `angular.json` comporta il dover fermare e riavviare l’esecuzione del comando `yarn start`, consigliamo di usare questo secondo metodo per inserire il riferimento di Bootstrap. All’interno del file `styles.scss`, che è foglio di stile globale dell’applicazione, sfruttiamo le funzionalità del linguaggio SASS per importare il riferimento ai file di Bootstrap, aggiungendo la seguente riga:
Fatto ciò avremo ora a disposizione quelle che sono tutte le classi predefinite e i componenti che possiamo utilizzare nei nostri file HTML per rendere esteticamente più belle le nostre pagine.
Provare per credere!
Risultato
Una volta completati questi passaggi possiamo da subito vedere un cambiamento nella nostra applicazione. Infatti se prima quello che vedavamo nel browser era:
Ora invece la nostra applicazione si presenta così:
Ora che tutto è pronto, non resta che sviluppare la nostra applicazione facendo buon uso di questo utilissimo strumento.
Link utili:
– Documentazione Bootstrap