Angular 1.2 : le point sur les nouveautés !

Le 4 juillet 2013, Matthieu Lux publiait un article sur InfoQ traitant de ce qui était prévu pour les versions 1.2 et 2.0 d’AngularJS. Le 7 mars 2014, une version 1.3.0 beta est sortie, il est donc temps de faire le point sur les fonctionnalités qui ont effectivement été ajoutées à la dernière version stable.

Les animations

L’un des points importants était la gestion des animations : cette fonctionnalité a effectivement été mise en place dans le framework, et ce depuis la version 1.1.4. Les différentes releases de la 1.2. ont cependant refondu l’ensemble et déprécié les services créés dans la 1.1. La version 1.2 permet de lier très simplement des animations CSS3 à des événements tels que des modifications de classes CSS, des ajout/suppression d’objets dans un ng-repeat, l’insertion de vues, et bien d’autres (voir tableau ci dessous). L’ajout de transitions se fait très simplement en liant un élément à une classe CSS, et en respectant des conventions de nommages pour lier une classe à un événement (de type “entrée d’un élément” ou “sortie d’une élément” par exemple). Le peu de code à écrire correspond principalement à celui des classes CSS, ce qui est confortable pour le développeur, et respecte le principe de “separation of concerns” (il n’y a pas de code javascript à écrire pour des problématiques d’animations).

Image 1 : liste des directives déclenchant des animations
Vous pouvez voir des exemples simples d’animations rendues possibles avec la version 1.2. sur ces plunkr :
Animation lors d’ajout/suppression
Animation lors du chargement d’une view
Animations et directives

La documentation

Le deuxième chantier mentionné dans l’article était la refonte de la documentation, qui a également été accomplie depuis. A noter la création d’un guide du développeur très complet comprenant entre autre : un tutoriel officiel, une vidéo d’apprentissage, ainsi que de nombreux liens utiles à la prise en main du framework, tels que le chat IRC pour obtenir de l’aide, les vidéos utiles, les livres… Les outils gravitant autour d’AngularJS sont également listés : les frameworks de tests (Karma, Protractor) et de debugging (Batarang). La possibilité de naviguer entre les documentations des différentes versions d’AngularJS était également très attendu.

Amélioration de la sécurité

Lors d’un talk à Devoxx 2013 sur les nouveautés d’AngularJS 1.2, Brian Ford et Igor Minar ont présenté les améliorations du framework en terme de sécurité. Ces améliorations concernent :
– La vérification de l’origine des templates chargées, notamment si celles-ci sont chargées depuis un autre serveur. Il est possible de définir des listes d’url autorisées.
– Le support des CSP (Content Security Support), qui restreignent l’origine du contenu (tel qu’un script javascript) à une liste de sites autorisés, afin d’éviter les failles XSS.
– SCE : Strict Contextual auto-Escaping, permet d’échapper automatiquement les entrées de l’utilisateur pour qu’elles ne soient pas interprétées comme du code HTML/Javascript. Il existe cependant une directive, ng-bind-html qui permet à l’utilisateur de rentrer du code HTML. Ce code est vérifié pour éviter des attaques de type XSS.

Amélioration des messages d’erreurs

Les messages d’erreur sont également plus clairs et donnent plus d’informations sur les causes d’un bug. Une documentation des erreurs a été produite pour permettre d’identifier rapidement les causes de l’apparition d’un message d’erreur, le lien vers cette documentation est fourni lors de l’apparition du message. Les messages d’erreurs n’apparaissent pas dans la version minifiée d’AngularJS car ils prenaient trop d’espace dans le code, cependant lors de l’apparition d’un bug, l’identifiant de l’erreur est renvoyé et permet de reconstruire le message d’erreur. En développement, il est donc conseillé d’utiliser la version non minifiée pour avoir les messages d’erreur affichés dans la console.

Image 2 : documentation des erreurs

Et d’autres fonctionnalités en pagaille

Parmi les autres fonctionnalités que vous pouvez glaner parmi le CHANGELOG.txt du github d’AngularJS, j’ai sélectionné : – L’apparition des directives ngCopy, ngCut, ngPaste, qui permettent d’évaluer des expressions lorsqu’un événement du type copier/coller/couper intervient. – Le support de jQuery 1.10.x – Le support des liens de type tel: dans les href – L’amélioration du filtre de base, qui peut maintenant faire des recherches sur des objets imbriqués
Sources principales :
Présentation de Brian Ford et Igor Minar du Devoxx 2013 : video
Changelog d’AngularJS sur github : github
Un article sur comment faire des animations avec Angular 1.2, écrit par Matias Niemelä : article
L’article de Matthieu Lux sur les nouveautés dans la 1.2 et les nouveautés prévues de la 2.0 : article
Guide développeur d’AngularJS sur les animations : guide