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.

1. Single Page Apps com
AngularJS
PAULO ROBERTO SAMPAIO BEZERRA
ANALISTA DE TI NA UFMS
IFMS - Aquidauana, MS - 25/04/2015

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. 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. Single page apps
TODO O SITE EM UMA ÚNICA PÁGINA HTML

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. 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. SPA, como isso funciona?

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. 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. SPA - Desvantagens
Aprender mais um framework
Páginas com conteúdogerado dinamicamente no lado cliente

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. 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. 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. 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. AngularJS -
DataBinding
Vinculação de dados em sistemas
de modelos clássicos

16. AngularJS -
DataBinding
Vinculação de dados no modelo
AngularJS

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. 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. 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. 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. 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. 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. Sistema de
Seleção de
Bolsistas da
UFMS
Tela de login do sistema de seleção de
bolsistas.

24. Sistema de
Seleção de
Bolsistas da
UFMS
Tela inicial do sistema de seleção de
bolsistas.

25. Sistema de
Seleção de
Bolsistas da
UFMS
Tela do formulário sócio econômico.

26. Sistema de
Seleção de
Bolsistas da
UFMS
Relatório para comprovaçãode
inscrição do acadêmico.

27. Ferramentas

28. Outros Frameworks JavaScript MVC

29. Frameworks Front-end
Materialize

30. Livros sobre AngularJS

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. Perguntas!?

33. Muito Obrigado!