Come creare un nuovo progetto in Angular

Ora che abbiamo la Angular CLI installata globalmente, possiamo procedere a creare il nostro primo progetto usando il comando ng new:

ng new <app_name>

Dove app_name è il nome della nostra app.

Per cominciare, dovremo rispondere ad alcune domande sul nostro progetto; per lo scopo di questa guida, possiamo utilizzare il linguaggio CSS come linguaggio per gli stili e attivare il server side rendering (ci arriveremo più avanti).

A questo punto la CLI installerà automaticamente i pacchetti npm di Angular e le dipendenze necessarie per avviare il progetto; i file di progetto verranno creati in una nuova cartella omonima.

Ora che abbiamo creato un nuovo progetto, possiamo avviarlo e iniziare lo sviluppo;
anche per questo usiamo la CLI:

cd <app_name>
npm start

oppure

cd <app_name>
ng serve [--open]

serve. Normalmente passiamo da npm per eseguire gli script del progetto, perché i tool di sviluppo di ogni progetto Node sono installati localmente; con Angular, avendo il comando ng disponibile globalmente, è comune scavalcare npm e chiamare direttamente ng serve.

L’opzione –open non fa altro che aprire il browser lanciando la nostra web app su http:\\localhost:4200.

Tutto quello che vediamo al lancio dell’app si trova nel file app.component.html e può essere rimosso per iniziare lo sviluppo.

In questa guida non porteremo avanti un progetto in particolare ma, piuttosto, ci soffermeremo su tutti gli elementi costitutivi del framework con esempi e approfondimenti specifici; con questa premessa, siamo pronti per cominciare con l’elemento architetturale più importante di tutto Angular: le direttive.