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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare la session affinity con Azure Container Apps
Gestire i null nelle reactive form tipizzate di Angular
Usare un KeyedService di default in ASP.NET Core 8
Utilizzare Model as a Service su Microsoft Azure
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Eseguire operazioni sui blob con Azure Storage Actions
Ricevere avvisi su metriche dei server Azure Arc
Evitare la command injection in un workflow di GitHub
Creare form tipizzati con Angular
C# 12: Cosa c'è di nuovo e interessante
Registrare servizi multipli tramite chiavi in ASP.NET Core 8