ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

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

Model View...Whatever?!?!

MVC

MVVM

MV*

Conceitos

Programação declarativa x Programação imperativa:

HTML como template para o Javascript

Conceitos

Abstração de etapas comodata binding e injeção dedependênciade forma mais simples;

Conceitos

Motor de templates: html = xml

$scope: onde a mágicaacontece

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

M

E

A

N

ongoDB

xpress

ngularJS

odejs

reeze A

Firebase

ngularJS

Comparativos

X

NÃOCriar webapps é muito mais que manipulação do

DOM

Comparativos

X

jQuery(123 linhas):https://github.com/vedovelli/crud-jquery/blob/master/js/custom.js

AngularJS(56 linhas ):https://github.com/vedovelli/crud-

angular/blob/master/js/custom.js

Comparativos

X

Backbone/Emberjs:http://jsfiddle.net/jashkenas/CGSd5/

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

Comparativos

X

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

http://beust.com/weblog/2012/12/29/migrating-from-ember-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...

#SQNhttp://raphaelsaunier.com/talks/jsromandie-angular-ember/#/13/2

“ ”

Casede sucesso

http://www.localytics.com/blog/2013/angularjs-at-localytics/

Game bombermine

http://bombermine.com/#/

Quer saber mais?

Angularjs: http://angularjs.orgBlog 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-Best-

Practices/

ER.T.F.M!

@WILLMENDESNETO

HTTPS://WWW.FACEBOOK.COM/WILSONMENDESNETO

HTTP://ABOUT.ME/WILLMENDESNETO