Tech io spa_angularjs_20130814_v0.9.5
2 likes1,541 views
This document provides an overview of single page applications (SPAs) and AngularJS. It discusses why SPAs are useful, how they work, and key aspects of AngularJS like data binding, directives, routing, and dependency injection. Code samples are presented to demonstrate basic concepts like data binding, controllers, filters, and building an e-commerce application with routing and services. Future sessions are proposed to cover integration with Node.js backends, testing with Karma, and custom directives.
![6
Why SPA?
“Within the time taken to read a page, 35 million person minutes
will be spent waiting for traditional website pages to load “ –
Single Page Applications [Upcoming SPA book of O’Reilly]
• Traditional Websites are slow !!!
• Slow site – is costly to enterprise & drives the customer away
• Mostly done using MVC – page after page delivery
• Does not provide a fluid UX – HTML is not for dynamic views
• Another reason – static content gets served to dumb clients
• SPA is to deliver a desktop application experience to the user
• And SPA is not new](https://image.slidesharecdn.com/techiospaangularjs20130814v0-130815200933-phpapp02/85/Tech-io-spa_angularjs_20130814_v0-9-5-6-320.jpg)
![14
Trivia
• Started by Google in 2009; Open Source
• Saw a 17000 to 1500 line reduction of code (92% reduction in code)
• 100% JavaScript & Client Side. Compatible with desktop & mobile.
• Not a plugin; nor a browser extension
• Compatible with HTTPS, Content Security Policy, XSRF protection.,
• Done via $http with server [xsrf-token; settingx-xsrf-token]
• Browsers – Safari, Chrome, IE8/9, Firefox, Opera;
– Mobile browsers (Android, Chrome Mobile, Safari)
• Size < 29Kb (compressed and minified)
• Uses jQuery or jQlite](https://image.slidesharecdn.com/techiospaangularjs20130814v0-130815200933-phpapp02/85/Tech-io-spa_angularjs_20130814_v0-9-5-14-320.jpg)
![15
Tool Sets
• Editor
• Sublime Text 2 Editor – tons of plugins
• $$ - Visual Studio or WebStorm IDE
• For Debugging –
• Chrome Browser
• Batarang [Angular JS plugin]
• Advanced REST Client OR Postman like Chrome / Firefox Plugin
• Firefox + firebug / jsFiddle …
• Library
• Bootstrap – CSS Framework
• Node Server (or Tomcat or IIS or Apache to host the pages)](https://image.slidesharecdn.com/techiospaangularjs20130814v0-130815200933-phpapp02/85/Tech-io-spa_angularjs_20130814_v0-9-5-15-320.jpg)
![19
Directives – HTML on steroids!!
• Directives teaches HTML new tricks [Dan Wahlin] by extending
HTML via attributes.
• ng-* - built in angular directives
• ng-app => Initializes the angular app.
• Built-in & Custom – directives
• Can be invoked as –
<span ng:bind="name"> ganesh
<span ng_bind="name"> ganesh
<span ng-bind="name"> ganesh
<span data-ng-bind="name"> ganesh
<span x-ng-bind="name"> ganesh `](https://image.slidesharecdn.com/techiospaangularjs20130814v0-130815200933-phpapp02/85/Tech-io-spa_angularjs_20130814_v0-9-5-19-320.jpg)
Tech io spa_angularjs_20130814_v0.9.5
- 1. 1 Ganesh Kondal, August 14, 2013
- 2. 2 Today… • Single Page Applications – What / Why / How ? • Brief Introduction to Angular JS aspects., • Discuss Code – https://github.com/ganeshkondal/angularstore • Not Today • Unit testing JavaScript Client side applications – see karma • Node Server backend used • Web Application or JavaScript basics • Comparison across JS MVW frameworks “Feel free to interrupt and also to provide feedback”
- 3. 3 Why SPA? Why now? Technology Forecast & the market is moving towards it. Plus ‘not just air’ – interesting and its worth it
- 4. 4 What is it? “is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application” –Wikipedia
- 5. 5 Single Page Application • Web Apps not just web sites. • Does not reload the page. • Now driven with Javascript MVW frameworks • Fluid UX Experience – • Handles most of UI transactions in the client side. • Loads majority of the code with a single page load Timeline …
- 6. 6 Why SPA? “Within the time taken to read a page, 35 million person minutes will be spent waiting for traditional website pages to load “ – Single Page Applications [Upcoming SPA book of O’Reilly] • Traditional Websites are slow !!! • Slow site – is costly to enterprise & drives the customer away • Mostly done using MVC – page after page delivery • Does not provide a fluid UX – HTML is not for dynamic views • Another reason – static content gets served to dumb clients • SPA is to deliver a desktop application experience to the user • And SPA is not new
- 7. 7 Why JS MVC? • No Plugin / Less Bloat / One client language. • jQuery is to manipulate DOM; for animation; hooking events • Pain points – if jQuery is “all we have’ • State of the application is in DOM • Logic and Presentation – “No separation of concerns” • With more complicated flow – jQuery only code is unmanageable / not modular • Changes to features (UI or logic) in a large jQuery based codebase ends in “Houston !!! We have a problem”
- 8. 8 Are we the guinea pigs? • YouTube PS3 • Airbnb • Google • Maps • Calendar • Mail • … No Way? http://builtwith.angularjs.org/
- 9. 9 SPA Frameworks • Backbone JS • Backbone. Marionette • Angular JS – from Google • Ember JS • … many more • See http://todomvc.com
- 10. 10 Didn’t we say ‘Responsive’ “ web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices” - Wikipedia • Grid positioning and element sizing in % and relative numbers • Flexible images • CSS3 media queries • CSS3 RWD frameworks • Responsivator
- 11. Enterprise Application - SPA with JS MVC Presentation Layer Model View Controller 11 SPA Architecture Enterprise Application - Using traditional MVC approach Presentation Layer Services Tier Data Access Layer Database Config Files Ext Systems
- 12. 12 PART II
- 13. 13 Why • Angular is a MVVM / MVW framework; uses jQuery internally • Some of the key features… • Two-way data binding • Dependency Injection • HTML directives • Reusable Services • Custom Directives • And a lot more… • HTML 5 Routing • HTML Templates • Locale aware Filters • Validation • Nested form submission • Expressions + Developed by / support from Google
- 14. 14 Trivia • Started by Google in 2009; Open Source • Saw a 17000 to 1500 line reduction of code (92% reduction in code) • 100% JavaScript & Client Side. Compatible with desktop & mobile. • Not a plugin; nor a browser extension • Compatible with HTTPS, Content Security Policy, XSRF protection., • Done via $http with server [xsrf-token; settingx-xsrf-token] • Browsers – Safari, Chrome, IE8/9, Firefox, Opera; – Mobile browsers (Android, Chrome Mobile, Safari) • Size < 29Kb (compressed and minified) • Uses jQuery or jQlite
- 15. 15 Tool Sets • Editor • Sublime Text 2 Editor – tons of plugins • $$ - Visual Studio or WebStorm IDE • For Debugging – • Chrome Browser • Batarang [Angular JS plugin] • Advanced REST Client OR Postman like Chrome / Firefox Plugin • Firefox + firebug / jsFiddle … • Library • Bootstrap – CSS Framework • Node Server (or Tomcat or IIS or Apache to host the pages)
- 16. 16 Tool Sets contd. • Angular Seed Project – • https://github.com/angular/angular-seed • Responsivator • http://dfcb.github.io/Responsivator/?site=localhos t%3A8082%2Fbooks • To check multi-modality in one shot • Responsinator – iphone like online simulator • http://www.responsinator.com/
- 17. 17 Package Layout UX code. Reusable Services Partial Views. HTML Templates SPA Entry Point Controllers (/controllers to be created) Angular Seed – can provide the starting point
- 18. 18 Sample # 1 – Hello World • ng-app, ng-init; • Go through directives, before Sample 2
- 19. 19 Directives – HTML on steroids!! • Directives teaches HTML new tricks [Dan Wahlin] by extending HTML via attributes. • ng-* - built in angular directives • ng-app => Initializes the angular app. • Built-in & Custom – directives • Can be invoked as – <span ng:bind="name"> ganesh <span ng_bind="name"> ganesh <span ng-bind="name"> ganesh <span data-ng-bind="name"> ganesh <span x-ng-bind="name"> ganesh `
- 20. 20 Directives • Event Directives • ngChange • ngClick • ngMouseDown • ngMouseOver • ngMouseLeave • … • Other Directives • ngApp • ngBind • ngHide • ngShow • ngForm • … <input type="checkbox" ng-change="handleChange()" ng-model="property" /> <label ng-bind="book.title"/>
- 21. 21 Sample 2 – Simple Data Binding • Showcases view / model being tied. • ng-bind
- 22. 22 Model • Any JS object can be the model • No special class to extend • Unlike Backbone.Model.extend ) • No special template code. • Angular works directly on the DOM; so any HTML subset can be the template. View
- 23. 23 Two-way Data Binding • View & Model bound to each other in a two-way binding
- 24. 24 Sample 3 – Book Listing & Filter • Controller sample • $scope (DI), controller, filter, • Modularity
- 25. 25 Controller • Code behind the view • Tied via the $scope • $scope separates view and the controller • Controller is pure JS. • No rendering info. • Can support many views as it is not tied to a view • Controller and View get the variables via DI of angular
- 26. 26 Filters & Expressions • In-built filters are available • to modify the output - $number No fractions: {{ val | number : 0 } } <br/> • to change the format $currency • sort the returned data set orderBy: filter.name • filter the data set, as the name says filter : filter.name • For debugging • Json filter is given in angular that prints in JSON style – useful for debugging <body> <pre>{{ {‘name’ : ‘value’} | json }} </pre> </body>
- 27. 27 $scope • Glue between controller & view • Refers the application model • Scopes are in a hierarchical manner • Helps create ($broadcast) custom events $watch # ng-model # ng-change <div ng-controller="Controller"> Name: <input type="text" ng- model=‚name"> <button ng- click='sayHello()'>greet</but ton> <hr> {{greeting}} $scope directives • Expressions’ execution context • Provides API to observe, propagate model changes outside – via $watch, $apply View Linking phase
- 28. 28 Sample 4 – eStore • Router, UI templates • Services via Factory approach • ngSanitize, ngSrc https://github.com/ganeshkondal/angularstore • Module Dependency • HTML5 Routing
- 29. $scope 29 Routers Routers View ControllerConnects - Router assigns the controller for a UI Template. - $scope, $routerProvider - are depedency injected by Angular HTML Templates
- 31. 31 Dependency Injection • DI is pervasive – all over Angular. • Controller gets hold of services it needs, auto-magically. • View gets the necessary expression values. • Each Angular application has $injector that injects the dependent services (FYI only).
- 32. 32 Pieces Together - Modules Modules Controllers Directives Filters Service Factory Provider Config Routes View Value • Modules are the containers => think like ‘object containers’ • Always use ng-app=‚moduleName‛ $scope
- 33. 33 Services • Refers a common piece of code that you can use across controllers. Not necessarily a REST or backend service call. • Services are singleton apps • Register a service – via .factory( serviceId, function(){..}); • OR via $provider interface. • Always lazy initialized by Angular internally
- 34. 34 Security – HTML Injection • HTML injection from unknown source is the HOLE • Default behavior = print the HTML content in variable as is • ngSanitize provides methods • ng-bind-html – enables to get the text portion • ng-bind-html-unsafe – enables even allowing the styling portion along with the HTML content honored as is. @html @controller
- 35. 35 Next Session • Integrate with Node JS or any REST service provider • Organize / build code with Yeoman / Grunt (TODO list !!!) • Test suite with Karma (ToDo list!!!) • Custom Directives
- 36. 36 Summary - SPA – what is it & why we need it - Angular JS - what is it & some trivia - Few code samples - Key take away from Angular - Dependency Injection - Directives - Routers
- 37. 37 Reference - Angular JS – O’Reilly book - http://angularjs.org - www.youtube.com – Dan Wahlin’s video tutorials
- 38. 38 Next Segment - Integration with Node Backend - Karma & Jasmine – TBD.,
- 39. 39 Thank You
- 40. 40 Appendix
- 41. 41 Angular JS Runtime • Hello Angular Sample !!! • Angular script loaded • Ng-app designates the application boundary • Ng-repeat Sample !!! • Info on Controllers
- 42. 42 SPA – FAQ • What is dependency injected • How it compares to backbone? • How it compares to ember? • What is the value model? • Best Practices • Upcoming; yet to settle in
Editor's Notes
- #7: Anyone asking about jQuery.extend?
- #8: Anyone asking about jQuery.extend?
- #15: Cross Site Request Forgery (XSRF) Protection XSRF is a technique by which an unauthorized site can gain your user's private data. Angular provides following mechanism to counter XSRF. When performing XHR requests, the $http service reads a token from a cookie called XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN. Since only JavaScript that runs on your domain could read the cookie, your server can be assured that the XHR came from JavaScript running on your domain.To take advantage of this, your server needs to set a token in a JavaScript readable session cookie called XSRF-TOKEN on first HTTP GET request. On subsequent non-GET requests the server can verify that the cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that only JavaScript running on your domain could have read the token. The token must be unique for each user and must be verifiable by the server (to prevent the JavaScript making up its own tokens). We recommend that the token is a digest of your site's authentication cookie with salt for added security.