AngularJS 2 Quickstart

La nuova versione di AngularJS ha provocato diverse reazioni. Tra coloro che pensavano che era assolutamente necessario ‘evolvere’ il framework verso il supporto per i nuovi Browser, utilizzando ECMAScript 6.
Per nuovi Browser intendiamo i browser “evergreen” che vengono continuamente aggiornati con le ultime versioni. Questo fa si che non dobbiamo fare i salti mortali per poter utilizzare tutte le splendide funzionalità che il nostro framework preferito ci mette a disposizione.
E’ importante che benché il codice di Angular 2 utilizzi la versione 6 di ECMAScript, i browser ancora non supportano tale versione di questo linguaggio di scripting, quindi utilizzeremo un compilatore che permette di tradurre tutto nella versione ES5 in modo che il codice possa girare tranquillamente in tutti i browser che supportano tale versione del linguaggio.

Iniziamo i lavori creando la cartella che ospiterà il nostro progetto sulla nostra macchina:

> mkdir angular2-quickstart
> cd angular2-quickstart

Una volta dentro la nostra directory appena creata, possiamo clonare il progetto su GitHub che ci permetterà di scaricare sulla nostra macchina tutto il codice necessario per far funzionare ciò che andremo a scrivere (compresa la libreria es6-shim.js che permetterà la traduzione da ES6 a ES5).

> git clone https://github.com/angular/quickstart.git
> cd quickstart

All’interno della root del progetto appena scaricato possiamo trovare la gerarchia delle librerie che ci permetteranno di far girare la nostra prima applicazione AngularJS 2.

Gerarchia Angular 2 Quickstart Project

Nella root creare due file che ospiteranno rispettivamente la pagina HTML iniziale del nostro progetto index.html e il codice Angular app.js (usiamo app.js invece di app.es6 perché si potreste avere problemi col vostro editor che non riconoscerà il file e non vi farà l’highlighting della sintassi).

Nel file app.js scrivere:

import {Component, Template, bootstrap} from 'angular2/angular2';
 
// Annotation section
@Component({
  selector: 'my-app'
})
@Template({
  inline: '<h1>Hello {{ name }}</h1>'
})
 
// Component controller
class MyAppComponent {
  constructor() {
    this.name = 'World!';
  }
}
 
bootstrap(MyAppComponent);

La prima cosa che salta agli occhi è l’utilizzo delle annotazioni (@Script) per definire le varie parti che compongono la nostra app. Tale funzionalità non è presente in modo nativo in JavaScript.

Per una prima comprensione dell’utilità di utilizzare @Script si veda il seguente esempio:

ES6:

import * as rtts from 'rtts';
 
class MyClass {
  constructor(name, list) { }
}
 
MyClass.parameters = [
  {is: rtts.string}, 
  {is: Array}
];

@Script:

class MyClass {
  constructor(name:string, list:Array) {}
}

Che dite? Una bella semplificazione nella scrittura del nostro codice no?

Dopo questa parentesi, continuiamo col nostro esempio.
Dopo aver creato il nostro file col codice scritto in precedenza, dobbiamo sottolineare una caratteristica di Angular 2, ovvero la gestione a Componenti degli elementi che comporranno la nostra applicazione.
Un componente si distingue in de parti:

  1. La sezione “annotata” che permette di definire i metadati (component selector, template) del nostro componente
  2. La sezione del controller definita da una classe ES6 che permetterà al template di leggere le proprietà che verranno interpretate attraverso le doppie parentesi graffe definite nel template (Da notare che avremmo potuto definire il nostro template attraverso un file HTML separato utilizzando la sintassi url: ‘partials/home.html’ inserendo il nostro file html home.html in una sottocartella denominata partial).s

La riga:

bootstrap(MyAppComponent);

permette di “dire” ad angular di caricare il nostro nuovo componente all’interno della sua pagina. Tale funzione prende come parametro il nome di un componente e tutti i suoi figli e ne fa il rendering nella pagina.

Definiamo, ora, la nostra pagina HTML che ospiterà la nostra applicazione.

<html>
 
<head>
    <title>AngularJS 2 Quickstart App</title>
    <script src="/dist/es6-shim.js"></script>
</head>
 
<body>
    
    <my-app></my-app>
    <script>
    // Scrivere i path dei file installati sulla vostra macchina
    System.paths = {
        'angular2/*': '/angular2/*.js', // Angular
        'rtts_assert/*': '/rtts_assert/*.js', // Verifiche a runtime (opzionale)
        'app': 'app.js' // File dove abbiamo definito il nostro componente 'my-app'
    };
 
    // Kick off the application
    System.import('app');
    </script>
</body>
</html>

Come detto in precedenza dobbiamo importare lo script es6-shim.js per permettere ai Browser di interpretare il codice ES6. Dopo aver inserito il tag che definisce il nostro componente, attraverso la libreria Open Source System facciamo l’import di tutte le librerie necessarie per l’interpretazione del nostro codice, che inseriremo come ultimo path attraverso la definizione ‘app’:’app.js’. Infine inseriamo l’istruzione che darà “il via” alla nostra applicazione.

Ora non ci resta che testare. Il test può essere effettuato facendo il deploy del codice appena scritto in un qualunque web server, oppure, se utilizzate l’editor BrachetIO, potete lanciare direttamente il deploy col simbolo del fulmine in alto a destra che creerà per voi un web server temporaneo utilizzando nodeJS e vi permetterà di visualizzare velocemente il vostro codice in azione.

Se non disponete di un HTTP server, potete utilizzare NodeJS (dovete averlo installato sulla vostra macchina), nel seguente modo:

# Dalla root directory che contiene index.html:
npm install -g http-server  # Or sudo npm install -g http-server
http-server                 # Crea un server a localhost:8080
# Aprire il Browser e digitare: localhost:8080/index.html

Well Done Guys!!

Avete appena creato la vostra prima applicazione con Angular 2. Da notare che è ancora in versione alfa, quindi alcune cose potranno cambiare nella versione definitiva.

RSS AngularJob

ddelfio Written by: