1
Ganesh Kondal,
August 14, 2013
2
Today…
• Single Page Applications – What / Why / How ?
• Brief Introduction to Angular JS aspects.,
• Discuss Code – htt...
3
Why SPA? Why now?
Technology Forecast &
the market is moving
towards it. Plus ‘not
just air’ – interesting
and its worth...
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 use...
5
Single Page Application
• Web Apps not just web sites.
• Does not reload the page.
• Now driven with Javascript MVW fram...
6
Why SPA?
“Within the time taken to read a page, 35 million person minutes
will be spent waiting for traditional website ...
7
Why JS MVC?
• No Plugin / Less Bloat / One client language.
• jQuery is to manipulate DOM; for animation; hooking events...
8
Are we the guinea pigs?
• YouTube PS3
• Airbnb
• Google
• Maps
• Calendar
• Mail
• …
No Way?
http://builtwith.angularjs....
9
SPA Frameworks
• Backbone JS
• Backbone. Marionette
• Angular JS – from Google
• Ember JS
• … many more
• See http://tod...
10
Didn’t we say ‘Responsive’
“ web design approach aimed at crafting sites to provide an optimal viewing
experience—easy ...
Enterprise Application
- SPA with JS MVC
Presentation Layer
Model View Controller
11
SPA Architecture
Enterprise Applicati...
12
PART II
13
Why
• Angular is a MVVM / MVW framework; uses jQuery internally
• Some of the key features…
• Two-way data binding
• De...
14
Trivia
• Started by Google in 2009; Open Source
• Saw a 17000 to 1500 line reduction of code (92% reduction in code)
• ...
15
Tool Sets
• Editor
• Sublime Text 2 Editor – tons of plugins
• $$ - Visual Studio or WebStorm IDE
• For Debugging –
• C...
16
Tool Sets contd.
• Angular Seed Project –
• https://github.com/angular/angular-seed
• Responsivator
• http://dfcb.githu...
17
Package Layout
UX code.
Reusable Services
Partial Views.
HTML Templates
SPA Entry Point
Controllers
(/controllers to be...
18
Sample # 1 – Hello World
• ng-app, ng-init;
• Go through directives, before Sample 2
19
Directives – HTML on steroids!!
• Directives teaches HTML new tricks [Dan Wahlin] by extending
HTML via attributes.
• n...
20
Directives
• Event Directives
• ngChange
• ngClick
• ngMouseDown
• ngMouseOver
• ngMouseLeave
• …
• Other Directives
• ...
21
Sample 2 – Simple Data Binding
• Showcases view / model being tied.
• ng-bind
22
Model
• Any JS object can be the model
• No special class to extend
• Unlike Backbone.Model.extend )
• No special templ...
23
Two-way Data Binding
• View & Model bound to each other in a two-way binding
24
Sample 3 – Book Listing & Filter
• Controller sample
• $scope (DI), controller, filter,
• Modularity
25
Controller
• Code behind the view
• Tied via the $scope
• $scope separates view
and the controller
• Controller is pure...
26
Filters & Expressions
• In-built filters are available
• to modify the output - $number
No fractions: {{ val | number :...
27
$scope
• Glue between controller & view
• Refers the application model
• Scopes are in a hierarchical manner
• Helps cr...
28
Sample 4 – eStore
• Router, UI templates
• Services via Factory approach
• ngSanitize, ngSrc
https://github.com/ganeshk...
$scope
29
Routers
Routers
View ControllerConnects
- Router assigns the controller for a UI Template.
- $scope, $routerProv...
30
Routers contd.
31
Dependency Injection
• DI is pervasive – all over Angular.
• Controller gets hold of services it needs, auto-magically....
32
Pieces Together - Modules
Modules
Controllers
Directives Filters
Service
Factory
Provider
Config
Routes
View
Value
• Mo...
33
Services
• Refers a common piece of code that you can use across
controllers. Not necessarily a REST or backend service...
34
Security – HTML Injection
• HTML injection from unknown source is the HOLE
• Default behavior = print the HTML content ...
35
Next Session
• Integrate with Node JS or any REST service provider
• Organize / build code with Yeoman / Grunt (TODO li...
36
Summary
- SPA – what is it & why we need it
- Angular JS - what is it & some trivia
- Few code samples
- Key take away ...
37
Reference
- Angular JS – O’Reilly book
- http://angularjs.org
- www.youtube.com – Dan Wahlin’s video tutorials
38
Next Segment
- Integration with Node Backend
- Karma & Jasmine – TBD.,
39
Thank You
40
Appendix
41
Angular JS Runtime
• Hello Angular Sample !!!
• Angular script loaded
• Ng-app designates the
application boundary
• Ng...
42
SPA – FAQ
• What is dependency injected
• How it compares to backbone?
• How it compares to ember?
• What is the value ...
Upcoming SlideShare
Loading in …5
×

Tech io spa_angularjs_20130814_v0.9.5

1,362 views

Published on

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

No Downloads
Views
Total views
1,362
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Anyone asking about jQuery.extend?
  • Anyone asking about jQuery.extend?
  • 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.
  • Tech io spa_angularjs_20130814_v0.9.5

    1. 1. 1 Ganesh Kondal, August 14, 2013
    2. 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. 3 Why SPA? Why now? Technology Forecast & the market is moving towards it. Plus ‘not just air’ – interesting and its worth it
    4. 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. 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. 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. 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. 8 Are we the guinea pigs? • YouTube PS3 • Airbnb • Google • Maps • Calendar • Mail • … No Way? http://builtwith.angularjs.org/
    9. 9. 9 SPA Frameworks • Backbone JS • Backbone. Marionette • Angular JS – from Google • Ember JS • … many more • See http://todomvc.com
    10. 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. 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. 12 PART II
    13. 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. 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. 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. 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. 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. 18 Sample # 1 – Hello World • ng-app, ng-init; • Go through directives, before Sample 2
    19. 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. 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. 21 Sample 2 – Simple Data Binding • Showcases view / model being tied. • ng-bind
    22. 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. 23 Two-way Data Binding • View & Model bound to each other in a two-way binding
    24. 24. 24 Sample 3 – Book Listing & Filter • Controller sample • $scope (DI), controller, filter, • Modularity
    25. 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. 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. 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. 28 Sample 4 – eStore • Router, UI templates • Services via Factory approach • ngSanitize, ngSrc https://github.com/ganeshkondal/angularstore • Module Dependency • HTML5 Routing
    29. 29. $scope 29 Routers Routers View ControllerConnects - Router assigns the controller for a UI Template. - $scope, $routerProvider - are depedency injected by Angular HTML Templates
    30. 30. 30 Routers contd.
    31. 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. 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. 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. 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. 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. 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. 37 Reference - Angular JS – O’Reilly book - http://angularjs.org - www.youtube.com – Dan Wahlin’s video tutorials
    38. 38. 38 Next Segment - Integration with Node Backend - Karma & Jasmine – TBD.,
    39. 39. 39 Thank You
    40. 40. 40 Appendix
    41. 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. 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

    ×