15 outils utiles pour AngularJS destinés aux développeurs
Vous pensez plonger vos orteils dans Angular? Si vous avez parcouru nos 10 meilleurs tutoriels pour apprendre le post AngularJS et souhaitez jouer avec Angular vous-même, vous êtes au bon post. Nous avons ici quelques des outils permettant de rationaliser votre flux de travail de développement.
Nous examinons 15 des meilleurs IDE, éditeurs de texte, outils de test et de débogage, modules et outils de développement et applications pour construire avec angulaire. Si vous avez vos outils ou applications préférés, partagez-les avec nous dans les commentaires ci-dessous..
IDE et éditeur de texte
Dans le monde de la programmation, il existe deux types d’éditeurs: Environnement de développement intégré complet (IDE) et éditeurs de texte légers. Les deux permettent un flux de travail de développement plus rapide. L'EDI et l'éditeur de texte que nous avons énumérés ci-dessous sont d'excellents outils pour accélérer votre développement angulaire. Ils peuvent être facilement configurés pour l'environnement angulaire.
WebStorm
WebStorm est adapté non seulement pour Javascript mais aussi HTML et CSS. Il a un éditeur en direct génial qui vous permet de voir vos résultats de codage sur le navigateur sans besoin de rafraîchissements fréquents. Par défaut, leur version la plus récente comporte le package de plug-ins AngularJS bien que vous deviez d'abord inclure le script Angular dans votre projet. Pour plus de détails, lisez l'article du blog WebStorm.
Aptana
Aptana est un IDE open source gratuit qui est en fait la version personnalisée d’Eclipse et qui se concentre sur les langages Javascript, HTML, CSS et autres contenus Web. Pour étendre le support d’Aptana for Angular, il vous suffit d’installer l’extension AngularJS Eclipse à partir du Marché Eclipse.
Texte sublime
L'un des éditeurs de texte les plus populaires sur le marché, Sublime Text est apprécié de beaucoup en raison de sa capacité d'adaptation à tout type d'environnement de programmation. Il est également rapide et prend en charge les extraits de code personnalisables. Il contient de nombreux packages, notamment AngularJS, qui vous permettent de travailler avec Angular. Voici un excellent article de Dan Wahlin que vous pouvez consulter à ce sujet..
Plus sur le texte Sublime:
- 18 plugins indispensables de Sublime Text
- 12 trucs et astuces Sublime Text les plus recherchés
- Comment insérer un chemin de fichier dans un texte sublime
- Aperçu rapide du projet Localhost avec Sublime Text
- Gérer les notes et les listes avec du texte sublime
- Ajout du préfixe de fournisseur CSS avec du texte sublime
Outils de test et de débogage
Test et débogage sont des éléments importants du processus de développement, en particulier dans un environnement comme Angular. Voici quelques outils pouvant vous aider à tester et à déboguer votre application..
Karma
Karma est un excellent testeur pour Angular, mais peut également être utilisé avec n’importe quel framework Javascript. Il supporte tout type de test: tests unitaires, tests intermédiaires et Test E2E. Karma fonctionne en ouvrant les navigateurs que vous avez répertoriés dans le fichier de configuration. Il communique ensuite avec le navigateur actif à l’aide de socket.io et vous demande si vous souhaitez exécuter le test ou non..
Jasmin
Jasmine est utilisé pour le développement piloté par le comportement (BDD), mais vous pouvez l'utiliser pour le développement piloté par le test (TDD) avec une personnalisation de bit. Il est généralement associé à Karma: Karma en tant que coureur de test, Jasmine en tant que cadre de test. Jasmine inspectera automatiquement toutes vos classes et fonctions Javascript et vous notifiera du code non géré. L'inconvénient est il ne sait pas quel environnement (navigateurs) le test a effectué, mais Karma compense cet inconvénient.
MochaJS
Comparé à Jasmine, MochaJS est plus flexible mais Jasmine vient comme un tout-en-un. Avec MochaJS, si vous souhaitez utiliser un cadre espion, vous devez configurer Mocha avec sa bibliothèque appropriée, comme sinon.js. Et si vous avez besoin d'un cadre d'assertion, vous devez configurer Mocha avec un cadre tel que Chai.
Rapporteur
Le rapporteur est probablement le plus puissant automatisé de bout en bout (e2e) Outil de test angulaire. Développé par l’équipe Angular, Protractor est construit en combinant les technologies les plus performantes disponibles aujourd’hui, telles que NodeJS, sélénium, WebDriver, Moka, concombre et Jasmin.
Batarang angulaire
outre Rapporteur, Un autre excellent outil développé par l'équipe angulaire est Batarang angulaire. Batarang est une extension Chrome pour le débogage d'applications angulaires. Après avoir inspecté votre application, Batarang vous montrera le modèle, performance et dépendance le débogage résulte en trois onglets différents. Vous pouvez également contrôler l’inspection en décidant d’afficher ou non le applications, liaisons ou champs d'application.
inspecteur
ng-inspector est une extension de navigateur prise en charge par Chrome et Safari. Contrairement à Batarang, qui apparaît dans DevTools, ng-inspector préfère l’affichage du panneau latéral. Vous pouvez inspecter et mettre en évidence des éléments DOM lorsque vous survolez une étendue. Vous pouvez également voir la portée et le modèle mis à jour en temps réel.
Modules
Le meilleur endroit pour trouver des modules angulaires est ngmodules.org. Mais si vous avez besoin d’un aperçu rapide, vous trouverez ci-dessous une liste des bonnes ressources que nous avons collectées pour vous..
AngularUI
AngularUI est une collection de composants d'interface utilisateur construite avec AngularJS. Ses directives utilitaires vous aident à créer des applications angulaires plus rapidement. Au lieu de widgets, AngularUI utilise des directives brutes comme ui-routeur, ui-map, calendrier ui etc. Les directives que vous aimerez probablement le plus sont son UI-Bootstrap qui peut créer Twitter Bootstrap en angulaire. Consultez sa page de documentation propre et agréable pour commencer.
ng-Table - Table de tri et de filtrage
Si vous avez besoin de tableaux dans votre application Web, du type que vous pouvez trier et filtrer, ngTable est l'outil que vous recherchez. Il prend également en charge des hauteurs de rangées variables et de grandes capacités de pagination.
Restangulaire
Avec Angular, vous aurez peut-être du mal à travailler $ ressource et $ http pour la création d'API Rest. Restangular peut aider à faire l'utilisation des requêtes de récupération, suppression, mise à jour et publication de données est facilitée. Certaines caractéristiques qui distinguent Restangular de $ ressource sont un support de méthode HTTP, un élément d’auto-liaison, une promesse d’utilisation et bien d’autres. En savoir plus ici et voir la démo en direct sur Plunkr.
Gettext angulaire
Angular-Gettext est un superbe module angulaire pour une localisation extrêmement facile. Les principales caractéristiques sont que vous pouvez traduire votre application Web aussi facilement qu’ajouter attribut. Il vous permet de vous concentrer sur le développement de votre application et de laisser toutes les traductions à Angular-Gettext..
Outils et applications
Enfin, nous allons simplement laisser cela ici. C'est une liste de plus d'outils et d'applications qui peuvent probablement rendre votre processus de développement angulaire plus facile et plus fluide. Ils fonctionnent bien avec ceux qui commencent tout juste à prendre Angular.
Générateur angulaire
Yeoman dispose d'un générateur de code appelé Generator Angular. Avec cet outil, vous pouvez accélérer votre développement angulaire avec seulement des couples de commande terminale. Il peut générer automatiquement des tests de serveur de développement, d'unités et d'infrastructure, des vues, des directives, etc..
ngDocs - Référence AngularJS
ngDocs est une application Android qui fournit une documentation et des références AngularJS simples et agréables. Certains tutoriels de base sont également disponibles si vous débutez dans Angular. Il se peut que vous souhaitiez voir d'autres fonctionnalités, telles qu'un guide du développeur et une référence d'erreur. Avec cela sur votre appareil Android, choisissez Angular où que vous soyez.
