@ngrx/router

Reactive Router for Angular 2

This is an alternative router for Angular 2 focused on providing a simple, reactive API built to scale for large applications.

Please note that we are currently pre-v1.0. While we believe the core of the router is solid, you can expect a few breaking changes as we work towards a beta release. These early releases are meant to gather feedback from the community and to help with the direction of the router.

Installation

Install @ngrx/router into your Angular 2 project via npm:

npm install @ngrx/router --save

Routing Setup

1. Create your application components:

import { Component } from 'angular2/core';

@Component({
  selector: 'app',
  template: `
    <h1>My Blog</h1>
    <nav>
      <a linkTo="/">Home</a>
      <a linkTo="/blog">Blog</a>
    </nav>

    <route-view></route-view>
  `
})
class App { }

@Component({
  selector: 'home-page',
  template: `
    <h2>Home Page</h2>
  `
})
class HomePage { }

@Component({
  selector: 'blog-page',
  template: `
    <h2>Blog</h2>
    <nav>
      <a *ngFor="let post of posts" [linkTo]="'/blog/' + post.id">{{ post.title }}</a>
    </nav>

    <route-view></route-view>
  `
})
class BlogPage { }

@Component({
  selector: 'post-page',
  template: `
    <h3>Post</h3>
  `
})
class PostPage { }

2. Configure your application routes:

import { Routes } from '@ngrx/router';

const routes: Routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/blog',
    component: BlogPage,
    children: [
      {
        path: ':id',
        component: PostPage
      }
    ]
  }
]

3. Register router in application bootstrap.

import { provideRouter } from '@ngrx/router';

bootstrap(App, [
  provideRouter(routes)
]);

That's it! You are ready to begin taking advantage of reactive routing!

Documentation

• Route Configuration
• Route Links
• Redirects
• Code Splitting
• Route and Query Parameters
• Guarding Routes