).scope() é bastante complexo. No entanto, vale a pena ler, pois os avisos hilariantes compensam isso.

Erro comum nº 15: não depender da automação ou depender demais dela

Se você segue as tendências de desenvolvimento de front-end e é um pouco preguiçoso - como eu - provavelmente tenta não fazer tudo manualmente. Acompanhar todas as suas dependências, processar conjuntos de arquivos de maneiras diferentes, recarregar o navegador após cada salvamento de arquivo - o desenvolvimento é muito mais do que apenas codificação.

Portanto, você pode usar o bower e talvez o npm, dependendo de como você atende seu aplicativo. É possível que você esteja usando grunt, gulp ou brunch. Ou bash, o que também é legal. Na verdade, você pode ter iniciado seu último projeto com algum gerador Yeoman!

Isso leva à pergunta: você entende todo o processo do que sua infraestrutura realmente faz? Você precisa do que tem, especialmente se passou horas tentando consertar a funcionalidade de carregamento do servidor da web de conexão?

Reserve um segundo para avaliar o que você precisa. Todas essas ferramentas estão aqui apenas para ajudá-lo, não há outra recompensa por usá-las. Os desenvolvedores mais experientes com quem falo tendem a simplificar as coisas.

Erro comum nº 16: Não executar os testes de unidade no modo TDD

Os testes não deixarão seu código livre de mensagens de erro AngularJS. O que eles farão é garantir que sua equipe não tenha problemas de regressão o tempo todo.

Estou escrevendo especificamente sobre testes de unidade aqui, não porque acho que eles são mais importantes do que os testes e2e, mas porque são executados muito mais rápido. Devo admitir que o processo que vou descrever é muito prazeroso.

Desenvolvimento orientado a testes como uma implementação para, por exemplo, gulp-karma runner, basicamente executa todos os seus testes de unidade em cada arquivo salvo. Minha maneira favorita de escrever testes é, eu apenas escrevo garantias vazias primeiro:

angular.reloadWithDebugInfo()

Depois disso, eu escrevo ou refatoro o código real e, em seguida, volto aos testes e preencho as garantias com o código de teste real.

Ter uma tarefa TDD em execução em um terminal acelera o processo em cerca de 100%. Os testes de unidade são executados em questão de segundos, mesmo se você os tiver muitos. Basta salvar o arquivo de teste e o executor irá pegá-lo, avaliar seus testes e fornecer feedback instantaneamente.

Com os testes e2e, o processo é muito mais lento. Meu conselho - divida os testes e2e em suítes de teste e apenas execute um de cada vez. Protractor tem suporte para eles, e abaixo está o código que eu uso para minhas tarefas de teste (eu gosto de gole).

var injector = $(document.body).injector(); var someService = injector.get('someService');

Erro comum nº 17: não usar as ferramentas disponíveis

A - pontos de interrupção do cromo

As ferramentas de desenvolvimento do Chrome permitem que você aponte para um local específico em qualquer um dos arquivos carregados no navegador, pause a execução do código nesse ponto e deixe você interagir com todas as variáveis ​​disponíveis a partir desse ponto. Isso é muito! Essa funcionalidade não exige que você adicione nenhum código, tudo acontece nas ferramentas de desenvolvimento.

Você não apenas obtém acesso a todas as variáveis, mas também vê a pilha de chamadas, imprime rastreamentos de pilha e muito mais. Você pode até configurá-lo para trabalhar com arquivos minimizados. Leia sobre isso Aqui .

Existem outras maneiras de obter acesso em tempo de execução semelhante, por exemplo, adicionando Ng-init chamadas. Mas os pontos de interrupção são mais sofisticados.

O AngularJS também permite que você acesse o escopo por meio de elementos DOM (desde que ng-if esteja habilitado) e injete os serviços disponíveis por meio do console. Considere o seguinte no console:

ng-repeat

ou aponte para um elemento no inspetor e:

var ngInitDirective = ngDirective({ priority: 450, compile: function() { return { pre: function(scope, element, attrs) { scope.$eval(attrs.ngInit); } }; } });

Mesmo se debugInfo não estiver ativado, você pode fazer:

var ngShowDirective = ['$animate', function($animate) { return { restrict: 'A', multiElement: true, link: function(scope, element, attr) { scope.$watch(attr.ngShow, function ngShowWatchAction(value) { // we're adding a temporary, animation-specific class for ng-hide since this way // we can control when the element is actually displayed on screen without having // to have a global/greedy CSS selector that breaks when other animations are run. // Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845 $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, { tempClasses: NG_HIDE_IN_PROGRESS_CLASS }); }); } }; }];

E tenha-o disponível após a recarga:

Para injetar e interagir com um serviço do console, tente:

$watch

B - cronograma do cromo

Outra ótima ferramenta que vem com ferramentas de desenvolvimento é a linha do tempo. Isso permitirá que você grave e analise o desempenho ao vivo do seu aplicativo enquanto o usa. A saída mostra, entre outros, o uso de memória, taxa de quadros e a dissecação dos diferentes processos que ocupam a CPU: carregamento, script, renderização e pintura.

Se você perceber que o desempenho do seu aplicativo diminui, provavelmente será capaz de encontrar a causa disso na guia da linha do tempo. Basta registrar suas ações que levaram a problemas de desempenho e ver o que acontece. Muitos observadores? Você verá barras amarelas ocupando muito espaço. Perda de memória? Você pode ver a quantidade de memória consumida ao longo do tempo em um gráfico.

Uma descrição detalhada: https://developer.chrome.com/devtools/docs/timeline

C - inspecionar aplicativos remotamente no iOS e Android

Se você estiver desenvolvendo um aplicativo híbrido ou um aplicativo da web responsivo, poderá acessar o console do seu dispositivo, a árvore DOM e todas as outras ferramentas disponíveis por meio das ferramentas de desenvolvimento do Chrome ou Safari. Isso inclui o WebView e o UIWebView.

Primeiro, inicie seu servidor da web no host 0.0.0.0 para que ele seja acessível de sua rede local. Habilite o inspetor da web nas configurações. Em seguida, conecte seu dispositivo ao desktop e acesse sua página de desenvolvimento local, usando o ip da sua máquina em vez do “localhost” regular. Isso é tudo o que é preciso, seu dispositivo agora deve estar disponível para você no navegador do seu desktop.

Aqui são as instruções detalhadas para Android E para iOS, guias não oficiais podem ser encontrados facilmente no google.

Recentemente, tive uma experiência legal com browserSync . Ele funciona de maneira semelhante ao livereload, mas também sincroniza todos os navegadores que estão visualizando a mesma página por meio do browserSync. Isso inclui a interação do usuário, como rolar, clicar em botões, etc. Eu estava olhando para a saída de registro do aplicativo iOS enquanto controlava a página no iPad a partir do meu desktop. Funcionou muito bem!

Erro comum nº 18: não ler o código-fonte no exemplo NG-INIT

// when in doubt, comment it out! :) , pelo que parece, deve ser semelhante a

|_+_|
e
|_+_|
, certo? Você já se perguntou por que há um comentário nos documentos que não deve ser usado? IMHO isso foi surpreendente! Eu esperaria que a diretiva inicializasse um modelo. Isso também é o que ele faz, mas ... é implementado de uma maneira diferente, ou seja, não observa o valor do atributo. Você não precisa navegar pelo código-fonte do AngularJS - deixe-me levá-lo para você:

|_+_|

Menos do que você esperaria? Bastante legível, além da estranha sintaxe de diretiva, não é? A sexta linha é o que importa.

Compare-o com o ng-show:

|_+_|

Novamente, a sexta linha. Existe um

|_+_|
lá, é isso que torna essa diretiva dinâmica. No código-fonte do AngularJS, grande parte de todo o código são comentários que descrevem o código que foi quase todo legível desde o início. Eu acredito que é uma ótima maneira de aprender sobre AngularJS.

Conclusão

Este guia que cobre os erros mais comuns do AngularJS é quase duas vezes mais longo que os outros guias. Aconteceu assim naturalmente. A demanda por engenheiros de front-end JavaScript de alta qualidade é muito alta. AngularJS é tão quente agora , e tem mantido uma posição estável entre as ferramentas de desenvolvimento mais populares por alguns anos. Com o AngularJS 2.0 a caminho, ele provavelmente dominará nos próximos anos.

começando um fundo de private equity

O que é ótimo no desenvolvimento de front-end é que ele é muito recompensador. Nosso trabalho é visível instantaneamente e as pessoas interagem diretamente com os produtos que entregamos. O tempo gasto aprendendo JavaScript , e acredito que devemos nos concentrar na linguagem JavaScript, é um investimento muito bom. É a linguagem da Internet. A competição é super forte! Existe um foco para nós - a experiência do usuário. Para ter sucesso, precisamos cobrir tudo.

O código-fonte usado nestes exemplos pode ser baixado de GitHub . Sinta-se à vontade para baixá-lo e torná-lo seu.

Eu queria dar créditos a quatro desenvolvedores de publicações que mais me inspiraram:

Também gostaria de agradecer a todas as pessoas excelentes nos canais #angularjs e #javascript do FreeNode por muitas conversas excelentes e suporte contínuo.

E, finalmente, lembre-se sempre:

|_+_|