Angular.js
Marcello Prattico
@mprattico
Syracuse University
Why Angular.js?
Javascript
is
Everywhere
Javascript:
The Lingua Franca of
the Web
• Jeff Atwood of Coding Horror
• http://www.codinghorror.com/blog/
2007/05/javasc...
Atwood's Law: any
application that can be
written in JavaScript, will
eventually be written in
JavaScript.
http://www.codi...
Angular.js Features
• Two Way Data binding
• Dependency Injection
• Directives
• Templates
• MVC - MVVM (Model-View-ViewMo...
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 ...
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 ourVelocity 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...
Think different
• You are building your server side and client
side logic together.
Analytics
• Track page views with Angular.js
• http://stackoverflow.com/questions/10713708/tracking-google-
analytics-page-...
References and useful links
• http://www.webdesignerdepot.com/2013/04/an-introduction-to-angularjs/
• http://net.tutsplus....
Upcoming SlideShare
Loading in …5
×

Angularjs cascade

3,750 views

Published on

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.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,750
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
82
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Angularjs cascade

  1. 1. Angular.js Marcello Prattico @mprattico Syracuse University
  2. 2. Why Angular.js?
  3. 3. Javascript is Everywhere
  4. 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. 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. 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. 7. Angular.js Features • Um, ok what does that mean to me? • Yeah, well we do that with JQuery and regular JavaScript.
  8. 8. What about? • Knockout.js • Ember.js • Batman.js • Backbone, EXT.js, React, Spine etc. • http://todomvc.com/ Other MV* JS Frameworks
  9. 9. Full Featured Framework • Data Binding • MVC • Routing • Testing • jqLite • Templates • History • Factories
  10. 10. And more... • ViewModel • Controllers • Views • Directives • Services • Dependency Injection • Validation
  11. 11. Directives http://www.youtube.com/watch?v=i9MHigUZKEM Teach HTML new tricks.
  12. 12. Two Way Data- Binding
  13. 13. Two Way Data- Binding
  14. 14. In Cascade • Single Page App • Using one main template • Menu items • Blog • List of locations
  15. 15. Velocity or XSL • Can we replace ourVelocity or XSL code and use Angular? • Possibly
  16. 16. Let’s show the code
  17. 17. In Cascade • Example Single Page App at • http://angular.syr.edu
  18. 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. 19. Think different • You are building your server side and client side logic together.
  20. 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. 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

×