AngularJS. Uma abordagem prática e objetiva. Michael Henrique R. Pereira. Novatec

Transcrição

1 AngularJS Uma abordagem prática e objetiva Michael Henrique R. Pereira Novatec

2 Novatec Editora Ltda. [2014]. Todos os direitos reservados e protegidos pela Lei de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora. Editor: Rubens Prates Revisão gramatical: Marta Almeida de Sá Editoração eletrônica: Carolina Kuwabata Assistente editorial: Priscila Yoshimatsu ISBN: MP Histórico de impressões: Novembro/2014 Primeira edição Novatec Editora Ltda. Rua Luís Antônio dos Santos São Paulo, SP Brasil Tel.: novatec@novatec.com.br Site: Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec

3 Sumário Prefácio...11 Público-alvo Referências...12 Versão do AngularJS...12 Download dos exemplos do livro...12 Capítulo 1 Introdução ao AngularJS...13 Visão geral...13 Por que outro framework? Conceitos importantes Model-View-Whatever (MVW) Model View Controller client side...15 SPA Single Page Application...16 Resumo...16 Capítulo 2 Instalação do AngularJS...17 Preparação do ambiente de desenvolvimento Editores e IDEs mais utilizados no mercado Instalação do Sublime Text...18 Instalação do AngularJS Resumo...23 Capítulo 3 Principais conceitos do AngularJS...24 Configuração da single-page...24 Componentes de aplicação single-page AngularJS...24 Model (Scope)...25 Controllers...25 Controllers aninhados...27 Boas práticas

4 6 AngularJS Módulos...29 Módulo principal por meio da diretiva ng-app Componentes de um módulo Sintaxe de injeção de dependências utilizada nos módulos...32 Injeção de dependências (DI)...32 Problemas gerados pela injeção baseada no nome da dependência...34 Solucionando o problema de injeção pelo nome da dependência...35 View...36 Serviços...36 Value...37 Constant...38 Factory...39 Service...40 Provider...42 Diretivas...42 A diretiva ng-model e o conceito revolucionário Two-Way Data Binding.43 Como criar uma diretiva customizada?...45 Resumo...54 Capítulo 4 Formulários e CSS...55 View com formulário...55 Diretiva ng-click...56 Enviando dados do formulário para o servidor...57 Classes CSS para o estado do formulário...57 Atributos automáticos para campos do formulário...59 Diretiva ng-show e ng-hide Observando alterações no $scope utilizando $watch...62 Aplicando classes CSS (estilos) aos elementos...63 Utilizando uma função por meio da diretiva ng-class...63 Utilizando expressões para acessar atributos do escopo...64 Utilizando um objeto por meio da diretiva ng-class...65 Resumo...67 Capítulo 5 Filtros...68 Overview Criando filtros customizados...69 Criando filtros que permitem passagem de parâmetros...70 Resumo...72

5 Sumário 7 Capítulo 6 Diretivas Uma abordagem detalhada...73 Ciclo de vida de uma diretiva...73 Fase Compiling...74 Fase Linking...74 Definição de uma diretiva por meio do objeto de configuração...75 restrict...76 priority...76 terminal template templateurl replace...78 scope...78 scope com valor false...78 scope com valor true...79 scope com valor object Isolated Scope Bindings...82 Text Binding Prefixo@...84 One-Way Binding Prefixo&...84 Two-Way Binding Prefixo =...84 transclude controller e require Modificadores para o atributo require Injeção de vários controllers por meio do atributo require Utilizando um controller externo por meio do atributo controller compile e link...92 pre e post link Diretivas AngularJS mais utilizadas...97 ng-app...97 ng-model...98 ng-controller...98 ng-bind...98 ng-class...99 ng-show e ng-hide...99 ng-{evento}...99 ng-src e ng-href ng-repeat Resumo

6 8 AngularJS Capítulo 7 Ciclo de vida Introdução Ciclo de vida de inicialização Fase Compiling Fase Linking Ciclo de vida em tempo de execução (runtime) Loop $digest Resumo Capítulo 8 Eventos Abordagem sobre eventos Ouvindo eventos Emitindo eventos Qual a diferença entre $emit e $broadcast? Passando argumentos no evento Resumo Capítulo 9 Mecanismo de rotas Route Engine Instalação Entendendo o conceito de rotas when(path, route) otherwise(params) Diretiva ng-view Modo Hashbang versus HTML Modo hashbang Modo HTML Resumo Capítulo 10 Internacionalização e localização Conceito de internacionalização i18n Por que a sigla i18n? Locale ID Como aplicar i18n com AngularJS? Conceito de localização l10n Por que a sigla l10n? Aplicando localização com Angular Translate Resumo

7 Sumário 9 Capítulo 11 Comunicação com um servidor Serviço $http method url 142 params data headers transformrequest transformresponse cache timeout withcredentials Métodos convenientes existentes no serviço $http Interceptadores de requisição Serviço $resource Como o serviço $resource funciona Funções JavaScript Funções customizadas no $resource $resource como um serviço AngularJS Resumo Capítulo 12 Outros conceitos AngularJS Promises Como criar uma promise Como consumir uma promise Promises e o loop $digest Promises e o callback de notificação Encadeamento de promises Cache Atributo capacity do cache O cache-padrão HTTP Capacidade do cache $http Cookies Outros serviços AngularJS $window $document $templatecache $parse $location

8 10 AngularJS $exceptionhandler $filter $compile $timeout $interval Objeto window.angular angular.bootstrap angular.tojson angular.fromjson angular.module angular.lowercase angular.uppercase angular.isundefined angular.isstring angular.isobject angular.isnumber angular.isfunction angular.iselement angular.isdate angular.isarray angular.foreach angular.element angular.copy Testes Node.js Karma Jasmine Testando a aplicação AngularJS Debugando a aplicação Resumo Capítulo 13 RequireJS e AngularJS Introdução AMD e RequireJS Ordem de carregamento dos arquivos Integração RequireJS e AngularJS Como o AngularJS foi carregado? Resumo Índice remissivo...205