Angular 2 Routes

Setting up routing requires that we define a base path, import the Angular router, configure the routes to define which route path activates which component, identify where to place the activated component's template, and activate routes to navigate based on user actions

 

The RouterModule provides router service to manage navigation and URL manipulation, configuration for configuring routes, and directives for activating and displaying routes. Router service deals with the globally shared resource, the URL location, there can only be one active router service. To ensure that there is always only one active router service, even when importing RouterModule multiple times, RouterModule provides two methods- forRoot and forChild. RouterModule.forRoot declares the router directives, manages our route configuration, and registers the router service. We use it only once in an application and for feature route use forChild.

 

Order In which Route Path is Evaluated

The router will pick the first route with a path that matches the URL segments. It merges the application routes explicitly defined in the application module with the routes from the all feature imported module. The routes which are explicitly configured in a module are processed last after any imported modules.

 

AppModule
 imports: [
  ...
  RouterModule.forRoot([
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'home', component: HomepageComponent },
   { path: '**', component: PageNotFoundComponent }
  ]),
  UseraccountModule,

..
 ]

 

UseraccountModule
 imports: [
  CommonModule,
  RouterModule.forChild([
   { path: 'signin', component: SigninComponent },
   { path: 'signup', component: SignupComponent }
  ]),
  ...
 ],

In the above case route is evaluated like following, notice it will first evaluate routes from imported UseraccountModule and then route from AppModule.

 { path: 'signin', component: SigninComponent },
 { path: 'signup', component: SignupComponent }
 { path: '', redirectTo: '/home', pathMatch: 'full' },
 { path: 'home', component: HomepageComponent },
 { path: '**', component: PageNotFoundComponent }

 

Directives

Router outlet Directive - Directive from the router library that is used like a component. It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.

RouterLink - Directive to navigate between routes. This will not load the entire page rather route defined within router outlet directive. This is different than href as href will load entire page and will make server call. Within the component you can use Router service to navigate between routes.

RouterLinkActive - Directive let you add CSS class to an element when the links route become active.