Curso AngularJS - Parte 2
-
Upload
alvaro-viebrantz -
Category
Technology
-
view
40 -
download
3
Transcript of Curso AngularJS - Parte 2
![Page 1: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/1.jpg)
Desenvolvimento Web Moderno com AngularJS Parte 2Alvaro Viebrantz
![Page 2: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/2.jpg)
Alvaro ViebrantzAnalista de TI - Sefaz-MTCTO na Startup ProcurixCiência da Computação - UFMT
Cuiabá, MT, Brasil
alvarowolfx
@alvinhuuu
![Page 3: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/3.jpg)
Roadmap
• Single Page Application (SPA)
• Usando Componentes de terceiros
• Rotas com UI-Router
• Aplicação mais complexa consumindo API REST
• Pokedex
![Page 4: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/4.jpg)
Single Page Application
![Page 5: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/5.jpg)
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
![Page 6: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/6.jpg)
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 )
![Page 7: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/7.jpg)
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
![Page 8: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/8.jpg)
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
![Page 9: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/9.jpg)
Vamos fazer uma aplicação
• Pokedex:
• Listagem dos pokemons
Busca
• Detalhes de um pokemon
Evoluções, habilidades e movimentos
![Page 10: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/10.jpg)
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
![Page 11: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/11.jpg)
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
![Page 12: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/12.jpg)
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”
![Page 13: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/13.jpg)
RotasPokedex Web App
Listagem de pokemons
<conteudo> </conteudo>
Detalhe do pokemon <conteudo>
</conteudo>
Movimentos <conteudo>
Habilidades <conteudo>
![Page 14: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/14.jpg)
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
![Page 15: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/15.jpg)
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
![Page 16: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/16.jpg)
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
![Page 17: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/17.jpg)
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
![Page 18: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/18.jpg)
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
![Page 19: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/19.jpg)
Exemplo de Promises Essa é a forma antiga
![Page 20: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/20.jpg)
Exemplo de PromisesUsando Promises
![Page 21: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/21.jpg)
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
![Page 22: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/22.jpg)
Acessando API
• Utilizar a API pokeapi.co para buscar a lista de pokemons
• Pokedex: /pokedex/1
![Page 23: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/23.jpg)
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)
![Page 24: Curso AngularJS - Parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042509/55d0a541bb61eb74598b460f/html5/thumbnails/24.jpg)
Buscando pokemons
• Filtros podem ser feitos facilmente em AngularJS
• ng-model
• filter