angularjs: a framework to make your life easier

A framework to

Easier Make your life

When am I?

Active participation in Communities and

open source projects;

Collaborate with angular

modules;

Musician in free time;

Once upon a time...

Begins: 2009, march First product: Double Click Youtube for PS3 was created using AngularJS

Single Page Application – SPA

Less Server-side; More Client-side; Frameworks Javascript; More power for Client-side!

Why to use?

“Angular is what HTML would have been

had if designed from applications.” http://docs.angularjs.org/guide/overview

Model View...Whatever?!?!

MVC

MVVM

MV*

Concepts

Declarative programming x Imperative programming: HTML as template for Javascript

Concepts

Data binding and dependency injection abstraction;

Concepts

Template engine: html = xml

$scope: when the magic happens

Angularjs application flow

Yes, Two-Way Data Binding!

Three-way? Calm, will see soon =)

Why to use?

Productive improvements and software maintenance;

Write (much) less, do more!

Directives = future! (modularity, isolate/complexity abstracted)

Flexibility: easy integration with external libraries

+ =

Why not?

Want to know more?

http://developer.chrome.com/trunk/apps/angular_framework.

html

Why to use?

Grunt, Yeoman,...

Generator-angular: https://github.com/yeoman/generator-angular

Why to use?

Karma – Test Runner For Javascript

Why to use?

Angularjs and Security = $http

* Vulnerable JSON

[‘angularjs’, ‘framework’, ‘awesome’]

* Secure JSON

)]}’, [‘angularjs’, ‘framework’, ‘awesome’]

Want to know more? 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

F irebase

ngularJS

Comparatives

X

NO

Webapps creation is much more than DOM manupulation

Comparatives

X

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

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

angular/blob/master/js/custom.js

Comparatives

X

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

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

Comparatives

X

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

http://beust.com/weblog/2012/12/29/migrating-from- ember-js-to-angularjs/

More comparatives?

http://todomvc.com/

Angularjs, Backbonejs, Canjs ou Emberjs?

Comparative between 4 frameworks javascript most Concepteds actually (not so impartial...)

http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can -ember/?utm_source=javascriptweekly&utm_medium=email

Two-way bindings

Comparative of two-way bindings useds in Angular, Ember e Knockout

http://projects.mariusgundersen.net/JSconf2013/

Then you ask yourself:

With all these features in AngularJS, it must be very

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

“ ”

Success Cases

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

Bombermine Game

http://bombermine.com/#/

Want to know more?

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-Best-

Practices/

AND R.T.F.M!

@WILLMENDESNETO

HTTPS://WWW.FACEBOOK.COM/WILSONMENDESNETO

HTTP://ABOUT.ME/WILLMENDESNETO