Curso AngularJS - Parte 2
1 gostou739 visualizações
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.
![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)
Curso AngularJS - Parte 2
- 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
- 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