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