Visão Geral sobre Angular JS

295 visualizações

Publicada em

Apresentação sobre Angular.js 1.X realizada no Instituto Federal Tecnológico de Rio Verde - GO no dia 21 de Outubro de 2015

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
295
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Visão Geral sobre Angular JS

  1. 1. ANGULAR.JS Por: Leonardo Moreira
  2. 2. Leonardo Moreira • Consultor em tecnologia da informação e comunicação, palestrante, professor, MCP - Microsoft Certified Professional, MS - Microsoft Specialist, membro do GDG Rio Verde (Google Developer Group), enxadrista e comedor de lasanha profissional…
  3. 3. 21 de Outubro de 2015
  4. 4. Nós não temos… • Carros voadores • Skates voadores • Hologramas publicitários • Máquinas do tempo • Indutores de sono portáteis
  5. 5. Mas temos….
  6. 6. Angular quem? • Angular.js é uma maneira rápida, fácil, dinâmica e extremamente eficiente de fazer com que o HTML tenha o poder de não apenas exibir conteúdo estático, mas consiga lidar com o consumo de dados dinâmicos com eficácia.
  7. 7. “Angular.js é uma coisa linda de Deus” Leandro Guimarães Developer Front-end – GDG Rio Verde Member
  8. 8. Conceituando… MVC SPA
  9. 9. MVC – Model, View and Controller
  10. 10. SPA – Single Page Application
  11. 11. Angular.js • Framework JavaScript • MVP – MVVM – MVC => MVW (Model View Whatever) • SPA – Single Page Application
  12. 12. Humm.. Me conte mais  • Criado em 2009 por Misko Hevery e Adam Abrons • Mantido atualmente pela Google (Hevery, Igor Minar e Vojta Jina) • Hevery afirmou que refaria o Google Feedbacks em duas semanas
  13. 13. Mas por que usar o Angular.js? • Robusto – Faz todo o trabalho pesado deixando o foco do desenvolviemnto apenas nas regras de negócio; • Reutilizável – Evita códigos redundantes, podendo ser totalmente modularizável e reutilizável; • Menos códigos – Aplicações angular normalmente exigem pouca codificação;
  14. 14. … uau... Tem mais? • Camada de View Abstraida – Aplicações Angular.js são totalmente abstraidas da camada de visualização; • Integração – Não é necessário abandonar o uso de Jquery ou Bootstrap, pois o Angular.js integra-se perfeitamente com componentes e bibliotecas de terceiros;
  15. 15. Quem usa Angular.js?
  16. 16. Os cinco princípios do Angular.js 1. Orientação a dados; 2. Declarativo; 3. Separação de Responsabilidade; 4. Injeção de Dependência; 5. Extensível;
  17. 17. Orientação a Dados • Em uma aplicação tradicional do lado do servidor criamos a interface do usuário (UI – User Interface) mesclando o HTML aos dados locais. Isso significa que sempre que for necessário atualizar algum dado da interface tudo deverá ser carregado novamente, mesmo que o usuário já tenha a maior parte do HTML carregado. Com Single Page Application temos a vantagem de poder enviar do servidor para o cliente apenas os dados.
  18. 18. Declarativo • No desenvolvimento tradicional sempre que o necessitamos criar um elemento como “abas de navegação” ou “datapickers” utilizando as tags da versão do HTML em questão e através de jQuery (por exemplo) codificamos o comportamento daquele elemento. Já com o Angular você simplesmente pode declarar seu próprimos elementos <tabs></tabs> ou <input type=“data” datapicker/>, o Angular se encarregará de fazer toda a regra de negócio.
  19. 19. Separação de Responsabilidade • O Angular trabalha com uma estrutura muito próxima ao MVC (Model View and Controller), ou seja, sua aplicação fica dividida em 3 partes: • Model => Responsável pelo consumo e fornecidamento de dados de dados. É a ponte entre sua aplicação e seu banco de dados. • View => O HTML/CSS em si, onde aplica-se o visual de sua aplicação. • Controller => A força motriz de sua aplicação, onde é feita toda a regra de negócio.
  20. 20. Injeção de Dependência • O Angular é um dos poucos frameworks javaScript a trabalhar com competência com Dependency Injection (DI). • A maneira como o Angular trabalha com DI desobriga o desenvolvedor de declarar novos objetos ou mesmo instancia- los manualmente, basta realizar a declaração de DI que o próprio angular se encarregará de encontrar essas dependências e disponibiliza-las sempre que necessário.
  21. 21. Extensível • O Angular possuí um bom leque de diretivas (veremos logo a seguir o que são) a serem aplicadas para resolver as mais diversas situações, mas também permite que essas diretivas sejam extendidas e personalizadas o que nos possibilita ingerar com mastria componentes e bibliotecas de terceiros como jQueryUI e BootStrap.
  22. 22. Diretivas • Diretivas permitem que aplicações angular sejam feitas sem a necessidade de se preocupar com elementos do DOM.
  23. 23. Principais diretivas • NG-APP • NG-BIND • NG-MODEL • NG-CLASS • NG-CONTROLLER • NG-REPEAT • NG-SHOW / NG-HIDE • NG-SWITCH • NG-VIEW • NG-IF
  24. 24. Por onde começar?
  25. 25. Importando a biblioteca
  26. 26. Angular ng-app / angular.module
  27. 27. Controllers
  28. 28. ng-repeat
  29. 29. O que vem por ai? • TypeScript • Angular.js 2.0
  30. 30. Muito obrigado pela paciência… • Leonardo Moreira • @leomoreirarv • www.fb.com/leonardomelomoreira • www.leonardommoreira.com.br • leonardomm@gmail.com • https://github.com/leomoreirarv/palestra-ifgoiano

×