Angular2-route-service NPM

angular2-route-service

An implementation of router wrapper at Angular2 (2.0.0 compatible).

Dependencies

Installation

First you need to install the npm module:

npm install angular2-route-service --save

Features

Support a Flux application architecture (state, dispatcher).
Allows transform queryParams to matrix params when dom content is loaded ($$PREVENT_QUERY_TRANSFORM = true allows disable the feature).

Use

main.ts

import {RouteServiceModuleFactory} from "angular2-route-service/index";

@NgModule({
    bootstrap: [ApplicationComponent],
    imports: [
        ...
        // If your application does not have its own the state and the dispatcher
        // See RouteState and RouteDispatcher (from angular2-route-service)
        RouteServiceModuleFactory.makeModule(),
        
        // Or you have the application state and the dispatcher
        // RouteServiceModuleFactory.makeModule(State, Dispatcher)
        
        RouterModule.forRoot([
           ...
        ])
    ],
    ...
})
export class ApplicationModule {
    constructor() {
    }
}

app.ts

import {RouteService} from "angular2-route-service/index";

@Component(...)
export class AppComponent {
    constructor(@Inject(RouteService) routeService: RouteService, // You have to inject route service at least once!
                @Inject(Store) store:Store) {
    }
}

routeConfig.ts

export const AboutRoutes: Route[] = [
  {
    path: 'about',
    component: AboutComponent,
    data: {configValue: 'aboutPageConfigValue'}
  }
];

store.ts

import {
	IRouteEventPayload,
	RouteDispatcher,
	RouteState, RouteService
} from 'angular2-route-service/index';

...

@Injectable()
export class Store {

	constructor(@Inject(RouteDispatcher) private dispatcher: RouteDispatcher, // When "RouteServiceModuleFactory.makeModule()" is used.
	            @Inject(RouteState) private state: RouteState,
	            @Inject(RouteService) private routeService: RouteService) {

        dispatcher.navigationEnd.subscribe((payload: IRouteEventPayload) => {
            console.log('Route name is:', this.state.routeSnapshot.name);
            console.log('Route params are:', this.state.routeSnapshot.params);
            console.log('Route config is:', this.state.routeSnapshot.config);
            console.log('Path is:', payload.path);
            
            console.log('Page is ready: ', this.state.isPageReady());

            if (this.state.routeSnapshot.name === 'about') {
                setTimeout(() => {
                    this.routeService.go(''/*, {indexQuery: 100500} */);
                }, 1000);
            }
        });
	}
}

Preview

page.ts

@Component(...)
export class Page  {

    constructor(@Inject(RouteState) private state: RouteState) {
    }

    get pageReady(): boolean {
        return this.state.isPageReady();
    }
}

page.html

<div *ngIf="pageReady">
  Page is ready!<br>
  You can render here your components, depending on the route params
</div>
<div *ngIf="!pageReady" class="loading"></div>