AngularJS: A framework to make your life easier
-
Upload
wilson-mendes -
Category
Technology
-
view
245 -
download
1
description
Transcript of AngularJS: A framework to make your life easier
![Page 1: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/1.jpg)
A framework to
Easier Make your life
![Page 2: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/2.jpg)
When am I?
Active participation in Communities and
open source projects;
Collaborate with angular
modules;
Musician in free time;
![Page 3: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/3.jpg)
Once upon a time...
Begins: 2009, march First product: Double Click Youtube for PS3 was created using AngularJS
![Page 4: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/4.jpg)
Single Page Application – SPA
Less Server-side; More Client-side; Frameworks Javascript; More power for Client-side!
![Page 5: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/5.jpg)
Why to use?
“Angular is what HTML would have been
had if designed from applications.” http://docs.angularjs.org/guide/overview
![Page 6: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/6.jpg)
Model View...Whatever?!?!
MVC
MVVM
MV*
![Page 7: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/7.jpg)
Concepts
Declarative programming x Imperative programming: HTML as template for Javascript
![Page 8: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/8.jpg)
Concepts
Data binding and dependency injection abstraction;
![Page 9: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/9.jpg)
Concepts
Template engine: html = xml
![Page 10: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/10.jpg)
$scope: when the magic happens
Angularjs application flow
![Page 11: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/11.jpg)
Yes, Two-Way Data Binding!
Three-way? Calm, will see soon =)
![Page 12: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/12.jpg)
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
![Page 13: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/13.jpg)
+ =
Why not?
Want to know more?
http://developer.chrome.com/trunk/apps/angular_framework.
html
![Page 14: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/14.jpg)
Why to use?
Grunt, Yeoman,...
Generator-angular: https://github.com/yeoman/generator-angular
![Page 15: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/15.jpg)
Why to use?
Karma – Test Runner For Javascript
![Page 16: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/16.jpg)
Why to use?
![Page 17: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/17.jpg)
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
![Page 18: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/18.jpg)
Mean? B-Mean? Three-way data bind?
B
M
E
A
N
ongoDB
xpress
ngularJS
odejs
reeze A
F irebase
ngularJS
![Page 19: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/19.jpg)
Comparatives
X
NO
Webapps creation is much more than DOM manupulation
![Page 20: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/20.jpg)
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
![Page 21: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/21.jpg)
Comparatives
X
Backbone/Emberjs: http://jsfiddle.net/jashkenas/CGSd5/
AngularJS: http://jsfiddle.net/mhevery/vYknU/23/
![Page 22: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/22.jpg)
Comparatives
X
http://dybskiy.com/js-mvc-angular-vs-ember/
http://beust.com/weblog/2012/12/29/migrating-from- ember-js-to-angularjs/
![Page 24: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/24.jpg)
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
![Page 25: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/25.jpg)
Two-way bindings
Comparative of two-way bindings useds in Angular, Ember e Knockout
http://projects.mariusgundersen.net/JSconf2013/
![Page 26: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/26.jpg)
Then you ask yourself:
With all these features in AngularJS, it must be very
#NOT http://raphaelsaunier.com/talks/jsromandie-angular-ember/#/13/2
“ ”
![Page 27: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/27.jpg)
Success Cases
http://www.localytics.com/blog/2013/angularjs-at-localytics/
![Page 28: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/28.jpg)
Bombermine Game
http://bombermine.com/#/
![Page 29: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/29.jpg)
![Page 30: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/30.jpg)
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!
![Page 31: AngularJS: A framework to make your life easier](https://reader033.fdocuments.net/reader033/viewer/2022051610/549a3e10b479593d4d8b58b1/html5/thumbnails/31.jpg)
@WILLMENDESNETO
HTTPS://WWW.FACEBOOK.COM/WILSONMENDESNETO
HTTP://ABOUT.ME/WILLMENDESNETO