Appendix A. Employee directory example walk-through

 

This appendix covers

  • Walk-through of the Backbone.js example
  • Walk-through of the Knockout example
  • Walk-through of the AngularJS example

You saw various code examples illustrating the components of our employee directory throughout chapter 2. In doing so, you gained a better understanding of the role MV* libraries/frameworks play in the creation of an SPA.

In this appendix, you’ll walk through the complete source code for our directory by using each of our selected MV* frameworks. This will help you understand the complete picture if you decide to try one of these yourself. Before you start, let’s go over your objectives again:

  • Create a simple SPA to enter employee information.
  • Build an easy-to-use UI for entering each employee’s first name, last name, title, email, and phone.
  • Keep track of each entry as part of a list, with the screen split between the entry form on the left and the directory’s entry list on the right.
  • Have two buttons on the entry side of the SPA: one to add a new entry and one to clear the form.
  • Have one button next to each entry to remove the entry from the list.
  • Have indicators next to each entry field to denote whether the field’s entry requirement has been met (each indicator should update as the user types).

A.1. CSS

A.2. Backbone.js example

A.3. Knockout example

A.4. AngularJS example

A.5. Summary