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
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Reactive form tipizzati con FormBuilder in Angular
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Sfruttare al massimo i topic space di Event Grid MQTT
Utilizzare le collection expression in C#
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Eseguire operazioni sui blob con Azure Storage Actions
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)