Este documento discute o desenvolvimento de aplicações web modernas com AngularJS. Ele aborda tópicos como criação de Single Page Applications, uso de componentes de terceiros, rotas com UI-Router e consumo de APIs REST. O documento também fornece instruções para construir uma aplicação Pokedex que lista, busca e exibe detalhes de Pokémons.

1. Desenvolvimento Web
Moderno com AngularJS
Parte 2
Alvaro Viebrantz

2. AlvaroViebrantz
Analista de TI - Sefaz-MT
CTO na Startup Procurix
Ciência da Computação - UFMT
Cuiabá, MT, Brasil
alvarowolfx
@alvinhuuu

3. Roadmap
• Single Page Application (SPA)
• Usando Componentes de terceiros
• Rotas com UI-Router
• Aplicação mais complexa consumindo API REST
• Pokedex

4. Single Page Application

5. Single Page Application (SPA)
• Aplicação Web que cabe totalmente em apenas uma página
• Todo o conteúdo é carregado no inicio da aplicação ou os
recursos são carregados dinamicamente
• Dá a sensação de aplicação desktop
• Interface mais fluida
• Não é necessário recarregar toda a pagina ao navegar
para algum recurso

6. Desafios de uma SPA
• Segurança ?
• Todo código vai para o cliente
• Minificação e obsfucação
• Comunicação com o servidor
• HTTPS
• Autenticação
• Auteticação via token ( Recomendo http://jwt.io )

7. Desafios de uma SPA
• Pesado ?
• Tempo inicial de carregamento da página
• Recursos podem ser carregados dinamicamente
• Framework de rotas ajudam neste problema
Templates e views carregados dinamicamente

8. Desafios de uma SPA
• Google bot
• Fornecer conteúdo HTML a ser indexado
• Que conteúdo precisa ser indexado ?
• Gerar cache usar renderização no lado servidor

9. Vamos fazer uma aplicação
• Pokedex:
• Listagem dos pokemons
Busca
• Detalhes de um pokemon
Evoluções, habilidades e movimentos

10. Criar estrutura inicial
• Iniciar com bower e declarar as depêndencias
• bower init
• Instalar via npm o Browser-Sync
• Server para a aplicação com livereload
• http://browersync.io
• npm install -g browser-sync

11. Componentes de terceiros
• Vamos usar para a aplicação
• Angular JS
• bower install angular —save
• Twitter Bootstrap
• bower install bootstrap —save
• UI - Bootstrap : Implementação dos componentes do Twitter bootstrap em
angularjs
• bower install angular-bootstrap —save
• UI - Router
• bower install ui-router —save

12. Rotas
• Em SPA podemos ter várias “paginas” dentro
mantendo página principal
• E essas páginas podem ser constituídas de pequenas
subpáginas, tornando mais modular o código
• Geralmente temos esse conceito de Rotas dentro de
SPA, para organizar o fluxo entre essa troca de
“páginas”

13. Rotas
Pokedex Web App
Listagem de
pokemons
<conteudo>
</conteudo>
Detalhe do pokemon
<conteudo>
</conteudo>
Movimentos
<conteudo>
Habilidades
<conteudo>

14. Rotas em Angular
• Possui modulo de rotas, o ngRoute
• Bem simples
• Trata o conceito de estado da aplicação (State)
• O modulo UI-Router é bastante utilizado por possibilitar
rotas mais complexas
• View aninhadas
• Views nomeadas

15. Rotas com UI-Router
• Usando UI-Router temos os seguintes services para configurar
• $stateProvider: Configura todos os estados da aplicação
• Metodo $stateProvider.state
• url
• templateUrl
• controller
• $urlRouterProvider: Configura o estado inicial da aplicação
• otherwise : Rota default

16. Configurar a primeira rota
• Usando UI-Router temos os seguintes services para
configurar
• Configurar a rota da lista de pokemons
• Estado: pokemons
• Template : templates/pokemons.html
• Controller: PokemonsController

17. Consumindo API
• Angular possui o módulo $http que possibilita o acesso
a serviços web
• Métodos HTTP padrão: get, post, put, delete e etc.
• Funciona utilizando um tipo de Promise
• Altamente configurável, possui suporte até mesmo a
cache interno da aplicação
• Suporte a filtros de requisição

18. Promise
Fullfilled
Array[Pokemons]
Promises ?
• Motivação
• Abstração para tarefas assíncronas
• Tem o objetivo de tentar melhorar o callback hell em js
• Semântica confusa ao passar um callback
https://www.promisejs.org
Promise
Promise
Pending
Promise
Reject
Erro
New
Erro
Sucesso
Notify
Info

19. Exemplo de Promises
Essa é a forma antiga

20. Exemplo de Promises
Usando Promises

21. PokeAPI - Restful webservice
• A API pokeapi.co possui alguns recursos, todos são de
leitura usando acessados via GET
• Pokedex: Listagem dos pokemons
• Pokemon: Detalhes de um pokemon
• Media e Sprite: Imagens de um pokemon
• Moves e Ability: Detalhes de cada habilidade e
movimentos do jogo

22. Acessando API
• Utilizar a API pokeapi.co para buscar a lista de
pokemons
• Pokedex: /pokedex/1

23. Melhorando dados da API
• A listagem padrão da API tem dois problemas:
• Não traz as imagens dos pokemons (enhance)
• Pokemons Mega ainda não estão legais na API (filter)
• Os dados não estão ordenados (tidy up)

24. Buscando pokemons
• Filtros podem ser feitos facilmente em AngularJS
• ng-model
• filter