Angular 2 è la nuova versione di AngularJS, rivisto in chiave più moderna. Rispetto alla versione 1, con cui non è direttamente compatibile, introduce diverse novità, tra un supporto più esteso a TypeScript, che rappresenta il linguaggio attraverso il quale Angular 2 stesso viene scritto, e l'uso esteso di componenti.
Ricordiamo che TypeScript aggiunge a JavaScript alcune feature tipiche dei linguaggi object oriented e che il relativo compilatore produce alla fine codice Javascript, non necessitando di un runtime dedicato, in quanto il browser continua ad eseguire normalissimo codice JavaScript.

Dopo aver installato le dipendente ad Angular2 attraverso npm, dovremo referenziare questi file all'interno del nostro documento:

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

Successivamente, dovremo includere lo startup dell'applicazione. Angular 2 utilizza SystemJS per le dipendenze, quindi avremo uno script come questo nel nostro documento:

<script>
  // configuriamo l'app
  System.config({
      packages: {
          app: {
              format: 'register',
              defaultExtension: 'js'
          }
      }
  });
    
  // facciamo partire l'app
  System.import('app/main')
          .then(null, console.error.bind(console));
</script>

Successivamente, nel corpo del documento andremo a referenziare il nostro componente, in questo modo:

<my-app>
  <p>Caricamento in corso...</p>
</my-app>

Per convenzione, SystemJS andrà a cercare i componenti sotto la directory app, con la forma app/main.js.

Il primo componente

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <div>La mia prima app con Angular2</div>
  `
})
exoprt class App {
  
}

Dopo aver compilato il file TypeScript in JavaScript (usando la riga di comando tsc, oppure l'integrazione nativa che quasi tutti gli editor ormai offrono), potremo lanciare la nostra prima applicazione e vedere a video il risultato.
Possiamo notare che il template del componente in questo caso è definito direttamente in linea e che il selettore indica al motore di Angular quando intervenire.

Avremo modo di approfondire questi discorsi nel corso dei prossimi script.