Angular: Up and Running

Chapter 11. Routing in Angular

In the previous few chapters, we saw how to extend our application and make reusable services. We also saw how to integrate and deal with HTTP calls in our application using the HttpClient module, and deal with the asynchronous flows using observables and RxJS.

In this chapter, we will deal with another common requirement of web applications, which is to encapsulate various pages and pieces under different routes, and be able to deep-link to them when needed. We will implement Angular’s built-in routing module. In addition, we will also dig into how to secure our application using AuthGuards and other features of the router.

Setting Up Angular Routing

For this chapter, we are going to build against a precoded server, as well as use a codebase that has most of the base components built so that we can focus only on the key aspects. We are going to continue extending our application that we have been working on across the chapters by adding routing capability to it. We are going to try to add four routes: one for the stock list, one to create a stock, one for registering, and one for logging in. Furthermore, we will protect the stock list route and the create stock route so that you can access them only if you are logged in. Finally, we will add protections to ensure that we don’t lose our work by navigating away from a filled-in form.

Server Setup

As mentioned earlier, the server we will be working with is already developed and available in the repository ...