Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,931 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
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ◆◆◆ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ★★★ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ▲▲▲ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×