Curso AngularJS - Parte 2

24
Desenvolvimento Web Moderno com AngularJS Parte 2 Alvaro Viebrantz

Transcript of Curso AngularJS - Parte 2

Page 1: Curso AngularJS - Parte 2

Desenvolvimento Web Moderno com AngularJS Parte 2Alvaro Viebrantz

Page 2: Curso AngularJS - Parte 2

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

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

Single Page Application

Page 5: Curso AngularJS - Parte 2

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

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

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

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

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

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

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

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

RotasPokedex Web App

Listagem de pokemons

<conteudo> </conteudo>

Detalhe do pokemon <conteudo>

</conteudo>

Movimentos <conteudo>

Habilidades <conteudo>

Page 14: Curso AngularJS - Parte 2

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

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

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

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

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

Exemplo de Promises Essa é a forma antiga

Page 20: Curso AngularJS - Parte 2

Exemplo de PromisesUsando Promises

Page 21: Curso AngularJS - Parte 2

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

Acessando API

• Utilizar a API pokeapi.co para buscar a lista de pokemons

• Pokedex: /pokedex/1

Page 23: Curso AngularJS - Parte 2

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

Buscando pokemons

• Filtros podem ser feitos facilmente em AngularJS

• ng-model

• filter