Il existe un grand nombre de solutions permettant de développer correctement avec AngularJS... et aucune n'est absolument meilleure que les autres ! Chacun utilise son programme et s'y habitue, si bien que finalement, c'est CE programme qui sera le mieux pour vous : vous connaîtrez tous les raccourcis utiles, ou installerez des plugins propres à vos besoins.
Cependant, je vais tenter ici de présenter les principaux outils disponibles aujourd'hui et leurs avantages / inconvénients les uns par rapport aux autres.
N'hésitez pas à laisser des commentaires à propos du logiciel que vous utilisez (Pourquoi vous l'avez choisi ? Quel plugin lui ajouter ? etc...) !
Avant tout, il faut distinguer les IDE des simples éditeurs de texte. Un IDE comporte un éditeur de texte (mais pas l'inverse évidemment). Donc l'IDE colorera votre code comme un éditeur mais vous indiquera en plus les erreurs de syntaxe, les incohérences entre les fonctions et leur appel, etc... (Voir les fonctionnalités d'un IDE). En contrepartie, un éditeur de texte est beaucoup plus rapide. Et agrémenté de quelques plugins et/ou réglages, il peut facilement devenir très performant !
Éditeurs de texte
Notepad++
Plus tellement besoin de le présenter je pense, Notepad++ a déjà largement fait ses preuves. Ultra léger et rapide, il ne vous lâchera pas.
Par contre, même si beaucoup de développeur web ont pu l'utiliser, il ne présente aucun attrait particulier pour AngularJS. Bref, un indémodable pour coder en toute circonstance mais pas forcément celui que vous utiliserez tous les jours.
Brackets
Petit nouveau dans le vaste monde des éditeurs de texte, Brackets est Open Source (et gratuit) et complètement tourné vers le développement front-end. Développé par Adobe, il est régulièrement mis à jour (une release toutes les deux semaines et demi), il ne cesse de prendre en charge de nouveaux frameworks et outils utilisés par les développeurs web. Alors que sa version 1.0 n'est pas encore sortie, il gère déjà nativement SCSS et SASS et le Live Development.
Codé en Javascript, il est rapide et propose tout un panel de fonctionnalités très utiles dont voici mes préférées :
Quick Edit
Brackets propose une fonctionnalité très intéressante : à partir d'un fichier HTML contenant des balises avec des classes (ou identifiants), vous pouvez modifier le CSS associé à ces balises directement depuis l'éditeur sans avoir à changer de fichier. Une image valant mieux qu'un long discours :
Quick Edit sous Brackets
La palette de couleurs
Comme pour le Quick Edit, Brackets intègre nativement une palette de couleurs très ergonomique :
La palette de couleurs de Brackets
Vous pouvez aussi voir la couleur correspondant à un code en hexadécimal ou en rgb simplement en passant la souris au-dessus.
Sublime Text
Comme beaucoup, depuis que j'ai découvert Sublime Text, je ne l'ai plus quitté ! Plus rapide encore que Notepad++ au démarrage, il ne s'essoufle pas avec le temps, et ce même si vous installez pléthore de plugins à et que vous le personnalisez complètement.
La version 3 est encore en Beta mais elle est très stable et offre beaucoup d'avancées par rapport à la version 2. Personnellement, je l'utilise depuis pas mal de temps déjà et je n'ai pas eu de problème. Je vous la conseille vivement.
Le seul point négatif de Sublime Text, si l'on doit en trouver un, est qu'il n'est pas gratuit. Le développeur du logiciel propose gracieusement de le tester de façon illimitée, mais ce n'est que pour pouvoir ensuite souscrire à une licence.
Les plugins de Sublime Text
Parmi les grands points forts de Sublime Text, il y a la grande diversité de plugins disponibles. Quel que soit le langage dans lequel vous développez, vous devriez pouvoir trouver votre bonheur ;) . Il y a aussi des plugins très utiles pour envoyer directement vos fichiers sur un serveur distant (à l'enregistrement ou après un délai par exemple). Voici une liste (absolument non exhaustive) de quelques plugins que j'utilise et que je trouve indispensables pour un travail efficace :
Package Control
Absolument indispensable, ce plugin permet de gêrer tous les autres. Grâce à lui, installer, mettre à jour ou supprimer un plugin de Sublime Text sera VRAIMENT un jeu d'enfant ! Vous trouverez les instructions pour l'installer sur cette page.
AngularJS
Ce plugin offre l'auto-complétion des mots-clés utilisés par AngularJS et même quelques snippets de code. Très pratique pour développer une application avec ce framework :)
SFTP
Très facile à prendre en main, il gère la synchronisation de vos fichiers locaux avec votre serveur. Grâce à SFTP, vous pouvez, de façon très intuitive, paramétrer vos identifiants, mots de passe et dossiers d'upload de vos fichiers. Ainsi, dès que vous enregistrez votre fichier, il est automatiquement envoyé au serveur.
Comme Sublime Text, SFTP n'est pas gratuit mais vous pouvez l'essayer gratuitement pour une durée indéterminée. L'idée étant ensuite d'acheter la licence.
Grunt
Nous verrons plus tard qu'il peut être très intéressant de travailler avec un gestionnaire de tâches tel que Grunt. Or ce plugin, comme son nom l'indique, propose de lancer les commandes nécessaires directement depuis Sublime Text. Ce qui est quand même plus agréable que de lancer un invite de commande à côté.
Emmet
Ce plugin fait partie du projet Emmet qui se décline au travers de beaucoup d'autres éditeurs et IDE. Ce plugin n'a rien à voir avec AngularJS mais je profite de ce paragraphe pour en parler. Emmet permet d'écrire du HTML ultra rapidement en vous épargnant les tâches répétitives inhérentes à ce langage (les chevrons, ouverture et fermeture des balises, l'indentation, etc...). Emmet permet aussi d'ajouter des classes et identifiants aux balises en un clin d'œil. Ce petit outil vous fera gagner un temps fou !
Bracket Highlighter
Assez simple, il vous permet de naviguer efficacement au sein d'un fichier javascript, mais pas que ! Il peut s'avérer très utile pour les fichiers CSS et notamment SCSS qui ont souvent des accolades imbriquées à grande échelle.
LiveReload
La version Sublime Text du fameux plugin qui fait l'unanimité en ce moment ! Voir le paragraphe dédié dans la partie Plugins utiles pour en savoir plus.
Tout au long de ce tutoriel, j'essaierai de vous donner des références pour vous permettre d'approfondir certains points.
Sachez d'ores et déjà que scotch.io (EN) est un site très intéressant qui propose nombre d'articles poussés à propos des dernières technologies (AngularJS, Node.js, SASS, etc...) du développement web. C'est une source sûre que je vous conseille de consulter régulièrement.
Gratuit et Open Source, Netbeans est aujourd'hui une référence en développement web. Basé sur Java, il est compatible avec tous les OS et est très complet. Son interface est intuitive et on s'habitue très rapidement aux différentes fenêtres d'accès rapide. Il propose en outre un plugin pour AngularJS (tout comme pour beaucoup d'autres frameworks javascript comme Backbone.js). Comme je le disais plus haut, l'avantage d'un IDE sur un simple éditeur de texte tel que Sublime Text est qu'il "observe" votre code et vous signale les erreurs éventuelles. Il peut donc s'avérer très puissant pour déboguer votre application !
Dreamweaver
Personnellement, je n'utilise pas Dreamweaver, mais dans certains cas, il peut être utile. Étant donné qu'il propose un éditeur WYSIWYG pour les pages HTML, vous pouvez très rapidement mettre en place l'apparence de votre application. Cependant, comme il n'est plus très utilisé pour le développement web (du moins de ce que j'en sais), aucun plugin dédié à AngularJS n'existe aujourd'hui pour Dreamweaver. Aussi, il est à noter qu'il est payant, comme les autres produits de la suite CS d'Adobe. Mais rien ne vous empêche de vous en servir si vous y tenez ;) .
Webstorm
S'auto-proclamant the smartest Javascript IDE, on est en droit d'attendre beaucoup de Webstorm ! Comme il est payant, je dois avouer que je ne l'ai jamais vraiment utilisé — je dois être un peu radin :) — mais il semble très performant. D'autant que dans notre cas, il supporte nativement (et visiblement de façon complète et efficace) AngularJS. Si vous l'utilisez, n'hésitez pas à laisser un commentaire en bas de cette page !
Plugins utiles
Afin de développer tester, déboguer et surveiller votre application AngularJS, il existe des plugins gratuits à installer sur votre navigateur. Comme AngularJS est soutenu par Google, il n'est pas étonnant que Chrome soit le plus adapté pour le développement d'application utilisant ce framework, et ce même si Firefox ou Opéra possède des outils de déboguage puissants.
Batarang
Disponible uniquement sous Chrome, Batarang est LE plugin pour développer avec AngularJS. Il vous permet d'observer votre code en action, de faire des benchmarks sur vos fonctions, modules, etc... Fini le temps des alert() à tout va inefficaces et compltèment inadaptés pour le développement d'une application et non d'une simple page web.
LiveReload
Le projet LiveReload a été initié par des développeurs qui étaient fatigués de devoir recharger les pages de leur navigateur à chaque petit changement dans les fichiers Javascript ou CSS. D'autant que pour peu que l'on utilise des pré-compilateur CSS (comme LESS ou SASS/SCSS), il faut aussi compiler votre fichier style.css avant de l'envoyer sur le serveur. Aujourd'hui, LiveReload a grandi et quasiment tous les fichiers nécessaires au front-end peuvent être rechargés en temps réel sans avoir à rafraîchir la page du navigateur... si c'est pas beau çà ! :)
Ainsi, vous pouvez installer LiveReload comme plugin dans votre éditeur de texte / IDE et ensuite au sein de votre navigateur et vous n'aurez plus qu'à enregistrer les fichiers sur lesquels vous travaillez pour qu'ils soient automatiquement mis à jour et que votre navigateur sache qu'il doit rafraîchir certaines parties de la page ! Vous allez voir, c'est magique.
Vos commentaires