Angularjs cascade
- 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
- 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