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

1. Diego Vinicius Costa Siqueira
Diullian Cassiano da Silva Casagrande

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. 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. 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. O que eu preciso saber?
Back-End?

6. Histórico
CRIADO POR MISKO HEVERY E ADAM ABRONS EM 2009.

7. Histórico
O nome AngularJs
• angle brackets
Google
• como o Google adotou o AngularJs

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. Histórico
Crescimento comunidade

10. Histórico
Quem esta usando AngularJs?

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. SPA(Single-Page Application)
Gmail

13. SPA(Single Page Application)
• Menos código no servidor
• Carregar recursos conforme necessário
• Melhor experiência ao usuário

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. 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. 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. Two-Way Data Binding
• A View (html) é atualizada automaticamente quando o Model é alterado.
• Modelo é atualizado automaticamente quando um valor na View é alterado.

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. Diretivas
Diretivas são extensões da linguagem HTML que
permitem a implementação de novos
comportamentos, de forma declarativa.
“Rodrigo Branas”

20. Diretivas

21. Diretivas

22. Diretivas

23. <gangnam-style>
</gangnam-style>
Diretivas

24. Diretivas
Elemento
<gangnam-style></gangnam-style>

25. Diretivas
Atributo
<div gangnam-style></div>

26. Diretivas
Comentário
<!–- directive: gangnam-style -->

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. Controllers
• Ligação entre a View e a Controller

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. Filters
São funções utilizadas para o pós processamento.
• Date:
• Currency:
• Filter:

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. 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. 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. Vai rodar em todos os browsers?

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. Comparação
AngularJS x jQuery

38. 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.