CODEWITHSUNDEEP
angularangular2-routingangular2-templateangular2-directives
Celso Agra
Celso Agra

Reputation: 1499

What's the best way to organize Routes in angular2

I have questions about Routes in angular2. Today I'm using the same example as angular2 official tutorial. The code is something like this (file link):

// app.routing.ts
import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
    path: 'detail/:id',
    component: HeroDetailComponent
  },
  {
    path: 'heroes',
    component: HeroesComponent
  }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

My question is. If I have multiple cruds, I'll get a bunch of components (such as entity/list, entity/add, entity/edit, entity/show)

So, How can solve this? What is the best way to organize my routes without create a messy component?

Upvotes: 1

Views: 1755

Answers (1)

Technohacker
Technohacker

Reputation: 735

Follow along the Routing & Navigation Guide. More specifically, these parts:

Create Feature Modules (Milestone #2): For every component that handles a different responsibility, create a new folder in the app's root folder and put the necessary components, routing and services in there. Then, define a module to bring them all together. In your case, make a new feature module named entity and put the necessary components in that module. An example of a feature module (taken from the Angular2 docs):

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

import { HeroListComponent }    from './hero-list.component';
import { HeroDetailComponent }  from './hero-detail.component';

import { HeroService } from './hero.service';

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [
    HeroListComponent,
    HeroDetailComponent
  ],
  providers: [
    HeroService
  ]
})
export class HeroesModule {}

Make Child Routes (Milestone #2): Define a routing file for each feature module which defines the necessary routes for the current feature module. Again, From the Angular2 docs:

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HeroListComponent }    from './hero-list.component';
import { HeroDetailComponent }  from './hero-detail.component';

const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

export const heroesRouting: ModuleWithProviders = RouterModule.forChild(heroesRoutes);

The Angular2 docs can help most of the time, as it is the de-facto reference for the ever-changing Angular2 API

Cheers!

Upvotes: 2

Related Questions