Angolare 2 in 10 minuti

Il modo in cui oggi possiamo sviluppare applicazioni ha ridotto notevolmente la complessità degli sviluppi e, nonostante includano nuove tecnologie che a prima vista possono sembrare un po' complicate, in realtà aiutano non solo a costruire applicazioni migliori ma anche ad essere adattate alle attuali esigenze di usabilità.

Una di queste tecnologie che possiamo usare è AngularJS, che è un framework MVW (Model-View-Qualunque cosa) che si traduce come Model-View-Whatever-works-for you, si basa su JavaScript e ci consente di fornire i nostri documenti HTML caratteristiche statiche della funzionalità dinamica e per utilizzare il attacchi per iniettare dati nel nostro HTML utilizzando le direttive proprie del framework.

Angular funziona abbastanza bene, ma ne abbiamo una nuova iterazione e consente di estendere molto di più le funzionalità del framework, quindi vediamo come possiamo iniziare a utilizzare Angular 2 in soli 10 minuti.

1. Ottenere TypeScript e Angular 2

Per eseguire questa implementazione lavoreremo nel modo più ottimale possibile, per questo useremo Dattiloscritto che è un linguaggio che permette di estendere le funzionalità di JavaScript per focalizzarlo sull'uso di classi e oggetti.

Per ottenere così tanto Dattiloscritto Che cosa Angolare 2 è necessario che abbiamo Nodo.js, così come il suo gestore di pacchetti sul nostro computer, se ancora non li abbiamo puoi dare un'occhiata al primi passi con Node.js in questo tutorial.

Una volta che abbiamo Nodo.js e il gestore di pacchetti NPM possiamo eseguire i comandi per ottenere ciò di cui abbiamo bisogno:

 npm install -g tsd@^0.60 tsd install angular2 es6-promise rx rx-lite 

Inoltre dobbiamo installare il compilatore Dattiloscritto poiché il browser non riconosce i file .ts:

 npm install -g typescript@^1.5.0-beta

Una volta eseguito, dovremmo vedere da console l'installazione dei moduli, del compilatore e delle librerie del framework.

INGRANDIRE

Infine, dobbiamo solo installare un server locale, per eseguire la nostra applicazione in modo professionale, per questo nella nostra console e tramite NPM eseguiamo quanto segue:

 npm install -g http-server

2. Costruire la nostra applicazione

Una volta che abbiamo tutto il necessario per il funzionamento della nostra applicazione creiamo una cartella dove avremo i file del progetto, possiamo chiamarla angolare10min, e all'interno creeremo un file chiamato application.ts e il nostro solito index.html.

La prima cosa che faremo è aggiungere le classi e i componenti al nostro file application.ts, per questo la prima cosa che dobbiamo fare è importare Angolare 2 come segue:

 import {Component, View, bootstrap} da 'angular2 / angular2';

Per verificare il funzionamento del nostro compilatore nella cartella del nostro Progetto eseguiremo quanto segue:

 tsc --watch -m commonjs -t es5 --emitDecoratorMetadata application.ts

Con quello che dovremmo ricevere da console che la compilazione è stata completata con successo e che è anche in attesa di modifiche nel file, cioè per aver usato il parametro -watch.

INGRANDIRE

Ora creiamo il nostro componente, dove dichiareremo il selettore che useremo nel nostro codice HTML, così come la nostra vista in cui includeremo il modello in cui inseriremo le modifiche.

 @Component ({selector: 'my-app'}) @View ({template: ''})

Poiché il nostro compilatore sta osservando le modifiche e ne abbiamo incluse alcune, è normale che vediamo attività nella nostra console.

Ora non ci resta che fare la dichiarazione della nostra classe e inizializzare gli oggetti all'interno del costruttore che saranno quelli che verranno poi svuotati nella vista. Infine utilizziamo la funzione bootstrap() che si occuperà del rendering dei componenti sulla nostra pagina.

 class myComponent {nome: stringa; costruttore() {this.name = 'Jonathan'; }} bootstrap (myComponent);

Abbiamo già finito il nostro codice Typescript, e se controlliamo nella nostra cartella dovremmo avere un JavaScript che è il risultato della nostra compilazione del .ts.

INGRANDIRE

3. Costruire l'HTML

Infine, dobbiamo costruire il HTML, effettuare le dovute importazioni oltre ad includere i selettori che dichiariamo nel nostro file .ts, per questo inseriremo i system.js, che ci permetterà di svolgere il importare del nostro file, vediamo il contenuto del nostro HTML:

 Angolare 2 in 10 minuti 

Fatto ciò, non ci resta che eseguire il nostro server ed eseguire la nostra applicazione, per questo fermiamo il compilatore ed eseguiamo il server con il seguente comando:

 http-server

Questo imposterà un server in host locale: 8080 e ci permetterà di accedere alla nostra applicazione.

Vedremo i dati definiti nel nostro file Dattiloscritto sono quelli iniettati nella nostra applicazione, in questo modo separiamo la logica della nostra applicazione e possiamo avere un documento HTML pulito che gestisce solo i selettori che abbiamo creato grazie a Angolare 2, offrendoci un'applicazione che funziona in modo più ottimale ed efficiente utilizzando il minimo sforzo possibile.