Rispetto ad Angular 1.x, il nuovo Angular si presenta diversamente sia sotto l'aspetto estetico che funzionale. La sintassi è completamente nuova e anche internamente il funzionamento è diverso. Buona parte dei concetti e delle funzionalità con cui lo sviluppatore Angular 1.x aveva familiarizzato sono stati eliminati da Angular 2. Ma vediamo con ordine quali sono i cambiamenti rilevanti introdotti con la nuova versione del framework.
Eliminazione di scope e controller
In Angular 1.x gli scope e i controller avevano un ruolo cruciale nello sviluppo di applicazioni, anche se non sempre il loro utilizzo era appropriato. Quello che era il ruolo di scope e controller ora viene ricoperto interamente dai componenti, come vedremo nel seguito della guida.
Definizione dei moduli
Anche la precedente versione di Angular incoraggiava un'organizzazione modulare del codice mettendo a disposizione il metodo angular.module(). Nella nuova versione questo metodo non è più supportato e la modularità si appoggia sulle funzionalità standard di ECMAScript 2015.
Two-way data binding
Una delle funzionalità più evidenti di Angular è la gestione del two-way data binding, cioè la capacità di riflettere automaticamente i cambiamenti del modello dei dati sulla view e viceversa. Tuttavia questa capacità talvolta non era necessaria ed un suo abuso portava ad avere un peggioramento delle prestazioni, particolarmente evidenti sui dispositivi mobile.
Angular 2 non prevede più il two-way data binding come meccanismo predefinito. Il data binding predefinito è ora unidirezionale, ma è comunque possibile attivare il two-way data binding quando si ritiene sia necessario.
Definizione di direttive
In Angular 2, quelle che erano le definizioni di direttive sono state rimpiazzate utilizzando concetti di ECMAScript 2015 come classi, decoratori e annotazioni. È inoltre cambiata la terminologia permettendo di distinguere tra la creazione di:
- un elemento personalizzato dell'interfaccia grafica (componente);
- un comportamento personalizzato di un elemento esistente del DOM (direttiva).
Rimozione di jqLite
Angular 1.x utilizzava internamente una versione ridotta di jQuery, jqLite, per la manipolazione del DOM. In Angular 2 viene rimossa questa dipendenza preferendo l'accesso diretto al DOM con i metodi nativi ed un conseguente recupero di performance.
Da Angular 1.x ad Angular 2
L'uscita di Angular 2 apre due scenari per gli sviluppatori che desiderano passare dalla precedente versione alla nuova:
- Creazione di una nuova applicazione Angular 2;
- Migrazione di una applicazione Angular 1.x ad Angular 2
Il primo caso è senza dubbio meno problematico, dal momento che l'obiettivo è la creazione di una applicazione del tutto nuova. Tuttavia, chi è abituato ad utilizzare Angular 1.x deve ugualmente aggiornare la propria formazione per non cadere nella trappola di considerare la nuova versione del framework come minor release della versione precedente.
La soluzione migliore per migrare un'applicazione Angular 1.x esistente verso il nuovo framework sarebbe la sua completa riscrittura. È naturale però che, se questo può essere fatto per applicazioni molto semplici, è del tutto improponibile per applicazioni di una certa complessità.
Come abbiamo già detto, purtroppo l'iniziale annuncio della mancata compatibilità tra la versione 1.x e la versione 2 del framework ha creato diverse polemiche e ha spinto alcuni sviluppatori ad indirizzare il loro interesse verso altre soluzioni alternative ad Angular.
Tuttavia, l'iniziale irrimediabile rottura tra le due versioni di Angular è stata mitigata nel corso dello sviluppo del nuovo framework con un'importante novità. Si tratta di upgrade, noto anche come ngUpgrade, un modulo di Angular 2 che consente la convivenza di Angular 1.x e 2 nello stesso progetto applicativo.
In pratica, ngUpgrade consente ad una applicazione Angular 1.x di utilizzare componenti e servizi scritti per Angular 2 e, viceversa, permette di utilizzare direttive Angular 1.x all'interno di un'applicazione Angular 2. Questo facilita sia una migrazione graduale di applicazioni esistenti verso il nuovo framework sia la creazione di nuove applicazioni Angular2 utilizzando componenti già scritti per Angular 1.x.
A solo titolo d'esempio, possiamo utilizzare un componente Angular2 all'interno di un'applicazione Angular 1.x come mostrato dal seguente codice:
import { myAngular2Component } from './myAngular2.component';
angular.module("myApp", [])
.directive("myComponent",
upgradeAdapter.downgradeNg2Component(myAngular2Component);Come possiamo vedere, abbiamo sfruttato il supporto alla modularità di ECMAScript 2015 e TypeScript ed abbiamo utilizzato il metodo downgradeNg2Component() del servizio upgradeAdapter per trasformare un componente Angular2 in una direttiva Angular 1.x. Naturalmente l'integrazione tra Angular 1.x e Angular2 è un argomento complesso che esula dagli obiettivi di questa guida. Rimandiamo pertanto alla documentazione ufficiale per approfondimenti.