Angular 2 Cookbook

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.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/6214.

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 ...