Améliorez votre processus de développement AngularJS avec Yeoman – partie 1

Développement AngularJS avec Yeoman

Pendant le développement d’une application, certaines tâches, comme la création de packages ou les tests, doivent être effectuées fréquemment. Même si celles-ci ne sont pas forcément très longues, les réaliser manuellement prend du temps qui pourrait être consacré à autre chose. Et je ne parle pas du risque d’erreur, qui lui-même implique une nouvelle perte de temps.

Yeoman répond à cette problématique. Voyons un aperçu de ses fonctionnalités, appliquées à AngularJS dans cette grande saga… en deux parties.

Yeoman ?

Développement AngularJS avec Yeoman : le logo de Yeoman

Yeoman est un ensemble de trois outils utiles pour le développement Web en général : Yo, Grunt et Bower.

Il nécessite Node.js pour fonctionner, comme l’éditeur Brackets dont je vous ai déjà parlé.

Pour installer Yeoman, une fois Node.js téléchargé et installé, il suffit de saisir en ligne de commandes :

npm install -g yo grunt-cli bower

Et c’est tout !

Yo

Développement AngularJS avec Yeoman : le logo de YoYeoman peut vous aider à travailler avec la plupart des technologies Web actuelles.

En fait, cette capacité réside en l’installation et l’utilisation de générateurs utilisables avec Yo.

Ainsi, pour travailler avec AngularJS, il est nécessaire d’installer le générateur de code approprié :

npm install -g generator-angular

Dès lors, vous pourrez généré automatiquement du code pour faire des applications AngularJS.

De nombreux autres générateurs sont disponibles sur le site de Yeoman, aussi bien officiels que provenant de la communautés des utilisateurs. Il y en a pour tous les goûts.

Et si vous ne trouvez pas votre bonheur, vous pouvez toujours créer votre propre générateur, en utilisant le générateur… de générateurs.

Yo Angular

Prenons par exemple le générateur AngularJS.

Pour créer une nouvelle application, dans un nouveau dossier créé pour l’occasion, il suffit de saisir :

yo angular:app <nom de l'application>

Une fois que la commande a rendu la main, le dossier contient :

  • un dossier app qui contient les fichiers de l’application en elle-même : le fichier index.html tout prêt, un contrôleur et une vue d’exemple, Twitter Bootstrap, …
  • un dossier test qui contient les fichiers de test de l’application
  • un dossier node_modules et des fichiers de configuration de yeoman

Et vous pouvez déjà voir le résultat en live. Il suffit de saisir, toujours dans le dossier du projet (pas dans app donc) :

grunt serve

Vous pouvez également créer d’autres composants pour votre application AngularJS.

Par exemple, pour ajouter un contrôleur :

yo angular:controller <nom du contrôleur>

Dans ce cas, le fichier contrôleur est créé au bon endroit, avec le suffixe Ctrl et un code d’exemple. Le fichier index.html est modifié pour faire appel au contrôleur, et le fichier de test est généré.

Pour créer un service $resource :

yo angular:factory <nom du service>

Ici aussi, le fichier service est créé, ainsi que la fiche de test, et index.html est modifié.

Pour créer une nouvelle route :

yo angular:route <nom de la route>

Ici, ce sont la vue, le contrôleur et la fiche de test qui sont créés, le contrôleur est référencé dans index.html, et surtout la route est décrite dans app.js.

Toutes les fonctionnalités du générateur dédié à AngularJS sont décrites sur le site de yo angular.

Bower

Développement AngularJS avec Yeoman : le logo de BowerBower est un gestionnaire de librairies JavaScript. Il permet de récupérer la version la plus appropriée aux autres librairies et frameworks déjà installés.

Pour chercher une librairie JavaScript, vous pouvez passer par le dépôt Bower ou par la ligne de commande :

bower search <mots-clefs>

Je vous conseille d’utiliser le site Web pour les librairies les moins connues, histoire de connaître la viabilité du projet, c’est-à-dire la date de dernière mise à jour et sa popularité.

Développement AngularJS avec Yeoman : le dépôt Bower
Développement AngularJS avec Yeoman : le dépôt Bower

Une fois le package trouvé, il ne reste plus qu’à l’installer, en ligne de commande :

bower install <nom exact de la librairie> --save

L’option --save sert à inscrire la librairie dans le fichier bower.json, qui est le registre des packages installés par Bower.

Le but de ce fichier est simple : les librairies sont téléchargées dans app/bower_components, qui est exclu par votre logiciel préféré de versioning (git, par exemple).

Ainsi, vous ne stockez que les fichiers du projet, pas les applications tierces. Lorsqu’un autre développeur récupère les sources, il devra saisir :

bower install

Ne pas utiliser l’option --save peut être utile pour tester des librairies, sans les enregistrer dans le projet. En même temps, pour désenregistrer une librairie, il suffit d’éditer bower.json et de supprimer la ligne correspondante.

Vous pouvez aussi demander une version précise d’un package par la ligne de commande :

bower install <nom exact de la librairie>#<version>

Une autre solution est de changer la version dans le fichier bower.json puis de relancer bower install.

Notez que Bower gère aussi votre application comme un package. Ainsi, c’est dans bower.json que vous pouvez changer son nom et sa version.

Le mot de la fin

Nous avons vu comment installer Yeoman, le générateur Yo pour AngularJS et Bower, l’outil de gestion des packages et de la cohérence de leur version.
Dans le prochain article nous verrons l’outil Grunt.

Cet article vous a été utile ? Partage it !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.