Página principal » Caja de herramientas » 15 herramientas AngularJS útiles para desarrolladores

    15 herramientas AngularJS útiles para desarrolladores

    ¿Pensando en sumergir los dedos en Angular? Si has seguido nuestros 10 mejores tutoriales para aprender la publicación de AngularJS y te gustaría jugar con Angular por tu cuenta, estás en la publicación correcta. Aquí tenemos algunos Herramientas que pueden agilizar su flujo de trabajo de desarrollo..

    Estamos viendo 15 de los mejores IDE, editores de texto, herramientas para pruebas y depuración, módulos y herramientas de desarrollo y aplicaciones Para la construcción con Angular. Si tiene sus herramientas o aplicaciones favoritas, compártalas con nosotros en los comentarios a continuación..

    IDE y editor de texto

    En el mundo de la programación, hay dos tipos de editores: Entorno de desarrollo integrado con todas las funciones (IDE) y editores de texto ligero. Ambos permiten un flujo de trabajo de desarrollo más rápido. El IDE y el editor de texto que enumeramos a continuación son herramientas muy buenas para acelerar su desarrollo angular. Se pueden configurar fácilmente para el entorno Angular..

    Tormenta web

    WebStorm es adecuado no solo para Javascript sino también para HTML y CSS. Tiene un impresionante editor en vivo que le permite ver los resultados de su codificación en el navegador sin necesidad de refrescarlos con frecuencia. De forma predeterminada, su versión más reciente incluye el paquete de complementos AngularJS, aunque primero deberá incluir el script Angular en su proyecto. Para más detalles, lea la publicación del blog de WebStorm.

    Aptana

    Aptana es un IDE de código abierto gratuito, que en realidad es la versión personalizada de Eclipse que se centra en Javascript, HTML, CSS y otras aplicaciones web. Para extender Aptana para soporte Angular, todo lo que necesita hacer es instalar la extensión Eclipse de AngularJS desde Eclipse Marketplace.

    Texto sublime

    Uno de los editores de texto más populares disponibles, Sublime Text es querido por muchos debido a su capacidad de personalización para adaptarse a cualquier tipo de entorno de programación. También es rápido y tiene soporte de fragmentos de código personalizables, y tiene muchos paquetes, incluido el paquete AngularJS, que le permiten trabajar con Angular. Aquí hay un gran post de Dan Wahlin que puedes consultar sobre esto..

    Más sobre el texto sublime:

    • 18 complementos esenciales de Sublime Text
    • 12 trucos y consejos de texto sublime más buscados
    • Cómo insertar ruta de archivo en texto sublime
    • Vista previa rápida del proyecto Localhost con texto sublime
    • Gestiona notas y listas con texto sublime
    • Adición de prefijo de proveedor CSS con texto sublime

    Herramientas de prueba y depuración

    Pruebas y depuración Son partes importantes del proceso de desarrollo, especialmente en un entorno como Angular. Estas son algunas de las herramientas que pueden ayudarlo a probar y depurar su aplicación..

    Karma

    Karma es un gran corredor de prueba hecho para Angular, pero también puede usarse con cualquier otro marco de Javascript. Es compatible con cualquier tipo de prueba: pruebas unitarias, pruebas intermedias y E2E pruebas. Karma funciona abriendo los navegadores que enumeras en el archivo de configuración. Luego se comunica con el navegador activo utilizando socket.io y le pregunta si debe ejecutar la prueba o no..

    Jazmín

    Jasmine se usa para el desarrollo dirigido por el comportamiento (BDD), pero puedes usarlo para el desarrollo dirigido por pruebas (TDD) con una personalización de bits Por lo general, se combina con Karma: Karma como el corredor de prueba, Jasmine como el marco de prueba. Jasmine inspeccionará automáticamente todas tus clases y funciones de Javascript y te notificará sobre el código no manejado. El inconveniente es no sabe qué entorno (navegadores) realizó la prueba, Pero el Karma compensa esta desventaja..

    MochaJS

    En comparación con Jasmine, MochaJS es más flexible pero Jasmine viene como un paquete todo en uno. Con MochaJS, si desea utilizar un marco espía, debe configurar Mocha con su biblioteca apropiada como sinon.js. Y si necesita un marco de afirmación, Mocha debe configurarse con un marco como Chai.

    Transportador

    El transportador es probablemente el más potente automatizado. de extremo a extremo (e2e) herramienta de prueba angular. Desarrollado por el equipo Angular, Protractor se construye combinando algunas de las grandes tecnologías disponibles en la actualidad, como NodeJS, Selenium, webDriver, Mocha, Pepino y Jazmín.

    Batarang angular

    Además Transportador, Otra gran herramienta desarrollada por el equipo de Angular es Angular Batarang.. Batarang Es una extensión de Chrome para la depuración de aplicaciones angulares. Después de inspeccionar su aplicación, Batarang le mostrará la Modelo, rendimiento y dependencia. Resultados de la depuración en tres pestañas diferentes. También puede controlar la inspección, decidiendo si desea mostrar el Aplicaciones, fijaciones o alcances..

    inspector ng

    ng-inspector es una extensión del navegador compatible con Chrome y Safari. A diferencia de Batarang, que aparece en DevTools, ng-inspector prefiere la pantalla del panel lateral. Puede inspeccionar y resaltar elementos DOM mientras se desplaza sobre un ámbito. También puede ver el alcance y el modelo actualizado en tiempo real..

    Módulos

    El mejor lugar para encontrar módulos angulares es ngmodules.org. Pero si necesita una descripción general rápida, a continuación hay una lista de algunos buenos recursos que hemos recopilado para usted..

    AngularUI

    AngularUI es una colección de componentes de UI creados con AngularJS. Sus directivas de utilidad le ayudan a construir aplicaciones angulares más rápido. En lugar de widgets, AngularUI usa directivas en bruto como enrutador ui, mapa ui, calendario ui Las directivas que probablemente le gusten más es su interfaz de usuario que puede nativamente crear Twitter Bootstrap en Angular. Echa un vistazo a su página de documentación limpia y agradable para empezar.

    ng-Table - Tabla de clasificación y filtrado

    Si necesita tablas en su aplicación web, del tipo que se puede ordenar y filtrar, entonces ngTable es la herramienta que está buscando. También es compatible con alturas de fila variables y grandes capacidades de paginación.

    Restangular

    Con Angular, puede tener dificultades para trabajar $ recurso y $ http para crear la API Rest. Restangular puede ayudar a hacer El uso de las solicitudes de obtención, eliminación, actualización y publicación de datos es más fácil. Algunas características que diferencian a Restangular de $ recurso son soporte de método HTTP, elemento de autoenlace, promesas de uso y muchos más. Encuentra más información aquí y echa un vistazo a la demostración en vivo en Plunkr.

    Gettext angular

    Angular-Gettext es un excelente módulo angular para una localización súper fácil. Las características clave son que puede traducir su aplicación web tan fácil como agregar atributo. Te permite enfocarte en el desarrollo de tu aplicación y dejar todas las traducciones a Angular-Gettext.

    Herramientas y aplicaciones

    Por último, vamos a dejar esto aquí. Es una lista de más herramientas y aplicaciones que probablemente pueden hacer su proceso de desarrollo Angular más fácil y sin complicaciones. Trabajan bien con aquellos que apenas están empezando a recoger Angular.

    Generador Angular

    Yeoman tiene un generador de código llamado Generador Angular. Con esta herramienta, puede acelerar su desarrollo angular con solo pares de comandos de terminal. Puede generar automáticamente pruebas de servidor, unidad y marco de desarrollo, vista, directivas y más.

    ngDocs - Referencia AngularJS

    ngDocs es una aplicación para Android que proporciona documentación y referencias de AngularJS, agradable y simple. Algunos tutoriales básicos también están disponibles si eres nuevo en Angular. Hay características adicionales como una guía para desarrolladores y una referencia de error que le gustaría ver. Con esto en tu dispositivo Android, selecciona Angular dondequiera que vayas.