Single Page Apps com AngularJS PAULO ROBERTO SAMPAIO BEZERRA ANALISTA DE TI NA UFMS IFMS - Aquidauana, MS - 25/04/2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Single Page Apps com AngularJSPAULO ROBERTO SAMPAIO BEZERRA
ANALISTA DE TI NA UFMS
IFMS - Aquidauana, MS - 25/04/2015
PalestrantePaulo Roberto Sampaio Bezerra.
Formado em Análise de Sistemas pela UFGD.
Especialista em Desenvolvimento de Aplicativos Utilizando a Tecnologia Java pela Anhanguera/Uniderp.
Atualmente é Analista de TI na UFMS, lotado na Divisão de Desenvolvimento de Software (DIDS) no Núcleo de Tecnologia da Informação (NTI).
Pai da Valentina!
SumárioSingle 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
Outros Frameworks JavaScript MVC
Frameworks Front-end
Livros sobre AngularJS
Referências
Perguntas!?
Single page appsTODO 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 browsers web (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.
SPA, o que é isso?Com as últimas versões das tecnologias web, HTML5 e CSS3, com a popularidade cada vez maior da linguagem JavaScript e como o avanço dos 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
SPA, como isso funciona?
SPA, como isso funciona?AJAX ◦ acrônimo em língua inglesa de Asynchronous Javascript and XML
◦ é o uso metodológico de tecnologias como Javascript e 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.
SPA - VantagensMelhor experiência para o usuário
Melhor desempenho na transferência de dados
Redução de carga no lado servidor
Facilidade de manutenção
Gerenciamento de equipes
Facilidade de inclusão de novos front-ends
SPA - DesvantagensAprender mais um framework
Páginas com conteúdo gerado dinamicamente no lado cliente
HTML ENHANCED FOR WEB APPS!
H T M L A P R I M O R A D O PA R A A P L I C AT I V O S D A W E B !
AngularJSFramework JavaScript mantido pela Google.
Funciona como uma extenção do documento HTML
Baseia-se em linguagem declarativa que usa diretivas (parâmetros nas tags do html) para alterar o comportamento padrão do html.
Fornece também um conjunto de funcionalidades que tornam o desenvolvimento web muito mais fácil e empolgante, tais como o DataBinding, templates, filtros, diretivas e fácil uso do Ajax.
AngularJS - DiretivasSão marcadores de 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/
AngularJS - DataBindingEm aplicativos Angular a sincronização de dados entre os componentes do 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ção do 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/
AngularJS -DataBindingVinculação de dados em sistemas de modelos clássicos
AngularJS -DataBindingVinculação de dados no modelo AngularJS
AngularJS - ControladoresNo Angular, o controlador é uma função construtor JavaScript 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 novo controlador a visão, assim como um novo $scope, passado por parâmetro para função construtora será injetado no controlador.
◦ Ex04: http://jsfiddle.net/bezerra_paulo/smjtezzy/
◦ Ex05: http://jsfiddle.net/bezerra_paulo/7n25secn/
AngularJS - ServiçosNo Angular, Serviços são objetos substituí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 diversos serviç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/
AngularJS - FiltrosFiltros formatam valores e expressões para serem mostradas na tela do usuário. Podem ser usadas em templates, controles ou serviços.
◦ Ex07: http://jsfiddle.net/bezerra_paulo/ponvozce/
AngularJS - AJAXO 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 $resource que é uma abstração RESTful, funcionando como um data source.
AngularJS - AJAX - $httpO uso do $http não deve ser ignorado, mesmo que o $resource seja mais poderoso.
Em aplicações simples, ou quando deseja obter dados de uma forma rápida, deve-se utilizar $http.
◦ Ex08: http://jsfiddle.net/bezerra_paulo/p9yzyc19/
AngularJS - AJAX - $resourceO $resource estabelece um padrão de comunicação RESTful entre a aplicação e o servidor.
Para que possamos usar esta biblioteca é preciso adicionar o arquivo angular-resource.js no documento HTML.
◦ Ex09: http://jsfiddle.net/bezerra_paulo/8t713j76/
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ção de inscrição do acadêmico.
Ferramentas
Outros Frameworks JavaScript MVC
Frameworks Front-end
Materialize
Livros sobre AngularJS
ReferênciasSingle 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
Perguntas!?
Muito Obrigado!
Related Documents
