15 úteis ferramentas AngularJS para desenvolvedores
Pensando em mergulhar seus dedos em angular? Se você já passou pelos nossos 10 melhores tutoriais para aprender o post do AngularJS e gostaria de brincar com o Angular sozinho, você está no caminho certo. Nós temos aqui alguns ferramentas que podem agilizar seu fluxo de trabalho de desenvolvimento.
Nós estamos olhando para 15 dos melhores IDEs, editores de texto, ferramentas para testar e depurar, módulos e ferramentas de desenvolvimento e aplicativos para construir com Angular. Se você tem suas ferramentas ou aplicativos favoritos, compartilhe-os conosco nos comentários abaixo.
IDE e editor de texto
No mundo da programação, existem dois tipos de editores: ambiente de desenvolvimento integrado completo (IDE) e editores de texto leve. Ambos permitem um fluxo de trabalho de desenvolvimento mais rápido. O IDE e o editor de texto que listamos abaixo são ferramentas muito boas para acelerar o seu desenvolvimento Angular. Eles podem ser facilmente configurados para o ambiente Angular.
WebStorm
O WebStorm é adequado não apenas para Javascript, mas também para HTML e CSS. Tem um editor ao vivo incrível que permite ver seus resultados de codificação no navegador sem precisar de atualizações frequentes. Por padrão, sua versão mais recente carrega o pacote de plug-in AngularJS, embora você precise incluir o script Angular em seu projeto primeiro. Para mais detalhes, leia a postagem no blog do WebStorm.
Aptana
O Aptana é um IDE gratuito e de código aberto que, na verdade, é a versão personalizada do Eclipse, com foco em Javascript, HTML, CSS e outros itens da web. Para estender o suporte do Aptana para Angular, tudo o que você precisa fazer é instalar a extensão AngularJS Eclipse do Mercado Eclipse.
Texto Sublime
Um dos mais populares editores de texto disponíveis, o Sublime Text é adorado por muitos por causa de sua capacidade de personalização para se adaptar a qualquer tipo de ambiente de programação. Ele também é rápido e tem suporte a snippets de código personalizáveis, e possui muitos pacotes, incluindo o pacote AngularJS, que permite trabalhar com o Angular. Aqui está um ótimo post de Dan Wahlin você pode conferir sobre isso.
Mais sobre o texto sublime:
- 18 plugins essenciais de texto sublime
- 12 dicas e truques de texto mais procurados
- Como inserir o caminho do arquivo no texto sublime
- Visualização rápida do projeto Localhost com Sublime Text
- Gerenciar notas e listas com texto sublime
- Adicionando o prefixo do fornecedor de CSS com texto sublime
Ferramentas de Teste e Depuração
Testando e depurando são partes importantes do processo de desenvolvimento, especialmente em um ambiente como o Angular. Aqui estão algumas das ferramentas que podem ajudá-lo a testar e depurar seu aplicativo.
Carma
O Karma é um ótimo test runner feito para o Angular, mas também pode ser usado com qualquer outro framework Javascript. Suporta qualquer tipo de teste: teste unitário, teste intermediário e Teste E2E. O Karma funciona abrindo navegadores que você lista no arquivo de configuração. Em seguida, ele se comunica com o navegador ativo usando o socket.io e pergunta se você deseja executar o teste ou não.
Jasmim
Jasmine é usado para desenvolvimento orientado a comportamento (BDD), mas você pode usá-lo para desenvolvimento orientado a testes (TDD) com um pouco de personalização. Geralmente é acoplado com Karma: Karma como o corredor de teste, Jasmine como a estrutura de teste. O Jasmine inspecionará automaticamente todas as suas classes e funções Javascript e notificará você sobre o código não manipulado. A desvantagem é não sabe qual ambiente (navegadores) o teste realizou, mas o Karma compensa essa desvantagem.
MochaJS
Quando comparado ao Jasmine, MochaJS é mais flexível mas Jasmine vem como um pacote tudo-em-um. Com o MochaJS, se você quiser usar o framework spy, você precisa configurar o Mocha com sua biblioteca apropriada, como sinon.js. E se você precisa de framework de asserção, o Mocha precisa ser configurado com um framework como o Chai.
Transferidor
O transferidor é provavelmente o mais poderoso de ponta a ponta (e2e) Ferramenta de teste angular. Desenvolvido pela equipe Angular, o Transferidor é construído combinando algumas ótimas tecnologias disponíveis hoje, como NodeJS, selênio, webDriver, Mocha, pepino e Jasmim.
Batarang Angular
Além disso Transferidor, outra grande ferramenta desenvolvida pela equipe Angular é Angular Batarang. Batarang é uma extensão do Chrome para depuração de aplicativos angulares. Após inspecionar seu aplicativo, o Batarang mostrará a você modelo, desempenho e dependência depuração resulta em três guias diferentes. Você também pode controlar a inspeção, decidindo se mostra a aplicações, ligações ou escopos.
ng-inspector
ng-inspector é uma extensão do navegador suportada no Chrome e no Safari. Ao contrário do Batarang, que aparece no DevTools, o ng-inspector prefere o painel lateral. Você pode inspecionar e destacar elementos DOM à medida que você passa o mouse sobre um escopo. Você também pode ver o escopo e o modelo atualizados em tempo real.
Módulos
O melhor lugar para encontrar módulos angulares é ngmodules.org. Mas se você precisar de uma rápida visão geral, abaixo está uma lista de alguns bons recursos que coletamos para você.
AngularUI
AngularUI é uma coleção de componentes de UI construídos com o AngularJS. Suas diretivas de utilitários ajudam você a criar aplicativos Angular mais rapidamente. Em vez de widgets, o AngularUI usa diretivas brutas como roteador-ui, ui-map, calendário-ui As diretivas que você provavelmente mais gostará é o UI-Bootstrap, que pode nativamente criar Twitter Bootstrap em Angular. Confira sua página de documentação limpa e agradável para começar.
ng-Table - Tabela de classificação e filtragem
Se você precisar de tabelas em seu aplicativo da web, o tipo que pode ser classificado e filtrado, a ngTable é a ferramenta que você está procurando. Ele também suporta alturas de fileiras variáveis e grandes recursos de paginação.
Restangular
Com Angular, você pode ter dificuldade em trabalhar $ resource e $ http para criar a API Rest. Restangular pode ajudar a fazer o uso de obter, excluir, atualizar e postar solicitações de dados mais fácil. Alguns recursos que diferenciam o Restangular de $ resource são suporte a métodos HTTP, elementos de auto-link, promessas de uso e muito mais. Saiba mais aqui e confira a demonstração ao vivo no Plunkr.
Gettext Angular
Angular-Gettext é um excelente módulo angular para localização super fácil. Os principais recursos são que você pode traduzir seu aplicativo da Web tão fácil quanto adicionar atributo. Ele permite que você se concentre no desenvolvimento do aplicativo e deixe todas as traduções para o Angular-Gettext.
Ferramentas e Aplicativos
Por fim, vamos deixar isso aqui. É uma lista de mais ferramentas e aplicativos que provavelmente podem tornar seu processo de desenvolvimento Angular mais fácil e suave. Eles funcionam bem com aqueles que estão apenas começando a pegar Angular.
Gerador Angular
Yeoman tem um gerador de código chamado Generator Angular. Com esta ferramenta, você pode acelerar seu desenvolvimento Angular com apenas pares de comandos de terminal. Ele pode gerar automaticamente o servidor de desenvolvimento, teste de unidade e estrutura, visualização, diretivas e muito mais.
ngDocs - AngularJS Reference
ngDocs é um aplicativo Android que fornece documentação e referências AngularJS, agradável e simples. Alguns tutoriais básicos também estão disponíveis se você for novo no Angular. Existem recursos adicionais, como um guia do desenvolvedor e uma referência de erro que você pode gostar de ver. Com isso no seu dispositivo Android, pegue o Angular onde quer que vá.
