Single Page Apps com
AngularJS
PAULO ROBERTO SAMPAIO BEZERRA
ANALISTA DE TI NA UFMS
IFMS - Aquidauana, MS - 25/04/2015
Palestrante
Paulo Roberto Sampaio Bezerra.
Formado em Análise de Sistemas pela UFGD.
Especialista em Desenvolvimentode
Apl...
Sumário
Single Page App (SPA)
◦ O que é isso?
◦ Como isso funciona?
◦ Vantagens e Desvantagens.
AngularJS
◦ O que é isso?
...
Single page apps
TODO O SITE EM UMA ÚNICA PÁGINA HTML
SPA, o que é isso?
As SPAs são aplicações completas, que com base nas tecnologia nativas dos browsersweb
(HTML, CSS e Java...
SPA, o que é isso?
Com as últimas versõesdas tecnologias web, HTML5 e CSS3, com a popularidade cada vez
maior da linguagem...
SPA, como isso funciona?
SPA, como isso funciona?
AJAX
◦ acrônimo em língua inglesa de Asynchronous Javascriptand XML
◦ é o uso metodológico de tec...
SPA - Vantagens
Melhor experiência para o usuário
Melhor desempenhona transferência de dados
Redução de carga no lado serv...
SPA - Desvantagens
Aprender mais um framework
Páginas com conteúdogerado dinamicamente no lado cliente
HTML ENHANCED FOR WEB APPS!
H TM L A P RI M ORA D O PA RA A P L I CATI V OS D A W EB!
AngularJS
Framework JavaScript mantido pela Google.
Funciona como uma extenção do documentoHTML
Baseia-se em linguagem dec...
AngularJS - Diretivas
São marcadoresde elementos de uma página HTML(seja um atributo, nome de elemento,
comentário ou clas...
AngularJS - DataBinding
Em aplicativos Angular a sincronizaçãode dados entre os componentesdo modelo e visão é
automática....
AngularJS -
DataBinding
Vinculação de dados em sistemas
de modelos clássicos
AngularJS -
DataBinding
Vinculação de dados no modelo
AngularJS
AngularJS - Controladores
No Angular, o controlador é uma funçãoconstrutorJavaScript que server para ampliar o escopo.
Qua...
AngularJS - Serviços
No Angular, Serviços são objetossubstituíveis que estão ligados entre si usando a injeção de
dependên...
AngularJS - Filtros
Filtros formatam valorese expressõespara serem mostradas na tela do usuário. Podem ser
usadas em templ...
AngularJS - AJAX
O AgularJS fornece duas formas distintas de trabalhar com estas conexões.
A primeira delas, e mais simple...
AngularJS - AJAX - $http
O uso do $http não deveser ignorado, mesmo que o $resourceseja mais poderoso.
Em aplicações simpl...
AngularJS - AJAX - $resource
O $resourceestabelece um padrão de comunicaçãoRESTful entre a aplicação e o servidor.
Para qu...
Sistema de
Seleção de
Bolsistas da
UFMS
Tela de login do sistema de seleção de
bolsistas.
Sistema de
Seleção de
Bolsistas da
UFMS
Tela inicial do sistema de seleção de
bolsistas.
Sistema de
Seleção de
Bolsistas da
UFMS
Tela do formulário sócio econômico.
Sistema de
Seleção de
Bolsistas da
UFMS
Relatório para comprovaçãode
inscrição do acadêmico.
Ferramentas
Outros Frameworks JavaScript MVC
Frameworks Front-end
Materialize
Livros sobre AngularJS
Referências
Single Page Apps
◦ http://imasters.com.br/desenvolvimento/single-page-applications-e-outras-maravilhas-da-web-...
Perguntas!?
Muito Obrigado!
Próximos SlideShares
Carregando em…5
×

Spa com angular js flisol 2015 - aquidauana ms

689 visualizações

Publicada em

Slides da palesta sobre Single Page Apps com AngularJS que eu apresentei no Flisol 2015 promovido pelo IFMS no Campus Aquidauana no dia 25/04/2015.

Publicada em: Software
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
689
No SlideShare
0
A partir de incorporações
0
Número de incorporações
328
Ações
Compartilhamentos
0
Downloads
12
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Spa com angular js flisol 2015 - aquidauana ms

  1. 1. Single Page Apps com AngularJS PAULO ROBERTO SAMPAIO BEZERRA ANALISTA DE TI NA UFMS IFMS - Aquidauana, MS - 25/04/2015
  2. 2. Palestrante Paulo Roberto Sampaio Bezerra. Formado em Análise de Sistemas pela UFGD. Especialista em Desenvolvimentode Aplicativos Utilizando a Tecnologia Java pela Anhanguera/Uniderp. Atualmente é Analista de TI na UFMS, lotado na Divisão de Desenvolvimentode Software (DIDS) no Núcleo de Tecnologia da Informação (NTI). Pai da Valentina!
  3. 3. Sumário Single Page App (SPA) ◦ O que é isso? ◦ Como isso funciona? ◦ Vantagens e Desvantagens. AngularJS ◦ O que é isso? ◦ Principais conceitos ◦ Diretivas, data binding, controladores, serviços, filtros e ajax. ◦ Exemplos de código Sistema de Seleção de Bolsistas da UFMS Ferramentas OutrosFrameworks JavaScript MVC Frameworks Front-end Livros sobreAngularJS Referências Perguntas!?
  4. 4. Single page apps TODO O SITE EM UMA ÚNICA PÁGINA HTML
  5. 5. SPA, o que é isso? As SPAs são aplicações completas, que com base nas tecnologia nativas dos browsersweb (HTML, CSS e JavaScript), não necessitam de uma linguagem server-side para gerar páginas que forneçam as funcionalidades necessárias do lado cliente de uma aplicação web. Funcionam "quase" como se estivessem sendo executadas nativamente no desktop.
  6. 6. SPA, o que é isso? Com as últimas versõesdas tecnologias web, HTML5 e CSS3, com a popularidade cada vez maior da linguagem JavaScript e como o avançodos frameworks JavaScript, as SPAs tem se tornado cada vez mais populares. O Gmail, a busca do Google, o Google Drive, Facebook, o Twitter, o FourSquare,o Instagram são exemplos de SPAs
  7. 7. SPA, como isso funciona?
  8. 8. SPA, como isso funciona? AJAX ◦ acrônimo em língua inglesa de Asynchronous Javascriptand XML ◦ é o uso metodológico de tecnologias como Javascripte XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. JSON ◦ acrônimo para "JavaScript Object Notation" ◦ é um formato leve para intercâmbio de dados computacionais. A simplicidade de JSON tem resultado em seu uso difundido, especialmente como uma alternativa para XML em AJAX.
  9. 9. SPA - Vantagens Melhor experiência para o usuário Melhor desempenhona transferência de dados Redução de carga no lado servidor Facilidade de manutenção Gerenciamentode equipes Facilidade de inclusão de novosfront-ends
  10. 10. SPA - Desvantagens Aprender mais um framework Páginas com conteúdogerado dinamicamente no lado cliente
  11. 11. HTML ENHANCED FOR WEB APPS! H TM L A P RI M ORA D O PA RA A P L I CATI V OS D A W EB!
  12. 12. AngularJS Framework JavaScript mantido pela Google. Funciona como uma extenção do documentoHTML Baseia-se em linguagem declarativa que usa diretivas (parâmetros nas tags do html) para alterar o comportamento padrão do html. Fornecetambém um conjuntode funcionalidades que tornam o desenvolvimento webmuito mais fácil e empolgante, tais como o DataBinding, templates, filtros, diretivas e fácil uso do Ajax.
  13. 13. AngularJS - Diretivas São marcadoresde elementos de uma página HTML(seja um atributo, nome de elemento, comentário ou classe CSS) que são chamadas pelo compilador do AngularJS para anexar um comportamento específico para o elemento DOM ou transformar o elemento DOM e seus filhos. Angular vem com várias dessas diretivas como ngModel, ngClass, ngRepeat, etc. Mas podemos criar nossas próprias diretivas para serem compiladas pelo Angular na inicialização da nossa página. ◦ Ex01: http://jsfiddle.net/bezerra_paulo/xnbk6z0u/ ◦ Ex02: http://jsfiddle.net/bezerra_paulo/7kh7z5ck/
  14. 14. AngularJS - DataBinding Em aplicativos Angular a sincronizaçãode dados entre os componentesdo modelo e visão é automática. A maneira que Angular implementa vinculação de dados permite tratar o modelo como a única fonte de dados verdadeira na sua aplicação. A visão é uma projeçãodo modelo em todos os momentos. Quando o modelo for alterado, a visão reflete a mudança, e vice-versa. O modelo de databinding do AngularJS é chamado de Two-Way-Data-Binding. ◦ Ex03: http://jsfiddle.net/bezerra_paulo/8kp9m37w/
  15. 15. AngularJS - DataBinding Vinculação de dados em sistemas de modelos clássicos
  16. 16. AngularJS - DataBinding Vinculação de dados no modelo AngularJS
  17. 17. AngularJS - Controladores No Angular, o controlador é uma funçãoconstrutorJavaScript que server para ampliar o escopo. Quando o controlador anexado ao DOM pela diretiva ngController,o Angular utiliza a função construtor para ligar um novocontroladora visão, assim como um novo $scope,passado por parâmetro para funçãoconstrutora será injetado no controlador. ◦ Ex04: http://jsfiddle.net/bezerra_paulo/smjtezzy/ ◦ Ex05: http://jsfiddle.net/bezerra_paulo/7n25secn/
  18. 18. AngularJS - Serviços No Angular, Serviços são objetossubstituíveis que estão ligados entre si usando a injeção de dependência(DI). Você pode usar os serviços para organizar e compartilhar código em seu aplicativo. Angular oferece diversosserviços úteis (como $http ), mas para a maioria das aplicações você também vai querer criar o seu próprio. ◦ Ex06: http://jsfiddle.net/bezerra_paulo/o6p8cdrj/
  19. 19. AngularJS - Filtros Filtros formatam valorese expressõespara serem mostradas na tela do usuário. Podem ser usadas em templates, controlesou serviços. ◦ Ex07: http://jsfiddle.net/bezerra_paulo/ponvozce/
  20. 20. AngularJS - AJAX O AgularJS fornece duas formas distintas de trabalhar com estas conexões. A primeira delas, e mais simples, é através do serviço $http , que pode ser injetado em um controller. A segunda forma é através do serviço $resourceque é uma abstração RESTful,funcionando como um data source.
  21. 21. AngularJS - AJAX - $http O uso do $http não deveser ignorado, mesmo que o $resourceseja mais poderoso. Em aplicações simples, ou quando deseja obter dados de uma forma rápida, deve-seutilizar $http. ◦ Ex08: http://jsfiddle.net/bezerra_paulo/p9yzyc19/
  22. 22. AngularJS - AJAX - $resource O $resourceestabelece um padrão de comunicaçãoRESTful entre a aplicação e o servidor. Para que possamos usar esta biblioteca é preciso adicionar o arquivoangular-resource.jsno documento HTML. ◦ Ex09: http://jsfiddle.net/bezerra_paulo/8t713j76/
  23. 23. Sistema de Seleção de Bolsistas da UFMS Tela de login do sistema de seleção de bolsistas.
  24. 24. Sistema de Seleção de Bolsistas da UFMS Tela inicial do sistema de seleção de bolsistas.
  25. 25. Sistema de Seleção de Bolsistas da UFMS Tela do formulário sócio econômico.
  26. 26. Sistema de Seleção de Bolsistas da UFMS Relatório para comprovaçãode inscrição do acadêmico.
  27. 27. Ferramentas
  28. 28. Outros Frameworks JavaScript MVC
  29. 29. Frameworks Front-end Materialize
  30. 30. Livros sobre AngularJS
  31. 31. Referências Single Page Apps ◦ http://imasters.com.br/desenvolvimento/single-page-applications-e-outras-maravilhas-da-web- moderna/ Vantagens do Single Page Apps ◦ http://www.guidefreitas.com/aplicacoes-mvc-client-side-single-page-applications/ AngularJS na Prática - Daniel Schmitz e Douglas Lira ◦ https://leanpub.com/livro-angularJS/read Guide to AngularJS Documentation ◦ https://docs.angularjs.org/guide
  32. 32. Perguntas!?
  33. 33. Muito Obrigado!

×