Les fonctionnalités de Twig avec AngularJS: angular-twig-pack

Depuis que je travaille avec AngularJS, j'ai entendu beaucoup de gens comparer le Framework avec divers moteurs de template... Et il en existe! La liste (non-exhaustive) de wikipedia: Template_engine_(web) en est la preuve. Malheureusement, Wikipedia ne nous numérote pas ce tableau, heureusement que la console est là:

> document.querySelectorAll('.wikitable tbody tr').length

89

Bon ... Trêve de plaisanterie, passons aux choses sérieuses. Je me suis dit pourquoi ne pas prendre un moteur de template existant et créer un pack de directives, filters et services pour ne pas trop dépayser les puristes.

Kezako

Pour cet exercice, j'ai choisi le Framework Twig (uniquement car je l'ai déjà utilisé et surtout car j'adore les couleurs du site: http://twig.sensiolabs.org/).

Du coup, j'ai créé un projet GitHub : angular-twig-pack. J'ai également fait une démo disponible sur le repo pour tester les différentes fonctionnalités. Le projet n'a rien d'extraordinaire niveau programmation, c'est uniquement un pack qui montre qu'AngularJS peut facilement être adopté par tous les développeurs ... avec un peu de bonne volonté :-D

Les modules

Pour regrouper et organiser les différentes fonctionnalités de ce pack, j'ai utiliser les modules d'AngularJS. La notion de module est vraiment très intéressante pour notre cas. Elle permet de regrouper plusieurs modules en un seul twig ce qui rend modulaire notre développement.

Je me suis largement inspiré des différents packs disponible pour AngularJS : AngularUI et AngularUI Bootstrap entre autres.

Je vous invite à lire ce bref article qui résume assez bien les modules AngularJS, leurs fonctionnements et leurs rôles: I.T. Aware.

angular-twig-pack implémente des filters, des directives et un service. Ces différentes entités contiennent et mettent à disposition les fonctionnalités du Moteur de Template Twig que j'ai trouvées intéressantes d'intégrer.

La directive for

Cette directive est assez sympathique car elle intègre quelques contraintes.

La première est celle d'être à l'écoute des différentes variables passées en paramètre. Il faut pour cela utiliser la méthode $watch disponible dans l'API d'AngularJS. Cette méthode permet d'écouter tous changements sur une variable afin d'exécuter une méthode. Dans notre cas, de recalculer les conditions et les variables du for.

La seconde vient du fait que l'on peut dans l'expression de la directive définir à la fois des variables du scope, une expression qui se traduit par un range et l'utilisation possible de filter dans cette expression. Pour fonctionner, j'ai utilisé les expressions régulières (un petit outil en ligne pour tester les regex: http://www.pagecolumn.com/tool/regtest.htm) ainsi que la méthode $compile d'AngularJS, qui permet d'utiliser pleinement le moteur de template.

La démo! La démo!

Dernière petite chose avant la démo, la liste des fonctionnalités de ce pack.

Filters:

• url_encode
• json_decode
• title
• capitalize
• upper
• striptags
• join
• reverse
• length
• sort
• default
• keys
• escape
• abs
• nl2br
• number_format
• slice
• trim
• divisibleby
• even
• odd

Directives:

• for
• if (if/elseif/else)
• macro (macroSet et macroGet)

Service:

• twig.random
• twig.divisibleby
• twig.even
• twig.odd

Enfin la démo! Bon alors pour les gens qui ne veulent pas cloner le projet et le lancer en local, voici le lien de la démo: FRAngular_angular-twig-pack

GitHub: http://firehist.github.com/angular-twig-pack/

J'attends vos retours, remarques, suggestions, etc. :-D

Bon dév'