Yeoman, AngularJS ....

Yeoman, grunt, angularJS ... ou l'industrialisation d'une application Web du coté client.

PS : tout ce qui suit a été fait sous Windows

Prérequis

Il faudra

• Google Chrome
• Ruby (pour Windows)
• NodeJS

Installer

• Installer NodeJS en suivant les instructions, puis Ruby et pour finir Google Chrome
• Ouvrir une console et taper 'gem install compass'. Cette commande installera Compass et sera utilisé pour la commande "grunt server" qui sera vue plus bas.

Configuration de variables d'environement

• Ajouter NodeJS dans votre PATH afin d'invoquer npm plus facilement.
• Créer une variable CHROME_BIN qui pointera vers l'executable de chrome (sera utilise pour la commande 'grunt test' qui sera abordé plus bas

Installer Yeoman 

Comme stipuler sur le site, en ligne de commande :

npm install -g yo

Maintenant installer le générateur associé à AngularJS:

npm install -g generator-angular

Préparer le projet

On va maintenant créer la structure de base du projet Web. En ligne de commande, ce mettre dans votre répertoire de travail puis taper:

yo angular

Et la c'est le drame. Vous tombez dans les abysse d'un Maven like qui tire semble tirez la terre entière .... mais en fait non.

Vous devez répondre à quelques questions telles que : "voulez vous bootstrap ?"

Une fois les questions répondu et que le programme vous a rendu l'otage qu'est votre console, vous aurez une arborescence proche de ce qui suit:

 

Grunt server

Pour avoir un premier retour de tout ce que nous venons de faire, aller dans le répertoire de votre projet avec la console  puis taper:

grunt server

Si votre navigateur se lance avec une page ayant pour contenu "Allo, Allo!", c'est que l'ensemble est plutôt bien configuré.

Cette commande vous sera très utile lors de l’édition de votre site. Elle permettra de voir le resultat du travail directement sans lancer de serveur tierce.

Grunt test

Si vous êtes développeur Backend, vous vous êtes toujours demandé comment tester ce code Javascript : grunt test

Cette commande permet de lancer des tests unitaires basés sur le framework Karma et va nous permettre ici d'une certaine façon de valider l'environement de travail.

Taper maintenant la commande:

grunt test

Si aucune erreur se produit, que votre navigateur se lance et la sortie console vous indique que l'ensemble des tests s'est effectué sans erreur, c'est que votre environnement de travail est prêt!

Petite touche finale de préparation : Font Awesome

Vous utilisez surement cette librairie dans vos projets. Pour l'utilisez dans le cadre de cette préparation : bower install --save font-awesome

... la suite dans un autre billet