Ciao a tutti e benvenuti a questa nuova guida / introduzione su come creare la vostra prima web app con Angular 2. In questa guida andremo a vedere come installare e creare un ambiente di sviluppo per Angular, e come sviluppare una semplice web app “Hello world”.
Requisiti:
Per seguire questa guida e sviluppare app con Angular 2 avrete bisogno di:
- Node.js e npm: Installazione Windows, Installazione Mac / Linux
- Git: installazione Mac
Che cos’e Angular 2?
Angular 2 è un client side framework ideato da Google e usato per lo sviluppo di applicazioni web. Al giorno d’oggi Angular è il framework JavaScript più usato dai sviluppatori web, offrendo servizi come:
- HTML dinamico
- Rendering molto veloce
- Servizi HTTP
- Components
- Routing
- ES6 / typescript
- Altro…
Struttura di applicazioni Angular 2
Potete trovare un esempio di una semplice web app su questo link, dove potrete esplorare i file principali e farvi un’idea di come è strutturata un’applicazione Angular.
Angular 2 è basato completamente sui Components. Ora vi starete domandando: ‘Ok, ma cosa sono i components?’.
Un component, secondo la documentazione di Angular, è una combinazione di un modello (template) HTML ed una classe che controlla una porzione dello schermo.
In poche parole un Component è una porzione di codice che permette la creazione di widget (moduli) HTML riutilizzabili. Questo permette allo sviluppatore JS di avere una base un codice molto più modulare.
Esempio di un Component in Angular 2
import { Component } from '@angular/core'; @Component({selector: 'my-app',template: '<h1>Hello {{name}}</h1>' }) export class AppComponent { name = 'World'; }
Ora vediamo come installare e come cerare la nostra prima applicazione web con Angular 2.
Il team di Angular ci fornisce un progetto base (quickstart) che ci aiuta a creare la struttura di una tipica app con Angular. Questo quickstart è contenuto in una repository sulla pagina ufficiale di Angular su GitHub.
Per fare il clone della repo potete andare sulla pagina della repo, o potete usare il seguente comando dal Terminal:
git clone https://github.com/angular/quickstart.git primaAppAngular
Questo comando copierà il contenuto di quickstart dentro ad una cartella chiamata primaAppAngular .
Se navighiamo nella cartella possiamo notare che ci sono molti file presenti. Per il nostro progetto non abbiamo bisogno di tutti questi file , quindi possiamo rimuoverli con i seguenti comandi: (Questo passo è optional)
Bash
xargs rm -rf < non-essential-files.osx.txt
rm src/app/*.spec*.ts
rm non-essential-files.osx.txt
Windows
for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /qCome eseguire la nostra prima web app Angular 2
Per prima cosa dobbiamo installare le dependencies che sono specificate nel file package.json
Possiamo installare tutte le nostre dependencies con npm ed il comando:
npm install
Se questo comando fallisce potete provare con:
sudo npm install
Ora siamo pronti per eseguire il nostro dev server che mostrerà il contenuto della nostra web app all’indirizzo localhost:3000
Usiamo il seguente comando per eseguire il dev server:
npm start
Ora se tutto è stato fatto correttamente, possiamo navigare dal browser all’indirizzo localhost:3000 , dove possiamo vedere la scritta 'Hello Angular'.
Ci siamo! Ora avete “installato” Angular2 sul vostro sistema e avete creato la struttura di una app Angular. Siete pronti per seguire le altre guide e tutorial su Angular2, e creare le web app del futuro.
Questo è tutto ciò che occorre per cominciare a sviluppare web app con Angular2. La spiegazione del codice sarà fatta in una nuova guida, quindi rimanete aggiornati.
Potete trovare il codice per questa guida sulla repository ufficiale di devnews.it.
Grazie per aver seguito la guida e alla prossima :)
