Chapter 10. Building a single-page application with Angular: The next level
This chapter covers
- Routing with URL parameters in Angular
- Querying the API with URL parameter data
- Building more-complex layouts and handling form submissions
- Creating a separate router configuration file
- Replacing the Express UI with the Angular app
In this chapter, you’ll follow on from the work you started in chapter 9 with building a single-page application (SPA). By the end of this chapter, the Loc8r application will be a single Angular application that uses your API to get the data.
Figure 10.1 shows where you are in the overall plan, still recreating the main application as an Angular SPA.
Figure 10.1. This chapter continues the work you started in chapter 9: recreating the Loc8r application as an Angular SPA, moving the application logic from the back end to the front end.
;%22/%3E%3C/svg%3E)
You’ll start by creating the missing pages and functionality, and see how to use URL parameters in routes, including using them when querying the API. When you’ve got most of the functionality in place, you’ll build the form to add new reviews, but rather than have a separate page as you had in Express, you’ll include the form inline and be able to add reviews without leaving the Details page. This technique is an SPA way of doing things and eliminates extra round trips to the server. When everything’s running, you’ll look at a couple of ways to improve the architecture to follow some Angular and TypeScript best practices.