New Phone Models

    @ngrx/router
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-beta.2 • Public • Published

    @ngrx/router

    Reactive Router for Angular 2

    Join the chat at https://gitter.im/ngrx/router npm version

    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 in beta. We believe the core of the router is solid and we do not expect anymore breaking changes to the API.

    Installation

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

    npm install @ngrx/router @ngrx/core --save
    

    Routing Setup

    1. Create your application components:
    import { Component } from '@angular/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 { }
    1. Configure your application routes:
    import { Routes } from '@ngrx/router';
    
    const routes: Routes = [
      {
        path: '/',
        component: HomePage
      },
      {
        path: '/blog',
        component: BlogPage,
        children: [
          {
            path: ':id',
            component: PostPage
          }
        ]
      }
    ]
    1. 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

    Keywords

    none

    Install

    npm i @ngrx/router

    DownloadsWeekly Downloads

    92

    Version

    1.0.0-beta.2

    License

    MIT

    Last publish

    Collaborators

    • brandonroberts
    • mikeryan52
    • robwormald
    • ngrxadmin