Um framework para

Facilitar

sua vida
Quem sou eu?
Participação ativa em
comunidades;
Colaborador em
projetos open source como
Codeigniter e Grocery CRUD;
Músico nas horas vagas;
Era uma vez...
Marco inicial: 2009
Primeiro produto: Double Click

Youtube for PS3 foi construído com AngularJS
Single Page Application – SPA
Menos Server-side;
Mais Client-side;
Frameworks Javascript;

Mais poder para o Client-side!
Porque usar?

“Angular é o HTML teria sido se tivesse
sido projetado para aplicações.”
http://docs.angularjs.org/guide/overview
MVC
MVVM
MV*

Model View...Whatever?!?!
Conceitos
Programação declarativa x Programação imperativa:
HTML como template para o Javascript
Conceitos
Abstração de etapas como data binding e injeção de
dependência de forma mais simples;
Conceitos
Motor de templates: html = xml
$scope: onde a mágica acontece
Fluxo de uma aplicação com angularjs
Sim, Two-Way Data Binding!

Three-way?

Calma, daqui a pouco =)
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
=

+

Porque não?
Quer saber mais?
http://developer.chrome.com/trunk/apps/angular_framework.
html
Porque usar?
Grunt, Yeoman,...

Generator-angular:
https://github.com/yeoman/generator-angular
Porque usar?
Karma – Test Runner For Javascript
Porque usar?
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
Mean? B-Mean? Three-way data bind?

B reeze
M ongoDB
E xpress
AngularJS
N odejs

A ngularJS
F irebase
Comparativos

X

NÃO
Criar webapps é muito mais que manipulação do
DOM
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
Comparativos

X
AngularJS:

http://jsfiddle.net/mhevery/vYknU/23/

Backbone/Emberjs:

http://jsfiddle.net/jashkenas/CGSd5/
Comparativos

X

http://dybskiy.com/js-mvc-angular-vs-ember/

http://beust.com/weblog/2012/12/29/migrating-fromember-js-to-angularjs/
Mais comparativos?

http://todomvc.com/
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
Two-way bindings
Comparativo de two-way bindings utilizados nos Frameworks
Angular, Ember e Knockout

http://projects.mariusgundersen.net/JSconf2013/
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
Case de sucesso
http://www.localytics.com/blog/2013/angularjs-at-localytics/
Game bombermine
http://bombermine.com/#/
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!
@WILLMENDESNETO
HTTPS://WWW.FACEBOOK.COM/WILSONMENDESNETO
HTTP://ABOUT.ME/WILLMENDESNETO

ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Notas do Editor