Angular2: Design guideline for separate routing technique in Angular2 Application

Standard

If your angular 2 application has lot of functionalities then you need to breakup your angular 2 application into multiple modules and sub-modules, thus managing routing could be a nightmare, the best way to resolve routing issues is to have a separate routing module file for each functionality module and then import this routing module file in main.module file relevant to that functionality.

screenshot_17

For-example search-movies-main-routing.module file contains routing configuration for multiple pages under search functionality. Route path and component name for each sub-component is defined as object in Children property for  RouterModule.forChild. Make sure that you have exported RouterModule from this file to make your route config accessible in main functionality module.

Bold code below shows this design guideline implementation.

search-movies-main-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { SearchMovieMainComponent } from './search-movies-main.component';
import { SearchMovieComponent } from './search-movie/search-movie.component';
import { SpeechSearchMovieComponent } from './search-movie-speech/search-movie-speech';
import { SearchMovieListComponent } from './search-movie-list/search-movie-list';
import { SearchMovieDetailComponent } from './search-movie-detail/search-movie-detail';
import { GetAllMoviesResolve } from './shared/service/get-all-movies.resolve.service';
import { GetMovieDetailResolve } from './shared/service/get-movie-detail.service';

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'movie',
                component: SearchMovieMainComponent,
                children: [
                    {
                        path: 'searchMovie',
                        component: SearchMovieComponent
                    },
                    {
                        path: 'speechSearchMovie',
                        component: SpeechSearchMovieComponent
                    },
                    {
                        path: 'searchMovieList',
                        component: SearchMovieListComponent,
                        resolve: {
                            resolvedAllMovieList: GetAllMoviesResolve
                        }
                    },
                    {
                        path: 'searchMovieDetail/:imdbId',
                        component: SearchMovieDetailComponent,
                        resolve: {
                            resolvedMovieDetail: GetMovieDetailResolve
                        }
                    },
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})

export class SearchMoviesRoutingModule { }

now import SearchMoviesRoutingModule into search-movie-main.module.ts file as depending module.

Bold code below shows this design guideline implementation.

search-movies-main.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { RatingModule } from 'primeng/primeng';
import { NglModule } from 'ng-lightning/ng-lightning';

import { SearchMoviesRoutingModule } from './search-movies-main-routing.module';
import { SearchMovieComponent } from './search-movie/search-movie.component';
import { SpeechSearchMovieComponent } from './search-movie-speech/search-movie-speech';
import { SearchMovieListComponent } from './search-movie-list/search-movie-list';
import { SearchMovieDetailComponent } from './search-movie-detail/search-movie-detail';
import { SearchMovieMainComponent } from './search-movies-main.component';

import { MOVIE_PROVIDERS } from './search-movies-main.providers';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        NglModule.forRoot(),
        RatingModule,
        SearchMoviesRoutingModule,
    ],
    declarations: [
        SearchMovieMainComponent,
        SearchMovieComponent,
        SpeechSearchMovieComponent,
        SearchMovieListComponent,
        SearchMovieDetailComponent
    ],
    providers: [
        MOVIE_PROVIDERS
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})
export class SearchMoviesMainModule {
}

Since SearchMoviesRoutingModule is now part of SearchMoviesMainModule, so when you register SearchMoviesMainModule into app.module.ts(main module), then SearchMoviesRoutingModule  will be automatically part of app.module.ts

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s