Chapter 4. Navigating the single page
This chapter covers
- An introduction to client-side routing
- An overview of routes and their configuration
- A summary of how routers work
- How to use route parameters
Part 1 of this book covered views and how they’re created. What it didn’t cover, though, is client-side routing. This can be used to navigate from one view to the next, but that’s only part of the picture. Client-side routing is also about transitioning between different states in the application. This could include modifications to the current view without navigation or other activities that don’t include changes in the UI at all.
In this chapter, you’ll explore how users navigate in an SPA by using client-side routing. You’ll not only learn what client-side routers are but also peek behind the curtain a bit to see how they work.
During our discussion, I’ll keep things as framework-agnostic as possible by illustrating with pseudocode. Once you’ve nailed down the concepts, you’ll use what you’ve learned to create a simple routing example with AngularJS. In the example, you’ll create a website for a department of a university. Though rudimentary, the example will sufficiently illustrate the basic concepts common to most client-side routers without getting into too many vendor-specific details. You’ll also use that same university theme throughout our discussion. This will help you put a real-world face on the pseudocode and illustrations.