Angular.jsMarcello Prattico
@mpratticoSyracuse University
Why Angular.js?
Javascript is
Everywhere
Javascript:The Lingua Franca of
the Web• Jeff Atwood of Coding Horror
• http://www.codinghorror.com/blog/!""#/"$/javascript-the-lingua-franca-
Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.http://www.codinghorror.com/blog/!""#/"#/the-principle-of-least-power.html#%!"
Angular.js Features
• Two Way Data binding
• Dependency Injection
• Directives
• Templates
• MVC - MVVM (Model-View-ViewModel)
Reference: http://net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features/
Angular.js Features
• Um, ok what does that mean to me?
• Yeah, well we do that with JQuery and regular JavaScript.
What about?
• Knockout.js
• Ember.js
• Batman.js
• Backbone, EXT.js, React, Spine etc.
• http://todomvc.com/
Other MV* JS Frameworks
Full Featured Framework
• Data Binding
• MVC
• Routing
• Testing
• jqLite
• Templates
• History
• Factories
And more...
• ViewModel
• Controllers
• Views
• Directives
• Services
• Dependency Injection
• Validation
Directives
http://www.youtube.com/watch?v=i9MHigUZKEM
Teach HTML new tricks.
Two Way Data-Binding
Two Way Data-Binding
In Cascade
• Single Page App
• Using one main template
• Menu items
• Blog
• List of locations
Velocity or XSL
• Can we replace our Velocity or XSL code and use Angular?
• Possibly
Let’s show the code
In Cascade
• Example Single Page App at
• http://angular.syr.edu
Thinking in Angular.js
• Don’t design your page, then change it with DOM manipulations
• Don’t augment JQuery with Angular.js
• Always think in terms of Architecture
• Test driven development
http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background
vs Jquery
Think different
• You are building your server side and client side logic together.
Analytics
• Track page views with Angular.js
• http://stackoverflow.com/questions/%"#%&#"'/tracking-google-analytics-page-views-with-angular-js
• http://ngmodules.org/modules/angular-google-analytics
• https://github.com/revolunet/angular-google-analytics
• https://github.com/mgonto/angularytics
References and useful links• http://www.webdesignerdepot.com/2013/04/an-introduction-to-angularjs/
• http://net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features/
• http://www.yearofmoo.com/2012/08/use-angularjs-to-power-your-web-application.html
• https://github.com/angular-app/Samples
• http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background/15012542#15012542
• http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/
• Angular.js in 60 minutes http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf
• Get started in Angular.js http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html
• Angular.js Directives - Basics http://onehungrymind.com/angularjs-directives-basics/
• Angular.js tutorial http://www.revillwebdesign.com/angularjs-tutorial/
• Great video tutorials at Egghead.io http://www.egghead.io/
• Angular.js fundamentals in 60 minutes http://www.youtube.com/watch?v=i9MHigUZKEM code: http://tinyurl.com/angularjsdemos
Recommended
