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
Reactive form tipizzati con modellazione del FormBuilder in Angular
Sfruttare al massimo i topic space di Event Grid MQTT
Utilizzare database e servizi con gli add-on di Container App
Utilizzare la libreria Benchmark.NET per misurare le performance
Semplificare il deployment di siti statici con Azure Static Web App
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Specificare il versioning nel path degli URL in ASP.NET Web API
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Implementare l'infinite scroll con QuickGrid in Blazor Server
Utilizzare politiche di resiliency con Azure Container App
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Elencare le container images installate in un cluster di Kubernetes