AngularJS 1.5: le novità in attesa della stabile (e di AngularJS 2.0)

Nel corso della prima metà di dicembre Google ha rilasciato la release candidate 1.5 della celebre libreria AngularJS. Nonostante si tratti di una RC, le novità introdotte sono già abbastanza chiare e ben delineate, si prevede dunque che entro pochi giorni sarà disponibile anche la versione definitiva. Mentre gli sviluppatori attendono la versione 2.0, al momento ancora in beta, Mountain View ha sorpreso un po' tutti per la quantità di novità introdotte nella 1.5. Alcune di queste ultime rappresenterebbero un ponte per creare un minimo di continuità tra il branch 1.0 e il prossimo 2.0.

Cerchiamo di introdurre le principali novità incluse nella RC a partire da un nuovo strumento: i component. Con questo rilascio viene introdotto un nuovo metodo disponibile sull'oggetto angular "component". Nonostante possa sembrare un nuovo componente, il metodo rappresenta una sorta di alias, in salsa Angular 2.0, per creare direttive sempre di più compatibili con il futuro. Esso permette di creare più facilmente scope isolati e controller bindati tramite la il controller-as, eliminando una volta per tutte le criticità legate alle vecchie direttive che spesso mischiavano l'approccio basato sugli $scope con quello dipendente dai controller.

Innanzitutto la firma del metodo cambia da:

module.directive(directiveName, function);

a

module.component(componentName, options);

Inoltre l'elenco di property, spesso confusionarie, viene ridotto di numero. Le proprietà scope e bindToController vengono soppiantate da bindings. mentre controller e controllerAs possono essere unificate in una nuova property, controller, che non avrà bisogno della definizione del nome in quanto acquisirà di default il nome del componente. Anche la definizione del template cambia, sarà infatti possibile impostare una funzione al posto della solita stringa che verrà invocata con alcuni parametri che possono essere utilizzati all'interno del template stesso (come ad esempio gli $attrs ricevuti).

Ecco un esempio che mette insieme le principali novità:

module.component('calculator', {
bindings: {
value: '='
},
controller: function () {
this.add5 = function add5() {
this.value += 5;
}
this.add10 = function add10() {
this.value += 10;
}
this.add20 = function add20() {
this.value += 20;
}
},
template: function($element, $attrs) {
return [
'<div class="calculator">',
'<input type="text" ng-model="calculator.value">',
'<button type="button" ng-click="calculator.add5();">+5</button>',
'<button type="button" ng-click="calculator.add10();">+10</button>',
'<button type="button" ng-click="calculator.add20();">+20</button>',
'</div>'
].join('');
}
});

Prima della versione 1.5 le direttive potevano usare il transclude solamente in un unico punto di accesso; nel caso fossero richiesti punti di integrazione multipli era necessario implementare logiche custom poco manutenibili e parecchio rischiose in caso di aggiornamento di versione del framework. La 1.5 ci viene incontro permettendo appunto le transclusion multiple.

Grazie alla possibilità di dare dei nomi alle componenti potremo, in fase di definizione della direttiva, decidere dove stampare i vari nodi. Questo un esempio:

<pane>
<pane-title>Some content for slot A</pane-title>
<pane-content>Some content for slot A</pane-content>
</pane>

module.directive('pane', function() {
return {
restrict: 'E',
transclude: { paneTitle: '?titleSlot', paneContent: 'contentSlot' },
template:
'<div class="pane">' +
'<h1 ng-transclude="titleSlot"></h1>' +
'<div ng-transclude="contentSlot"></div>' +
'</div>' +
};
});

Da segnalare infine che la direttiva ng-if è stata migliorata e resa più intelligente. Nel caso di ng-if annidiate non ci saranno più problematiche di performance in quanto verranno valutate solamente quelle strettamente necessarie al rendering.

Oltre a queste modifiche ovviamente ne ne sono altre minori che potranno essere visualizzate nel dettaglio nel changelog ufficiale disponibile su GitHub.

Cosa ne pensate? Apprezzate queste approccio moderato verso la 2.0? Passerete a questa versione o rimarrete in attesa della prossima major?