Introdução ao AngularJS!

361 visualizações

Publicada em

Introdução ao AngularJS, o framework javascript suportado pela Google.

Publicada em: Tecnologia
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
361
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
23
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução ao AngularJS!

  1. 1. Diego Vinicius Costa Siqueira Diullian Cassiano da Silva Casagrande
  2. 2. Roteiro 1. O que é? 2. O que eu preciso saber? 3. Histórico 4. AngularJS (SPA, Diretivas, Controllers, etc.) 5. Comparação 6. Referências
  3. 3. O que é? AngularJS é um framework para o desenvolvimento de aplicações web utilizando a linguagem javascript. Tem o objetivo de facilitar e simplificar o desenvolvimento web através de um modelo MVW, rodando no browser do cliente.
  4. 4. O que eu preciso saber? Javascript • Linguagem de programação que nasceu em 1995. • É a principal linguagem client-side em navegadores web. • Utilizada para controlar HTML a manipular o comportamentos nas páginas web. HTML • Linguagem de marcação criada na década de 1990 • HyperText Markup Language, que significa linguagem de marcação de hipertexto. • Utilizada para produzir páginas web. CSS • Cascading Style Sheets é uma "folha de estilo“ • Realiza a separação entre o formato e o conteúdo do documento.
  5. 5. O que eu preciso saber? Back-End?
  6. 6. Histórico CRIADO POR MISKO HEVERY E ADAM ABRONS EM 2009.
  7. 7. Histórico O nome AngularJs • angle brackets Google • como o Google adotou o AngularJs
  8. 8. Histórico Crescimento comunidade • O fator comunidade é importante para qualquer framework, pois é ela quem move o projeto, tira dúvidas e instiga outros desenvolvedores a usar.
  9. 9. Histórico Crescimento comunidade
  10. 10. Histórico Quem esta usando AngularJs?
  11. 11. AngularJS Suas principais características são: • SPA (Single-Page Application) • Injeção de Dependências • Two-way Data binding • Criação de diretivas (Extensão do HTML) • Controllers • Filters • Versão • Suporte
  12. 12. SPA(Single-Page Application) Gmail
  13. 13. SPA(Single Page Application) • Menos código no servidor • Carregar recursos conforme necessário • Melhor experiência ao usuário
  14. 14. AngularJS Suas principais características são: • Facilita o trabalho com a SPA • Injeção de Dependências • Two-way Data binding • Criação de diretivas (Extensão do HTML) • Controllers • Filters • Versão • Suporte
  15. 15. Injeção de Dependências • Padrão de projeto que determina como um objeto obtém suas dependências. • Desacoplar o código • Tornar mais flexível, organizado e fácil de testar.
  16. 16. AngularJS Suas principais características são: • Facilita o trabalho com a SPA • Injeção de Dependências • Two-way Data binding • Criação de diretivas (Extensão do HTML) • Controllers • Filters • Versão • Suporte
  17. 17. Two-Way Data Binding • A View (html) é atualizada automaticamente quando o Model é alterado. • Modelo é atualizado automaticamente quando um valor na View é alterado.
  18. 18. AngularJS Suas principais características são: • Facilita o trabalho com a SPA • Two-way Data binding • Injeção de Dependências • Criação de diretivas (Extensão do HTML) • Controllers • Filters • Versão • Suporte
  19. 19. Diretivas Diretivas são extensões da linguagem HTML que permitem a implementação de novos comportamentos, de forma declarativa. “Rodrigo Branas”
  20. 20. Diretivas
  21. 21. Diretivas
  22. 22. Diretivas
  23. 23. <gangnam-style> </gangnam-style> Diretivas
  24. 24. Diretivas Elemento <gangnam-style></gangnam-style>
  25. 25. Diretivas Atributo <div gangnam-style></div>
  26. 26. Diretivas Comentário <!–- directive: gangnam-style -->
  27. 27. AngularJS Suas principais características são: • Facilita o trabalho com a SPA • Two-way Data binding • Injeção de Dependências • Criação de diretivas (Extensão do HTML) • Controllers • Filters • Versão • Suporte
  28. 28. Controllers • Ligação entre a View e a Controller
  29. 29. AngularJS Suas principais características são: • Facilita o trabalho com a SPA • Two-way Data binding • Injeção de Dependências • Criação de diretivas (Extensão do HTML) • Controllers • Filters • Versão • Suporte
  30. 30. Filters São funções utilizadas para o pós processamento. • Date: • Currency: • Filter:
  31. 31. AngularJS Suas principais características são: • Facilita o trabalho com a SPA • Two-way Data binding • Injeção de Dependências • Criação de diretivas (Extensão do HTML) • Controllers • Filters • Versão • Suporte
  32. 32. Versão • A versão atual 1.3.15 foi lançada em 20/01/2015 e esta disponível em https://angularjs.org/ • A versão 2.0 esta sendo desenvolvida e já passa por testes.
  33. 33. AngularJS Suas principais características são: • Facilita o trabalho com a SPA • Two-way Data binding • Injeção de Dependências • Criação de diretivas (Extensão do HTML) • Controllers • Filters • Versão • Suporte
  34. 34. Vai rodar em todos os browsers?
  35. 35. Suporte Safari Chrome Firefox Opera E o Internet Explorer? v. 1.2 suporta IE8. v. 1.3 suporta apenas (IE >= 9). SIM! Mas com exceção.
  36. 36. Comparação AngularJS x jQuery
  37. 37. Referências • SCHMITZ, Daniel; LIRA, Douglas. AngularJS na Prática. Disponível em: <https://leanpub.com/livro-angularJS>. Acesso em: 20/05/2015 • SILVA, Diego Farias da; VICENTE, Guilherme de Oliveira. Apresentando o Angular.js. Disponível em: <http://www.dextra.com.br/apresentando-o- angular-js-4/>. Acesso em: 18/05/2015 • BALTIERI, André. Desenvolvendo single-page application (SPA) com AngularJS, Bootstrap e REST. Disponível em: <http://www.infoq.com/br/presentations/desenvolvendo-single-page- application>. Acesso em: 25/05/2015 • ANGULARJS - #1 - Introdução e Hello World - Rodrigo Branas. Direção de Rodrigo Branas, 2015. Disponível em: <https://www.youtube.com/watch?v=_y7rKxqPoyg>. Acesso em: 26 maio 2015.

×