Immagine descrittiva del post

In questo articolo voglio farti vedere come creare un’applicazione web Angular. Imparerai ad utilizzare Angular CLI per creare un nuovo progetto Angular e come avviarlo.

 

Se sei arrivato fin qui avrai già sentito parlare di Angular. 

No? Rinfreschiamoci velocemente le idee ..

Angular è un framework molto popolare, open-source, utilizzato per lo sviluppo di applicazioni facendo uso di linguaggi web come Javascript, Typescript e HTML.

Oltre a semplificare lo sviluppo di applicazioni web (godendo, tra le altre cose, anche di una forte community di sviluppatori), Angular, garantisce ottimi risultati in termini di prestazioni.

Per questo, ma non solo, possiamo concludere che Angular è un ottimo strumento per lo sviluppo front-end di Applicazioni Web.

Ora che ci siamo schiariti le idee, andiamo subito a vedere come iniziare ad utilizzare Angular.

Ti anticipo che si tratta di qualcosa di molto semplice e veloce.

Iniziamo?

 

Creare un nuovo progetto Angular

Il modo più veloce per creare un nuovo progetto Angular è utilizzando Angular CLI.

 

Installare Angular CLI

La prima cosa da fare è installare Angular CLI globalmente.

La documentazione sul sito ufficiale ci propone un’istallazione tramite npm, utilizzeremo questo per installare Angular CLI nel computer. Se non è già stato fatto, installare nodejs scaricando l’installer da questa pagina oppure via package manager.

Apri il terminale e digita il comando:

npm install -g @angular/cli

Al termine, verifica l’istallazione di Angular e Angular CLI con il comando ng –version. Se otterrai un risultato come quello in figura, l’installazione è completa e, da questo momento, potrai usare Angular CLI.

Screenshot di esempio
 

Utilizzare Angular CLI per creare una nuova applicazione web Angular

Creiamo un nuovo progetto Angular generandolo con Angular CLI.

Vai all’interno della cartella nella quale vuoi salvare il progetto utilizzando il terminale e lancia il comando:

ng new my-first-project

Questo creerà una cartella col nome del progetto (my-first-project) con all’interno il contenuto dell’applicazione generato.

Appena lanciato il comando, verrà chiesto di selezionare alcune opzioni:

  • utilizzare Angular routing – y (digitare e premere invio)
  • stylesheet da utilizzare – scss (spostarsi giù con le frecce e premere invio)

cosi facendo, scegli di utilizzare Angular Routing (scopri di più su Angular Routing) e lo stylesheet SCSS come stile. La scelta, comunque, dovrebbe essere in base alle proprie preferenze, non è importante in questo momento.

Al termine, puoi lanciare l’applicazione web Angular con uno dei due comandi qui sotto.

ng serve
npm start
Schermata di esempio
Pagina Home generata da Angular CLI
 

Già fatto? Si, proprio cosi!

Ti avevo detto che creare una nuova applicazione web Angular sarebbe stato facilissimo. Parola mantenuta!

 

Aprire un progetto Angular con Visual Studio Code

Prova ad aprire il progetto all’interno di un’ambiente di sviluppo per osservarne la struttura.

Quello che consiglio è di utilizzare Visual Studio Code, poiché, anche se esistono altri IDE altrettanto efficienti, lo uso personalmente da tempo con successo e garanzia. Puoi scaricarlo da qui.

In ogni caso, apri il progetto all’interno del tuo IDE e espandi la cartella app dentro src: è qui che andrai ad aggiungere e modificare i vari componenti della tua applicazione.

I file che iniziano con app sono quelli di default dell’applicazione. Ad esempio, app.component.html è il template che vedi all’avvio dell’applicazione, la welcome page vista prima.

Schermata di esempio
Console Visual Studio Code

Ad ogni modifica effettuata l’applicazione viene ricompilata automaticamente e la pagina viene ricaricata per la nuova visualizzazione, operazione leggibile anche dal terminale sulla quale è avviata. Come esempio, prova a cancellare il contenuto del file app.component.html e sostituiscilo con:

<a href="https://laterale.cloud">LateraleCloud</a>

Salva le modifiche osservando i log nel terminale. All’arrivo della scritta Compiled successfully torna sul browser e troverai la modifica apportata.

 

Cosa fare ora?

Puoi utilizzare questa prima bozza di applicazione come fondamenta sulla quale sviluppare un’applicazione web complessa con Angular. Mica pensavi di avere già finito?? All’interno del blog trovi altri articoli utili allo sviluppo della tua applicazione Angular, guarda qui.

Se vuoi rimanere aggiornato sulle nuove pubblicazioni puoi seguire la pagina Facebook del blog.

A proposito! Poco fa ho pubblicato un post in cui ti faccio vedere un esempio di applicazione Angular completo … Dagli un occhio 😉

Link utili:

1 Comment

  1. Hello, every time i used to check blog posts here in the early hours in the break
    of day, since i enjoy to learn more and more.


Add a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *