Le istruzioni illustrate per la creazione di un progetto Angular non fanno riferimento ad un sistema operativo in particolare. L’installazione di Node.js e Yarn può essere diversa fra le piattaforme Linux e Windows, ma successivamente i comandi presentati in questa guida sono validi sia per l’uno che per l’altro ambiente.
Prerequisiti
1. Node.js
Download da https://nodejs.org (consigliata la LTS); controllare la corretta installazione eseguendo, da un terminale, il seguente comando:
node -v
2. Yarn
Download da https://yarnpkg.com/lang/en/docs/install (scegliere la piattaforma relativa); controllare la corretta installazione eseguendo, da un terminale, il seguente comando:
yarn -v
Cos’è Yarn? Perché usarlo?
Yarn è un gestore di dipendenze, un package manager, proprio come NPM. In questa guida viene favorito Yarn ad NPM poiché Yarn è, al momento, un package manager più efficiente di NPM nella gestione delle dipendenze di un progetto, inoltre è anche più veloce. I repository a cui fa riferimento sono sempre gli stessi utilizzati da NPM, quindi la differenza, nell’utilizzo, è minima.
Creazione ed inizializzazione progetto
1. Installare Angular-CLI (command line interface) tramite yarn:
yarn global add @angular/cli
NB: per chi opera in ambiente Unix, si suggerisce di eseguire questo comando come root, usando quindi “sudo”.
In questo modo le funzionalità di Angular-CLI saranno disponibili a livello globale all’interno del nostro sistema operativo. Controllare la corretta installazione eseguendo, da un terminale, il seguente comando:
ng version
2. Creare un nuovo progetto tramite la CLI appena installata. Dopo essersi posizionati, tramite terminale, nella cartella dove si vuole creare il progetto, eseguire il seguente comando:
ng new <nome-progetto> --style=scss --skip-install
Angular-CLI si premura di creare una nuova cartella dove posiziona tutti i file di progetto iniziali, inoltre inizializza il progetto per poter essere versionato tramite Git (se si visualizzano i file nascosti all’interno della cartella di progetto, si nota infatti la presenza della cartella .git).
Le due opzioni che sono state specificate nel comando servono, rispettivamente, per impostare l’estensione dei fogli di stile come scss (e non css) e per impedire alla CLI di installare le dipendenze base del progetto tramite NPM (perché, come abbiamo detto prima, vogliamo che le dipendenze siano gestite tramite Yarn 😉 ).
Perché SCSS e non solo CSS?
SCSS è una sintassi di SASS (un pre-processore CSS), il quale ci permette di personalizzare lo stile tramite l’uso di variabili e altre funzionalità che fanno moooolto comodo ad uno sviluppatore. Inoltre è un sovrinsieme del CSS, quindi volendo è ancora possibile scrivere solamente CSS, e compila il risultato del ‘codice’ scritto nei fogli .scss in CSS tramite un preprocessore, rendendolo leggibile da ogni browser.
Se si è interessati ad approfondire le potenzialità di SASS/SCSS, ulteriori dettagli sono disponibili a questo sito.
3. Impostare Yarn come package manager del progetto
Aprire il file angular.json ed aggiungere la seguente proprietà:
"cli": {
"packageManager": "yarn"
}
Angular json (1)
Angular json (2)
4. Possiamo ora installare le dipendenze del progetto. Sempre da terminale, posizionati nella root della cartella di progetto, lanciamo il comando:
yarn install
yarn install
Una volta completata questa operazione, si può notare la presenza di un nuovo file, lo yarn.lock. In questo file vengono specificate quali sono le versioni attualmente installate delle varie dipendenze, viene sfruttato da Yarn per mantenere un’installazione consistente tra le varie macchine (se il progetto è sviluppato da più persone).
La prima volta che viene lanciato questo comando viene creata anche la cartella ‘node_modules’, dove vengono scaricati i file delle dipendenze (sorgenti e altri file utili).
Primo avvio del progetto Angular
Siamo ora pronti per poter avviare il nostro progetto. Possiamo utilizzare sia il comando ‘ng serve’, sia il comando ‘yarn start’.
Si consiglia di utilizzare quest’ultima annotazione. È infatti possibile poter definire dei comandi personalizzati all’interno del file package.json (che è il file nel quale sono specificate le dipendenze del progetto) nella proprietà “scripts”. Di partenza sono già disponibili alcuni comandi, tra i quali il comando “start”, che altro non è che l’esecuzione del comando “ng serve” dell’Angular-CLI.
Avviamo quindi il progetto lanciando il comando:
yarn start
Una volta che il comando avrà finito di compilare il progetto, visitando localhost:4200 (viene indicato anche nel log del comando in console) sarà possibile navigare la nostra applicazione.
Angular localhost
Concludo questo articolo fornendo un link alla guida Getting Started ufficiale di Angular, molto chiara ed intuitiva, dove viene fatto anche un accenno alla struttura dei file di progetto.
Nei prossimi articoli vedremo come poter aggiungere un certo stile a questo progetto ed alcune linee guida sul come suddividere le varie aree della nostra applicazione.