Il primo progetto con Angular 2

di Daniele Bochicchio, in HTML5, Angular 2,

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

Nel codice precedente si può notare come abbiamo definito un tag custom my-app: questo è un componente in Angular2, che è tutto basato su questo concetto, molto simile a quello di controllo nello sviluppo Windows o ASP.NET Web Forms.

Per continuare, dobbiamo creare un file chiamato main.ts all'interno della directory app, dove andremo a definire questo contenuto:

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.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi