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.

4.1. What is a client-side router?

 

4.2. Routes and their configuration

 

4.3. How do client-side routers work?

 
 
 

4.4. Putting it all together: implementing routing in SPAs

 

4.5. Chapter challenge

 
 

4.6. Summary

 
 
 
sitemap

Unable to load book!

The book could not be loaded.

(try again in a couple of minutes)

manning.com homepage
test yourself with a liveTest