ngrx / Router
Licence: other
Reactive Router for Angular
Stars: ✭ 269
Programming Languages
typescript
32286 projects
@ngrx/router
This project is DEPRECATED
The Angular 2 Router was inspired by the ngrx/router, shares a familiar API and will be updated going forward. The ngrx/router may continue to live on as a framework agnostic router with more experimental features.
Migration Guide to Angular 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 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
- 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 { }
- Configure your application routes:
import { Routes } from '@ngrx/router';
const routes: Routes = [
{
path: '/',
component: HomePage
},
{
path: '/blog',
component: BlogPage,
children: [
{
path: ':id',
component: PostPage
}
]
}
]
- 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].