Angular.js is a popular client side javascript framework. Marcello will demonstrate how to use Angular.js to work with Cascade to build a fast onepage website. Angular.js can also replace some xsl and velocity code when building websites. Content that comes from Cascade can be published as json or xml which is then used by Angular services to generate page content, dynamic navigation and more.

1. Angular.js
Marcello Prattico
@mprattico
Syracuse University

2. Why Angular.js?

3. Javascript
is
Everywhere

4. Javascript:
The Lingua Franca of
the Web
• Jeff Atwood of Coding Horror
• http://www.codinghorror.com/blog/
2007/05/javascript-the-lingua-franca-

5. Atwood's Law: any
application that can be
written in JavaScript, will
eventually be written in
JavaScript.
http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html#%20

6. 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/

7. Angular.js Features
• Um, ok what does that mean to me?
• Yeah, well we do that with JQuery and
regular JavaScript.

8. What about?
• Knockout.js
• Ember.js
• Batman.js
• Backbone, EXT.js, React, Spine etc.
• http://todomvc.com/
Other MV* JS Frameworks

9. Full Featured Framework
• Data Binding
• MVC
• Routing
• Testing
• jqLite
• Templates
• History
• Factories

10. And more...
• ViewModel
• Controllers
• Views
• Directives
• Services
• Dependency
Injection
• Validation

11. Directives
http://www.youtube.com/watch?v=i9MHigUZKEM
Teach HTML new tricks.

12. Two Way Data-
Binding

13. Two Way Data-
Binding

14. In Cascade
• Single Page App
• Using one main template
• Menu items
• Blog
• List of locations

15. Velocity or XSL
• Can we replace ourVelocity or XSL code
and use Angular?
• Possibly

16. Let’s show the code

17. In Cascade
• Example Single Page App at
• http://angular.syr.edu

18. 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

19. Think different
• You are building your server side and client
side logic together.

20. Analytics
• Track page views with Angular.js
• http://stackoverflow.com/questions/10713708/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

21. 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