Transferir como PDF, PPTX
Carregado porPaulo Roberto Sampaio Bezerra
Spa com angular js flisol 2015 - aquidauana ms
O documento apresenta uma visão geral sobre Single Page Applications (SPAs) e o framework AngularJS, explorando suas definições, funcionamento, vantagens e desvantagens. Além disso, detalha conceitos importantes do AngularJS, como diretivas, data binding, controladores e serviços, incluindo exemplos de código. O conteúdo é destinado a profissionais de TI, com aplicações práticas em sistemas de seleção de bolsistas na UFMS.
Mais conteúdo relacionado
Semelhante a Spa com angular js flisol 2015 - aquidauana ms
Spa com angular js flisol 2015 - aquidauana ms
- 1. Single Page Appscom AngularJS PAULO ROBERTO SAMPAIO BEZERRA ANALISTA DE TI NA UFMS IFMS - Aquidauana, MS - 25/04/2015
- 2. Palestrante Paulo Roberto SampaioBezerra. 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 TODOO 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 issofunciona?
- 8. SPA, como issofunciona? 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 Melhorexperiê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 Aprendermais um framework Páginas com conteúdogerado dinamicamente no lado cliente
- 11. HTML ENHANCED FORWEB 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 mantidopela 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ãomarcadoresde 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 Emaplicativos 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 dedados em sistemas de modelos clássicos
- 16. AngularJS - DataBinding Vinculação dedados no modelo AngularJS
- 17. AngularJS - Controladores NoAngular, 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 NoAngular, 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 Filtrosformatam 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 OAgularJS 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 Bolsistasda UFMS Tela de login do sistema de seleção de bolsistas.
- 24. Sistema de Seleção de Bolsistasda UFMS Tela inicial do sistema de seleção de bolsistas.
- 25. Sistema de Seleção de Bolsistasda UFMS Tela do formulário sócio econômico.
- 26. Sistema de Seleção de Bolsistasda UFMS Relatório para comprovaçãode inscrição do acadêmico.
- 27.
- 28.
- 29.
- 30.
- 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.
- 33.