List of Listings

Chapter 1. What is a single-page application?

Listing 1.1. Example SPA shell

Listing 1.2. Sample directory structure (by feature)

Listing 1.3. Simplified “by feature” directory structure

Listing 1.4. Sample directory structure (by functionality)

Chapter 2. The role of MV* frameworks

Listing 2.1. AngularJS model

Listing 2.2. Knockout model

Listing 2.3. Backbone.js model

Listing 2.4. Knockout template

Listing 2.5. AngularJS template

Listing 2.6. Backbone.js template using the Underscore.js template library

Listing 2.7. Backbone.js template compile and render

Listing 2.8. Inline template

Listing 2.9. Backbone.js view example

Listing 2.10. Tightly coupled HTML and JavaScript

Listing 2.11. AngularJS example

Listing 2.12. Employee list HTML

Listing 2.13. Employee list JavaScript

Chapter 3. Modular JavaScript

Listing 3.1. Function to add two numbers rewritten as a module

Listing 3.2. Revealing module pattern

Listing 3.3. index.html

Listing 3.4. welcomeMessage.js

Listing 3.5. shoppingCartStatus.js

Listing 3.6. index.html

Listing 3.7. index.html

Listing 3.8. STGourmet.js

Listing 3.9. customer.js

Listing 3.10. welcomeMessage.js

Listing 3.11. shoppingCartStatus.js

Listing 3.12. Code rewritten using a modular design

Listing 3.13. AMD example directory structure

Listing 3.14. index.html

Listing 3.15. main.js

Listing 3.16. displayUtil.js

Listing 3.17. counter.js

Chapter 4. Navigating the single page

Listing 4.1. Router with view capabilities (pseudocode)

Listing 4.2. Router that lets you handle the view (pseudocode)

Listing 4.3. Office hours route with a parameter (pseudocode)

Listing 4.4. Default route (pseudocode)

Listing 4.5. Main contact route (pseudocode)

Listing 4.6. Faculty list route

Listing 4.7. Default route

Listing 4.8. The functionality for your route

Listing 4.9. The route’s view

Listing 4.10. DOM view of rendered template

Listing 4.11. Main contact route

Listing 4.12. The functionality for your route

Listing 4.13. The route’s view

Listing 4.14. Office hours route with a parameter

Listing 4.15. Controller for office hours

Listing 4.16. Office hours view

Chapter 5. View composition and layout

Listing 5.1. Base layout

Listing 5.2. Header region CSS

Listing 5.3. Navigation region and content region CSS

Listing 5.4. The header view

Listing 5.5. Navigation view

Listing 5.6. Navigation styles applied

Listing 5.7. Configuration for the default route

Listing 5.8. The row template from our view for open orders

Listing 5.9. Customer information route with multiple states

Listing 5.10. Main view from the customerInfo route

Listing 5.11. Routes for billing and shipping info

Listing 5.12. The main customer view with billing and shipping added

Chapter 6. Inter-module interaction

Listing 6.1. Traditional module pattern

Listing 6.2. Revealing module pattern

Listing 6.3. Traditional module pattern dependency list

Listing 6.4. Module for search controllers

Listing 6.5. The search services module

Listing 6.6. The messaging services module

Listing 6.7. The user alerts module

Listing 6.8. The product display controller

Listing 6.9. Product display services module

Listing 6.10. The pricing services module

Chapter 7. Communicating with the server

Listing 7.1. Shopping cart update using PUT and XHR directly

Listing 7.2. Backbone.js version of your shopping cart update

Listing 7.3. AngularJS version of your shopping cart update

Listing 7.4. Processing a shopping cart update via callbacks

Listing 7.5. Processing a shopping cart update via a promise

Listing 7.6. Using promises to force control flow

Listing 7.7. Executing more than one server call in order

Listing 7.8. Configuration for your REST calls

Listing 7.9. Updated product display view

Listing 7.10. Application’s data holds cart ID

Listing 7.11. Function to make the addItem() call

Listing 7.12. Generic function to handle all cart promises

Listing 7.13. Controller code for cart updates

Listing 7.14. Building the update request object

Listing 7.15. Controller code for cart deletes

Listing 7.16. Controller code for cart deletes

Chapter 8. Unit testing

Listing 8.1. test.html—AngularJS version

Listing 8.2. test.html—Knockout and Backbone.js version

Listing 8.3. main-test.js—Knockout version using AMD modules and RequireJS

Listing 8.4. Logic to calculate the tip amount and new bill total

Listing 8.5. Unit test to verify the roundTipPercent() function

Listing 8.6. Utility tests grouped within a module

Listing 8.7. Unit test for a Backbone.js model’s business logic

Listing 8.8. Rating logic for the Backbone.js model

Listing 8.9. Unit test for an AngularJS service

Listing 8.10. Setup/teardown to perform fixture testing on a Backbone.js view

Listing 8.11. Unit testing your tip amount output by a Backbone.js view

Listing 8.12. Create a fake server to mock server requests

Listing 8.13. Using a mock server in a Backbone.js model’s unit test

Chapter 9. Client-side task automation

Listing 9.1. Writing “Hello world” from a task

Listing 9.2. Specifying dependent tasks

Listing 9.3. A linter task using the gulp-jshint plugin

Listing 9.4. Automatically reloading the browser from a task

Listing 9.5. Automatically running unit tests when a file changes

Listing 9.6. Adding tasks to optimize JavaScript

Listing 9.7. Adding a task to optimize CSS

Listing 9.8. Adding a task to reduce image size

Listing 9.9. Adding a task to move the rest of the files

Listing 9.10. Annotated CSS include for gulp-html-replace

Listing 9.11. Annotated JavaScript includes for gulp-html-replace

Listing 9.12. Task update file references in index.html

Appendix A. Employee directory example walk-through

Listing A.1. default.css

Listing A.2. entries.css

Listing A.3. index.html

Listing A.4. main.js—RequireJS configuration

Listing A.5. app.js

Listing A.6. directoryContent.html

Listing A.7. directory.js view

Listing A.8. entrylist.js view

Listing A.9. entries.js collection

Listing A.10. employee.js view

Listing A.11. employeeRecord.js model

Listing A.12. entrytemplate.html

Listing A.13. index.html

Listing A.14. main.js—RequireJS configuration

Listing A.15. app.js

Listing A.16. directoryContent.html

Listing A.17. directory.js

Listing A.18. entrytemplate.html

Listing A.19. index.html

Listing A.20. app.js

Listing A.21. directoryContent.html

Listing A.22. entrytemplate.html

Listing A.23. controllers.js

Appendix B. Review of the XMLHttpRequest API

Listing B.1. XHR call using GET and URL parameters

Listing B.2. XHR call using POST and the request body

Appendix C. Chapter 7 server-side setup and summary

Listing C.1. WebAppInitializer.java

Listing C.2. WebMvcConfig.java

Listing C.3. Class-level annotations

Listing C.4. Method-level annotations

Listing C.5. Exception-handling annotations