O documento apresenta um framework chamado AngularJS, descrevendo seus conceitos e vantagens, como programação declarativa, data binding e injeção de dependência. Também compara o AngularJS com outros frameworks como jQuery, Backbone e Ember, mostrando que o AngularJS permite desenvolver aplicações web de forma mais concisa e produtiva.

1. Um framework para
Facilitar
sua vida

2. Quem sou eu?
Participação ativa em
comunidades;
Colaborador em
projetos open source como
Codeigniter e Grocery CRUD;
Músico nas horas vagas;

3. Era uma vez...
Marco inicial: 2009
Primeiro produto: Double Click
Youtube for PS3 foi construído com AngularJS

4. Single Page Application – SPA
Menos Server-side;
Mais Client-side;
Frameworks Javascript;
Mais poder para o Client-side!

5. Porque usar?
“Angular é o HTML teria sido se tivesse
sido projetado para aplicações.”
http://docs.angularjs.org/guide/overview

6. MVC
MVVM
MV*
Model View...Whatever?!?!

7. Conceitos
Programação declarativa x Programação imperativa:
HTML como template para o Javascript

8. Conceitos
Abstração de etapas como data binding e injeção de
dependência de forma mais simples;

9. Conceitos
Motor de templates: html = xml

10. $scope: onde a mágica acontece
Fluxo de uma aplicação com angularjs

11. Sim, Two-Way Data Binding!
Three-way?
Calma, daqui a pouco =)

12. Porque usar?
Melhorias na produtividade e manutenção do software;
Escreva (bem) menos, faça mais!
Diretivas = futuro!
(modularidade, isolamos/abstraímos a complexidade)
Flexibilidade: fácil integração com bibliotecas externas

13. =
+
Porque não?
Quer saber mais?
http://developer.chrome.com/trunk/apps/angular_framework.
html

14. Porque usar?
Grunt, Yeoman,...
Generator-angular:
https://github.com/yeoman/generator-angular

15. Porque usar?
Karma – Test Runner For Javascript

16. Porque usar?

17. Angularjs e Segurança = $http
* Json vulnerável
[‘angularjs’, ‘framework’, ‘awesome’]
* Json seguro
)]}’,
[‘angularjs’, ‘framework’, ‘awesome’]
Quer saber mais? http://docs.angularjs.org/api/ng.$http

18. Mean? B-Mean? Three-way data bind?
B reeze
M ongoDB
E xpress
AngularJS
N odejs
A ngularJS
F irebase

19. Comparativos
X
NÃO
Criar webapps é muito mais que manipulação do
DOM

20. Comparativos
X
AngularJS(56 linhas ):
https://github.com/vedovelli/crudangular/blob/master/js/custom.js
jQuery(123 linhas):
https://github.com/vedovelli/crudjquery/blob/master/js/custom.js

21. Comparativos
X
AngularJS:
http://jsfiddle.net/mhevery/vYknU/23/
Backbone/Emberjs:
http://jsfiddle.net/jashkenas/CGSd5/

22. Comparativos
X
http://dybskiy.com/js-mvc-angular-vs-ember/
http://beust.com/weblog/2012/12/29/migrating-fromember-js-to-angularjs/

23. Mais comparativos?
http://todomvc.com/

24. Angularjs, Backbonejs, Canjs ou Emberjs?
Comparativo entre os 4 frameworks javascript mais
conceituados da atualidade (nem tão imparcial assim)
http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can
-ember/?utm_source=javascriptweekly&utm_medium=email

25. Two-way bindings
Comparativo de two-way bindings utilizados nos Frameworks
Angular, Ember e Knockout
http://projects.mariusgundersen.net/JSconf2013/

26. Aí você se pergunta:
“
Com tudo isso que o AngularJS me oferece ele deve ser muito
pesado...
”
#SQN
http://raphaelsaunier.com/talks/jsromandie-angularember/#/13/2

27. Case de sucesso
http://www.localytics.com/blog/2013/angularjs-at-localytics/

28. Game bombermine
http://bombermine.com/#/

30. Quer saber mais?
Angularjs: http://angularjs.org
Blog Angularjs: http://blog.angularjs.org/
Built with Angular: http://builtwith.angularjs.org/
Bombermine: http://bombermine.com/#/
Egghead.io: http://egghead.io/
Advanced Design Patterns and Best Practices:
http://trochette.github.io/Angular-Design-Patterns-BestPractices/
E
R.T.F.M!

31. @WILLMENDESNETO
HTTPS://WWW.FACEBOOK.COM/WILSONMENDESNETO
HTTP://ABOUT.ME/WILLMENDESNETO