ANGULAR.JS
Por: Leonardo Moreira
Leonardo Moreira
• Consultor em tecnologia da informação
e comunicação, palestrante, professor,
MCP - Microsoft Certified ...
21 de Outubro de 2015
Nós não temos…
• Carros voadores
• Skates voadores
• Hologramas publicitários
• Máquinas do tempo
• Indutores de sono port...
Mas temos….
Angular quem?
• Angular.js é uma maneira rápida, fácil, dinâmica e
extremamente eficiente de fazer com que o HTML tenha o
...
“Angular.js é uma coisa
linda de Deus”
Leandro Guimarães
Developer Front-end – GDG Rio Verde Member
Conceituando…
MVC
SPA
MVC – Model, View and Controller
SPA – Single Page Application
Angular.js
• Framework JavaScript
• MVP – MVVM – MVC => MVW (Model View Whatever)
• SPA – Single Page Application
Humm.. Me conte mais 
• Criado em 2009 por Misko Hevery e Adam Abrons
• Mantido atualmente pela Google (Hevery, Igor Mina...
Mas por que usar o Angular.js?
• Robusto – Faz todo o trabalho pesado deixando o foco do
desenvolviemnto apenas nas regras...
… uau... Tem mais?
• Camada de View Abstraida – Aplicações Angular.js são
totalmente abstraidas da camada de visualização;...
Quem usa Angular.js?
Os cinco princípios do Angular.js
1. Orientação a dados;
2. Declarativo;
3. Separação de Responsabilidade;
4. Injeção de D...
Orientação a Dados
• Em uma aplicação tradicional do lado do servidor criamos a
interface do usuário (UI – User Interface)...
Declarativo
• No desenvolvimento tradicional sempre que o necessitamos
criar um elemento como “abas de navegação” ou “data...
Separação de Responsabilidade
• O Angular trabalha com uma estrutura muito próxima ao MVC
(Model View and Controller), ou ...
Injeção de Dependência
• O Angular é um dos poucos frameworks javaScript a trabalhar
com competência com Dependency Inject...
Extensível
• O Angular possuí um bom leque de diretivas (veremos logo a
seguir o que são) a serem aplicadas para resolver ...
Diretivas
• Diretivas permitem que aplicações angular sejam feitas sem a
necessidade de se preocupar com elementos do DOM.
Principais diretivas
• NG-APP
• NG-BIND
• NG-MODEL
• NG-CLASS
• NG-CONTROLLER
• NG-REPEAT
• NG-SHOW / NG-HIDE
• NG-SWITCH
...
Por onde começar?
Importando a biblioteca
Angular ng-app / angular.module
Controllers
ng-repeat
O que vem por ai?
• TypeScript
• Angular.js 2.0
Muito obrigado pela paciência…
• Leonardo Moreira
• @leomoreirarv
• www.fb.com/leonardomelomoreira
• www.leonardommoreira....
Próximos SlideShares
Carregando em…5
×

Visão Geral sobre Angular JS

317 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
317
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
9
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

×