angularjs: a framework to make your life easier
DESCRIPTION
AngularJS is a javascript framework built and maintained by Google engineers Group, it uses HTML as a "template engine", all this in order to provide a complete solution for the client-side of your application. Also has full compatibility with the most used javascript libraries such as jQuery. It's a new concept for developing web apps client-site.TRANSCRIPT
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/
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