Novatec

Michael Henrique R. Pereira

AngularJSUma abordagem prática e objetiva

© Novatec Editora Ltda. [2014].

Todos os direitos reservados e protegidos pela Lei 9.610 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 PratesRevisão gramatical: Marta Almeida de SáEditoração eletrônica: Carolina KuwabataAssistente editorial: Priscila Yoshimatsu

ISBN: 978-85-7522-411-3 MP20141118

Histórico de impressões:

Novembro/2014 Primeira edição

Novatec Editora Ltda.Rua Luís Antônio dos Santos 11002460-000 – São Paulo, SP – BrasilTel.: +55 11 2959-6529Email: novatec@novatec.com.brSite: www.novatec.com.brTwitter: twitter.com/novateceditoraFacebook: facebook.com/novatecLinkedIn: linkedin.com/in/novatec

5

Sumário

Prefácio ................................................................................................................11Público-alvo ............................................................................................ 11Referências ..............................................................................................12Versão do AngularJS ................................................................................12Download dos exemplos do livro .............................................................12

Capítulo 1 ■ Introdução ao AngularJS.....................................................................13Visão geral ..............................................................................................13Por que outro framework? ....................................................................... 14Conceitos importantes ............................................................................ 14

Model-View-Whatever (MVW) .......................................................... 14Model View Controller – client side ...................................................15SPA – Single Page Application .............................................................16

Resumo ..................................................................................................16

Capítulo 2 ■ Instalação do AngularJS .....................................................................17Preparação do ambiente de desenvolvimento ............................................ 17

Editores e IDEs mais utilizados no mercado ........................................ 17Instalação do Sublime Text .................................................................18

Instalação do AngularJS .......................................................................... 21Resumo ..................................................................................................23

Capítulo 3 ■ Principais conceitos do AngularJS .......................................................24Configuração da single-page ....................................................................24

Componentes de aplicação single-page AngularJS ...............................24Model (Scope) ........................................................................................25Controllers .............................................................................................25Controllers aninhados .............................................................................27

Boas práticas .....................................................................................28

AngularJS6

Módulos .................................................................................................29Módulo principal por meio da diretiva ng-app .................................... 31Componentes de um módulo ............................................................. 31Sintaxe de injeção de dependências utilizada nos módulos ..................32

Injeção de dependências (DI) ...................................................................32Problemas gerados pela injeção baseada no nome da dependência .......34Solucionando o problema de injeção pelo nome da dependência .........35

View .......................................................................................................36Serviços ..................................................................................................36

Value .................................................................................................37Constant ...........................................................................................38Factory ..............................................................................................39Service...............................................................................................40Provider .............................................................................................42

Diretivas .................................................................................................42A diretiva ng-model e o conceito revolucionário Two-Way Data Binding 43Como criar uma diretiva customizada? ...............................................45

Resumo ..................................................................................................54

Capítulo 4 ■ Formulários e CSS ...............................................................................55View com formulário ..............................................................................55

Diretiva ng-click.................................................................................56Enviando dados do formulário para o servidor ...................................57Classes CSS para o estado do formulário ............................................57Atributos automáticos para campos do formulário ..............................59Diretiva ng-show e ng-hide ................................................................. 61Observando alterações no $scope utilizando $watch ...........................62

Aplicando classes CSS (estilos) aos elementos ...........................................63Utilizando uma função por meio da diretiva ng-class ..........................63Utilizando expressões para acessar atributos do escopo .......................64Utilizando um objeto por meio da diretiva ng-class .............................65

Resumo ..................................................................................................67

Capítulo 5 ■ Filtros ................................................................................................68Overview ............................................................................................... 68Criando filtros customizados ...................................................................69Criando filtros que permitem passagem de parâmetros .............................70Resumo ..................................................................................................72

7Sumário

Capítulo 6 ■ Diretivas – Uma abordagem detalhada ...............................................73Ciclo de vida de uma diretiva ..................................................................73

Fase Compiling ..................................................................................74Fase Linking ......................................................................................74

Definição de uma diretiva por meio do objeto de configuração .................75restrict ....................................................................................................76priority ...................................................................................................76terminal ................................................................................................. 77template ................................................................................................ 77templateUrl ........................................................................................... 77replace ....................................................................................................78scope ......................................................................................................78

scope com valor false ..........................................................................78scope com valor true ..........................................................................79scope com valor object ....................................................................... 81Isolated Scope Bindings ......................................................................82Text Binding – Prefixo@ ....................................................................84One-Way Binding – Prefixo& .............................................................84Two-Way Binding – Prefixo = .............................................................84

transclude .............................................................................................. 86controller e require ................................................................................. 88

Modificadores para o atributo require ............................................... 90Injeção de vários controllers por meio do atributo require ................... 91Utilizando um controller externo por meio do atributo controller ........ 91

compile e link .........................................................................................92pre e post link ................................................................................... 96

Diretivas AngularJS mais utilizadas ..........................................................97ng-app ...............................................................................................97ng-model ...........................................................................................98ng-controller ......................................................................................98ng-bind .............................................................................................98ng-class .............................................................................................99ng-show e ng-hide .............................................................................99ng-{evento} .......................................................................................99ng-src e ng-href ................................................................................100ng-repeat .........................................................................................100

Resumo ................................................................................................ 102

AngularJS8

Capítulo 7 ■ Ciclo de vida .....................................................................................103Introdução ............................................................................................ 103Ciclo de vida de inicialização ................................................................. 103

Fase Compiling ................................................................................ 104Fase Linking .................................................................................... 105

Ciclo de vida em tempo de execução (runtime) ...................................... 107Loop $digest ................................................................................... 107

Resumo .................................................................................................114

Capítulo 8 ■ Eventos ............................................................................................115Abordagem sobre eventos .......................................................................115Ouvindo eventos ....................................................................................115Emitindo eventos ...................................................................................116

Qual a diferença entre $emit e $broadcast ? .......................................116Passando argumentos no evento .............................................................118Resumo .................................................................................................119

Capítulo 9 ■ Mecanismo de rotas .........................................................................120Route Engine ........................................................................................ 120Instalação ............................................................................................. 120Entendendo o conceito de rotas ............................................................. 125

when(path, route) ............................................................................ 126otherwise(params) ........................................................................... 126Diretiva ng-view ............................................................................... 127

Modo Hashbang versus HTML 5 ........................................................... 127Modo hashbang ............................................................................... 127Modo HTML5 ................................................................................. 128

Resumo ................................................................................................ 129

Capítulo 10 ■ Internacionalização e localização ....................................................130Conceito de internacionalização – i18n .................................................. 130

Por que a sigla i18n? ......................................................................... 130Locale ID......................................................................................... 130Como aplicar i18n com AngularJS? ....................................................131

Conceito de localização – l10n ............................................................... 132Por que a sigla l10n? ......................................................................... 132Aplicando localização com Angular Translate .................................... 132

Resumo ................................................................................................ 139

9Sumário

Capítulo 11 ■ Comunicação com um servidor........................................................140Serviço $http ........................................................................................ 140

method............................................................................................ 142url 142params ............................................................................................ 142data................................................................................................. 143headers ............................................................................................ 143transformRequest ............................................................................. 143transformResponse .......................................................................... 144cache ............................................................................................... 145timeout ........................................................................................... 145withCredentials ............................................................................... 145Métodos convenientes existentes no serviço $http ..............................147Interceptadores de requisição ............................................................147

Serviço $resource .................................................................................. 149Como o serviço $resource funciona .................................................. 150Funções JavaScript ........................................................................... 150Funções customizadas no $resource .................................................. 153$resource como um serviço AngularJS .............................................. 159

Resumo ................................................................................................160

Capítulo 12 ■ Outros conceitos AngularJS .............................................................161Promises ................................................................................................161

Como criar uma promise ..................................................................161Como consumir uma promise .......................................................... 165Promises e o loop $digest ................................................................166Promises e o callback de notificação .................................................166Encadeamento de promises ..............................................................166

Cache ...................................................................................................168Atributo capacity do cache ............................................................... 169O cache-padrão HTTP ......................................................................171Capacidade do cache $http ............................................................... 172

Cookies ................................................................................................ 172Outros serviços AngularJS ..................................................................... 173

$window ......................................................................................... 173$document ...................................................................................... 173$templateCache ................................................................................174$parse ..............................................................................................174$location ......................................................................................... 175

AngularJS10

$exceptionHandler ........................................................................... 177$filter .............................................................................................. 177$compile ......................................................................................... 178$timeout ......................................................................................... 179$interval .......................................................................................... 179

Objeto window.angular ......................................................................... 180angular.bootstrap ............................................................................. 180angular.toJson ..................................................................................181angular.fromJson ..............................................................................181angular.module .................................................................................181angular.lowercase ............................................................................. 182angular.uppercase ............................................................................ 182angular.isUndefined ......................................................................... 182angular.isString ................................................................................ 183angular.isObject............................................................................... 183angular.isNumber ............................................................................ 183angular.isFunction ........................................................................... 183angular.isElement ............................................................................ 184angular.isDate .................................................................................. 184angular.isArray ................................................................................ 184angular.forEach ................................................................................ 184angular.element ............................................................................... 185angular.copy .................................................................................... 185

Testes .................................................................................................... 186Node.js ............................................................................................ 186Karma ............................................................................................. 187Jasmine ........................................................................................... 189Testando a aplicação AngularJS ........................................................ 190Debugando a aplicação .................................................................... 193

Resumo ................................................................................................ 193

Capítulo 13 ■ RequireJS e AngularJS ....................................................................194Introdução ............................................................................................ 194AMD e RequireJS .................................................................................. 195

Ordem de carregamento dos arquivos ............................................... 198Integração RequireJS e AngularJS .......................................................... 199

Como o AngularJS foi carregado? .....................................................203Resumo ................................................................................................204

Índice remissivo ..................................................................................................205