Ressources pour débuter avec AngularJS

Si vous avez lu mon article précédent, AngularJS est le framework retenu pour un de mes futurs projets de site web mobile.
Je voulais absolument un site web HTML5 et non une application native, pour des raisons d’équipe de développement trop restreinte pour maintenir une multitude d’applications natives, et puis simplement par intérêt pour les technologies que cela nécessite. (Avis intéressant de Four Kitchens sur le sujet)

Pendant un moment, je me suis demandé si AngularJS était adapté au mobile. En fait, il est plus général que ça, et permet de créer des applications Web. Je mélange d’ailleurs les mots « application » et « site », car en JS, ces deux notions, à mon sens, se rejoignent dans la façon de programmer (événementielle, webservices, beaucoup de choses côté client).
AngularJS répond donc au besoin de création de site mobile.

Ressources

Documentation, tutoriaux, vidéos, livre

Base de travail pour votre projet

  • https://github.com/angular/angular-seed : le minimum vital pour démarrer, en gardant la même architecture que celle proposée dans le tutoriel en étapes du site d’Angular. Bien, mais pas modulaire. Il n’y aura rien d’autre qu’un squelette de départ, sans outils annexes.
  • http://joshdmiller.github.io/ng-boilerplate/#/home : ici, c’est l’inverse, le projet propose d’emblée de nombreux outils pour démarrer. Il met en avant un structure modulaire (chaque module est « indépendant », facilement copiable d’un projet à un autre par ex). Il intègre un module pour améliorer le routing de base d’AngularJS. Un peu plus difficile à utiliser car plus complet, il apporte des outils indispensables par la suite, notamment bower et grunt.
    Côté grunt, Il vous faudra sans doute adapter le Grunfile.js pour ajouter des tâches, copier d’autres fichiers vers vos environnements (build/bin), pour coller à votre projet.

 Bower et Grunt

bower vous permet de gérer les dépendances et versions de votre projet, comme le fait Composer en PHP. On renseigne un fichier JSON contenant la liste des librairies et leur version associée (avec des patterns possibles) et bower se charge de trouver la librairie sur github.com, la télécharger dans votre dossier approprié (vendor le plus souvent). Il est de coutume d’exclure le dossier contenant vos librairies de votre gestionnaire de version.

grunt vous permet de réaliser les tâches quotidiennes de votre projet. Exactement comme le ferait un phing (PHP) ou Ant (Java).
Par exemple, il dispose d’un mode « watch« , qui permet, dès qu’un fichier est modifié, de lancer des tâches sur ce fichier. Pratique pour les fichiers LESS ou SASS.
watch fonctionne avec n’importe quelle tâche.
Donc vous pouvez jongler entre les tâches à lancer manuellement, et les tâches « automatiques », lancées dès qu’un fichier est modifié.
Il est possible de lancer les tests unitaires, jsHint automatiquement par exemple, mais pour la concaténation des fichiers et leur compression, mieux vaut ne le faire que manuellement, lorsqu’on souhaite créer le package de production.

 

Ajout de librairies

C’est le cas de tous les frameworks JS et même de tous les frameworks de développement, ils ne suffisent pas, restant des briques de base.
Il faut donc ajouter quelques librairies  : gestion des cookies, du multilingue, du cache, des animations, angular-ui-utils… Tout dépend de vos besoins.

Un annuaire des modules AngularJS existe : http://ngmodules.org/, on y trouve généralement ce dont on a besoin.

 

Un mot sur jQuery
Vous conservez jQuery si vous le souhaitez, sans quoi AngularJS fournira la version jqLite par défaut. Ce qui n’est pas évident, c’est parfois de coder façon « AngularJS » et non « jQuery » quand est très habitué à ce dernier. Je pense pour ma part que je fais encore des erreurs de « bonnes pratiques », mais ça viendra petit à petit à coup de refactoring !