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!