Baixado 28 vezes
![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](https://image.slidesharecdn.com/cursoangular-parte2-150707000751-lva1-app6891/85/Curso-AngularJS-Parte-2-18-320.jpg)
Carregado porAlvaro Viebrantz
Curso AngularJS - Parte 2
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.
Mais conteúdo relacionado
Semelhante a Curso AngularJS - Parte 2
Curso AngularJS - Parte 2
- 1. Desenvolvimento Web Moderno comAngularJS 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 PageApplication (SPA) • Usando Componentes de terceiros • Rotas com UI-Router • Aplicação mais complexa consumindo API REST • Pokedex
- 4.
- 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 umaSPA • 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 umaSPA • 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 umaSPA • 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 umaaplicaçã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 SPApodemos 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 Listagemde 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 primeirarota • 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 • Angularpossui 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 UsandoPromises
- 21. PokeAPI - Restfulwebservice • 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 • Utilizara API pokeapi.co para buscar a lista de pokemons • Pokedex: /pokedex/1
- 23. Melhorando dados daAPI • 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 • Filtrospodem ser feitos facilmente em AngularJS • ng-model • filter