Setting up an application to support simple routes

Central to the behavior of single-page applications is the ability to perform navigation without a formal browser page reload. Angular 2 is well-equipped to work around the default browser page reload behavior and allow you to define a routing structure within it, which will make it look and feel like actual page navigation.


The code, links, and a live example of this are available at

Getting ready

Suppose you have the following function defined globally:

function visit(uri) { 
  // For this recipe, you don't care about the state or title 
  window.history.pushState(null, null, uri); 

The purpose of this is to merely allow you to navigate inside the browser from ...

Get Angular 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.