Desenvolvimento Web Moderno com AngularJS Parte 2Alvaro Viebrantz
Alvaro ViebrantzAnalista de TI - Sefaz-MTCTO na Startup ProcurixCiência da Computação - UFMT
Cuiabá, MT, Brasil
alvarowolfx
@alvinhuuu
Roadmap
• Single Page Application (SPA)
• Usando Componentes de terceiros
• Rotas com UI-Router
• Aplicação mais complexa consumindo API REST
• Pokedex
Single Page Application
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
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 )
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
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
Vamos fazer uma aplicação
• Pokedex:
• Listagem dos pokemons
Busca
• Detalhes de um pokemon
Evoluções, habilidades e movimentos
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
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
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”
RotasPokedex Web App
Listagem de pokemons
<conteudo> </conteudo>
Detalhe do pokemon <conteudo>
</conteudo>
Movimentos <conteudo>
Habilidades <conteudo>
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
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
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
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
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
ErroSucesso
Notify
Info
Exemplo de Promises Essa é a forma antiga
Exemplo de PromisesUsando Promises
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
Acessando API
• Utilizar a API pokeapi.co para buscar a lista de pokemons
• Pokedex: /pokedex/1
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)
Buscando pokemons
• Filtros podem ser feitos facilmente em AngularJS
• ng-model
• filter
Top Related