Tutoriel AngularJS : installation

Alex Young

Traducteur

LSMetag

Cet article est la traduction de AngularJS: Installation publié sur DailyJS.

Commentez

- Titre : Tutoriel AngularJS : installation

- Auteur : Alex Young

- Traducteur : LSMetag

- Parution : 13 mars 2014

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2014 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant-propos

- II. Installation des dépendances

- III. Utilisation et exécution

- IV. Bidouillage

- V. Remerciements

I - Avant-propos

- Partie 1 : Google, Twitter, et AngularJS

- Partie 2 : créer un lecteur de flux RSS

- Partie 3 : afficher le flux RSS

- Partie 4 : gérer les flux RSS

- Partie 5 : tests

- Partie 6 : ajouter des dépendances

- Partie 7 : validation d'un formulaire

- Partie 8 : itérateurs et filtres

- Partie 9 : installation

J'ai réorganisé le tutoriel AngularJS, que vous pouvez trouver ici : GitHub: alexyoung / djsreader. Le projet a été créé à l'origine avec Yeoman, comme l'un des sujets que je voulais couvrir dans mes séries de tutoriels. Cependant, une simple récupération de mon code via GitHub ne suffirait pas à l'exécuter, donc j'ai écrit quelques instructions dans le fichier readme.

Même si je préférerais que le public suive ces séries de tutoriels depuis la partie 1 et créent leur propre version, ce n'est pas forcément possible étant donné que les dépendances changent avec le temps. J'ai beaucoup été questionné à ce sujet, et c'est simplement une conséquence du style de tutoriels que j'écris dans ce blog. J'aimerais pouvoir maintenir à jour ces articles pour qu'ils puissent rester fonctionnels avec les dernières versions de chaque dépendance, mais je dois gagner ma vie !

Si vous voulez juste récupérer le code source du tutoriel AngularJS et jouer avec, j'ai écrit les instructions ci-dessous.

II - Installation des dépendances

Pour lancer le projet, vous aurez besoin d'installer ceci :

- Node 0.10.x ;

- Bower (npm install -g bower) ;

- Grunt (npm install -g grunt-cli) ;

- Compass (gem install compass).

Avec un peu de chance, vous avez déjà Node, ce qui implique que Bower et Grunt devraient être faciles à installer. Compass est un problème : une des tâches de compilation de Grunt se fait depuis Sass, qui nécessite le script Ruby en ligne de commande compass. C'est ennuyeux parce que Ruby est bordélique et à moins que vous l'utilisiez dans la sphère professionnelle, vous n'avez sûrement pas envie de devoir vous coltiner la version Management de Ruby. Heureusement, j'ai trouvé gem install compass sur une machine fonctionnant avec Mountain Lion (Mac). La version de Ruby est la 1.8.7 (assez ancienne). J'ai remarqué que sudo gem install compass donnait un script ne fonctionnant pas et je n'ai pas cherché à savoir pourquoi. Je vais sans doute remplacer la tâche Grunt pour nous débarrasser de cette dépendance et juste devoir conserver Node.

Une fois tout cela installé, npm install ira chercher les dépendances de Grunt. Ensuite, exécutez bower install pour récupérer les bibliothèques clientes.

III - Utilisation et exécution

Le fichier Grunt généré par Yeoman possède quelques fonctionnalités sympathiques. On peut générer le projet avec grunt build, lancer des tests avec grunt test, et lancer un serveur avec grunt server. C'est probablement ce qui vous intéresse, et si ça ne semble pas fonctionner, vérifiez que vous avez d'abord généré le projet.

IV - Bidouillage

Si tout ce qui vous intéresse est de faire des tests avec AngularJS ou de changer le code HTML, vous devriez vous familiariser avec la structure du projet. La plupart de ce qui est intéressant se trouve dans app/, en particulier dans app/scripts/controllers/main.js auquel ce tutoriel se réfère massivement, et app/views/main.html qui représente le template correspondant.

Maintenant vous devriez être capable d'exécuter le projet sans suivre tous les tutoriels. Les nouveaux venus devraient au moins pouvoir tester le projet sans trop de difficultés.

V - Remerciements

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original AngularJS: Installation du site DailyJS.

Je remercie également f-leb pour sa relecture attentive et assidue.