Realizato da

Pubblicato il

angular

javascript

frontend

framework


introduzione angular 2 guida italiano prima web app e installazione

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:

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 /q

Come 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 :)

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)