Chapter 10. Building an SPA with Angular: The next level

 

This chapter covers

  • Making pretty URLs
  • Adding multiple views to an SPA
  • Going from one page to another without reloading the application
  • Using AngularUI to get Twitter Bootstrap components as preconfigured Angular directives

In this chapter we’re continuing on with the work we started in chapter 9 by building a single-page application. By the end of this chapter the Loc8r application will be a single Angular application that uses our API to get the data.

Figure 10.1 shows where we’re at in the overall plan, still re-creating the main application as an Angular SPA.

Figure 10.1. This chapter continues the work we started in chapter 9 of re-creating the Loc8r application as an Angular SPA, moving the application logic from the back end to the front end.

We’ll start off by decoupling the Angular application from the server-side application—it’s still being incorporated into a Jade template. As part of this we’ll see how to make pretty URLs, removing the parameters in routes, and use prebuilt directives based on Twitter Bootstrap components. Along the way we’ll keep an eye on best practices, of course.

10.1. A full SPA: Removing reliance on the server-side application

10.1.1. Creating an isolated HTML host page

10.1.2. Making reusable page framework directives

10.1.3. Removing the # from URLs

10.2 Adding additional pages and dynamically injecting HTML

10.2.1. Adding a new route and page to the SPA

10.2.2. Creating a filter to transform the line breaks

10.2.3. Sending HTML through an Angular binding

10.3. More complex views and routing parameters

10.3.1. Getting the page framework in place

10.3.2. Using URL parameters in controllers and services

10.3.3. Building the Details page view

10.4. Using AngularUI components to create a modal popup

10.4.1. Getting AngularUI in place

10.4.2. Adding and using a click handler

10.4.3. Creating a Bootstrap modal with AngularUI

sitemap