Configuring the Router

This guide shows the many ways to map URLs to components.

A router takes an array of pairings like this:

MyController.$routeConfig = [
  { path: '/user', component: 'user' }
];

Sibling Viewports

You can configure multiple viewports on the same path like this:

MyController.$routeConfig = [
  { path: '/user',
    components: {
      master: 'userList',
      detail: 'user'
  } }
];

<div ng-viewport="master"></div>
<div ng-viewport="detail"></div>

You can link to any sibling just as you normally would:

<p>These both link to the same view:</p>
<a ng-link="userList">link to userList</a>
<a ng-link="user">link to user component</a>

Or, you can explicitly link to a viewport-component pair link this:

<p>These both link to the same view:</p>
<a ng-link="master:userList">link to userList</a>
<a ng-link="detail:user">link to user component</a>

redirectTo

Useful for migrating to a new URL scheme and setting up default routes.

With the following configuration:

MyController.$routeConfig = [
  { path: '/', redirectTo: '/user' },
  { path: '/user', component: 'user' }
];

A navigation to / will result in the URL changing to /user and the viewport at that level loading the user component.

Aliases

Consider the following route configuration:

MyController.$routeConfig = [
  { path: '/', component: 'user' }
];

When linking to a route, you normally use the name of the component:

<a ng-link="user">link to user component</a>

If you want to refer to it differently...

MyController.$routeConfig = [
  { path: '/', component: 'user', as: 'myUser' }
];

<a ng-link="myUser">link to user component</a>

This can be useful in cases where you have sibling components, but want to refer to that entire level of routing:

MyController.$routeConfig = [
  { path: '/',
    components: {
      master: 'userList',
      detail: 'user'
    },
    as: 'myUser'
  }
];