Chapter 9. Building a single-page application with Angular: Foundations

 

This chapter covers

  • Working with the Angular router and navigating between pages
  • Architectural best practices for an SPA
  • Building up views through multiple components
  • Injecting HTML into bindings
  • Working with browsers’ native geolocation capabilities

You saw in chapter 8 how to use Angular to add functionality to an existing page. In this chapter and chapter 10, you’ll take Angular to the next level by using it to create a single-page application (SPA). Instead of running the entire application logic on the server using Express, you’ll run it all in the browser using Angular. For some benefits and considerations when using an SPA instead of a traditional approach, flick through chapter 2. By the end of this chapter, you’ll have the framework for an SPA in place with the first part up and running by using Angular to route to the homepage and display the content.

Figure 9.1 shows where you are in the overall plan, recreating the main application as an Angular SPA.

Figure 9.1. This chapter recreates the Loc8r application as an Angular SPA, moving the application logic from the back end to the front end.

9.1. Adding navigation in an Angular SPA

9.2. Building a modular app using multiple nested components

9.3. Adding geolocation to find places near you

9.4. Safely binding HTML content

9.5. Challenge

Summary

sitemap