• Evite a utilização de jQuery • http://youmightnotneedjquery.com/ • Atenção nos operadores js !=, ===, == • Atenção nos erros do JSHint • promises para fluxo de execução assíncrono. • princípio da responsabilidade única.
• Uma declaração por arquivo, facilita na manutenção, leitura, testes e para realizar mocs. • Defina funções pequenas, que realizam poucas atividades, facilita em manter e no reaproveitamento. • Envolva seu código angular em uma IIFE, evitando variáveis globais.
• As definições de um módulo não devem reservar uma variável. • Divida sua aplicação em sub-módulos de módulos. • Use um nome único para os sub- módulos app.algumaCoisa • O módulo principal deve herdar outros sub-módulos. angular.module()
• Utilize a syntax controllerAs para realizar o bind da view com o controller, diretamente no $routeProvider. • Ao utilizar o controllerAs, você acessa o $scope do seu controller utilizando o this. • Guarde o contexto do controller utilizando vm. • Evite escrever lógica no controller, para isto utilize services e factories. angular.controller()
• Evite funções anônimas como callback. • Utilize menos angular e mais javascript. • Defina um controller para uma view e tente não reusar o controller para outras views. • Defina os nomes dos controllers em UpperCamelCase é convencional para objetos que podem ser instanciados usando um construtor. Ex.: new angular.controller()
• Utilize o sufixo MainController ou MainCtrl. • Exponha os elementos que recebem bind no início da declaração da função. • Defina a função do método antes de instanciar o próprio método. jslint: function was declared before used • Utilize on-time-binding sempre que possível. angular.controller()
• Service é uma função construtora e será instanciada utilizando o new (por debaixo dos panos) • Exponha os métodos que são retornados pelo objeto do método no topo da declaração. • Utilize em operações que tenham persistência de informação. Ex.: localStorage, angular.value() • Devem ser como classes, utilizando o this torna a função mais consistente. • É um tipo de serviço do angular. angular.service()
• São singletons e retornam um objeto que contém os membros do serviço. • Utilize factory quando houver requisições XHR (por exemplo) • É um tipo de serviço do angular. • Guarda toda a lógica de negócios. endpoints da api, manipulações no Banco. • Deverá retornar um objeto angular.factory()
• manipulações do DOM, deverão ser realizadas utilizando diretivas. • método link da diretiva é o responsável pelo código da manipulação. • O nome das diretivas devem ser em camelCase sendo a primeira letra minúscula. • Adicione um prefixo para as suas diretivas. • Evite diretivas como classes ou comentários. angular.directive()
• Utilize como atributo, caso seja manipulação de estilo. • Utilize como elemento, caso seja manipulação ou inserção do DOM. • Utilize a syntax controllerAs também nas diretivas. • Utilize bindToController = true quando utilizar controllerAs na diretiva. • Angular utiliza por default uma versão do jQuery mais resumida, chamada de jQlite, facilitando a manipulação. angular.directive()
• Envolva todo o seu código em uma IIFE, isto evita poluição no escopo global. • Mantenha o nome dos arquivos legíveis e consistentes, auxiliam na manutenção e na hora de achar alguma coisa em algum lugar. • Separe as pastas e arquivos por módulos. • ng-annotate é indicado para injeção das dependências e minificação. • Otimize o binding da view com o one- timing-biding. vanilla js e angular
• Resolva as dependências do controller utilizando o resolve do $routeProvider. • Crie filtros globais: angular.filter(), nunca dentro de controllers ou services. • Para gerar documentação com comentário no código, utilize o ngDocs ou jsDoc. • Trabalhe com promises. • Trate erros relacionados a rotas com $routeChangeError vanilla js e angular
• Use convenções clara para nomenclatura dos arquivos. feature.type.js (arquivos) feature.type.spec.js (testes) • Gerencie todas as suas dependências de forma automatizadas (bower, npm). • Crie pequenos módulos que encapsulam uma responsabilidade • Mantenha o app.js limpo e claro, ele servirá como um "manifesto" contendo o que tem e o que não tem injetado na sua aplicação. vanilla js e angular
• Utilize a notação @ngInject para injetar de forma automática as dependências. (ponto negativo por ser um comentário) • Para injetar de forma manual, utilize o provider $inject. • Utilize ng-if ao invés de ng-show. • Utilize ngRepeat + track-by • Habilite patterns assíncronos com ngModelOptions. Ex.: debounce vanilla js e angular
• Não utilize ng-include em ng-repeat. (em loops de iteração) • Evite filtrar/tratar dados no template. • Utilize $log ao invés de console. • $timeOut ao invés de setTimeOut. • $interval ao invés de setInterval. • Evite múltiplas declarações, no javascript cada declaração é uma operação. vanilla js e angular
• Apenas utilize $scope para delegar eventos. ($emit, $broadcast, $on) • Evite utilizar $scope.$watch, para ser mais performático utilize a diretiva ng-change. • Na injeção de dependências, adicione primeiro os providers do Angular, depois adicione os seus. vanilla js e angular
thulioph
antyadev
codemountains
mot_techtalk
parttimenerd
niftycorp
chimame
h0r15h0
zakky21
rdmueller
ohakutsu
codehex
kazupon
chriscoyier
hursman
rmw
ddemaree
sugarenia
aarron
jmmastey
edds
pedronauck
garrettdimon
smashingmag
lara