python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language

What is Routes and Route Properties?

Angular Route is an array of route configurations. The “RouterModule.forRoot” method in the module imports to configure the router.

type Routes = Route[];

Each Route has the following properties -
interface Route {
  path?: string
  pathMatch?: string
  matcher?: UrlMatcher
  component?: Type<any>
  redirectTo?: string
  outlet?: string
  canActivate?: any[]
  canActivateChild?: any[]
  canDeactivate?: any[]
  canLoad?: any[]
  data?: Data
  resolve?: ResolveData
  children?: Routes
  loadChildren?: LoadChildren
  runGuardsAndResolvers?: RunGuardsAndResolvers

List of properties and it has the following order -
1.      path - It uses the route matcher DSL
2.      pathMatch - It uses to specifies the matching strategy
3.      matcher - It uses to defines a custom strategy for path matching
4.      component - It is a component type
5.      redirectTo - It is the URL fragment and it will replace the current matched segment
6.      outlet - It is the name of the outlet the component should be placed into
7.      canActivate  - It is an array of DI tokens  and used to handle the CanActivate handlers
8.      canActivateChild - It is an array of DI tokens and used to handle the CanActivateChild handlers
9.      canDeactivate - It is an array of DI tokens and used to handle the CanDeactivate handlers
10.  canLoad - It is an array of DI tokens and used to handle the CanLoad handlers
11.  data - It is additional data provided to the component by using the ActivatedRoute
12.  resolve - It is a map of DI tokens used to look up data resolvers
13.  runGuardsAndResolvers - It is defined when guards and resolvers will be run and by default, they run only when the matrix parameters of the route change.
14.  children - it is an array of child route definitions
15.  loadChildren - It is a reference to lazily loaded child routes.

The following example help you to understand the Router, Router module, and Routes -
In this example, the array of appRoots describes how to navigate from one view to other views and pass it into RouterModule.forRoot method to configure the router.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RoutesRouterModule,}  from '@angular/router';

//Import Components
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserComponent } from './user/user.component';
import { UserDetailComponent } from './user-detail/user-detail.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'

//Apps roots
const appRoots = [
  path: ''redirectTo: '/dashboard'pathMatch: 'full' },
  path: 'user/:id'component: UserDetailComponent }, //Id is a Roots parameter.
  path: 'users'component: UserComponentdata:title:'User List'} },
  path: '**'redirectTo: 'PageNotFoundComponent' } //Wild Cards (**), the router will instantiate the PageNotFound component

//AppModule class with @NgModule decorator
  //Static, this is the compiler configuration
  //declarations is used for configure the selectors
  declarations: [
  //Composability and Grouping
  //imports used for composing NgModules together
  imports: [
    //enableTracing is used for debugging purposes only
    RouterModule.forRoot(appRoots, { enableTracing: true })
  //Runtime or injector configuration
  //providers is used for runtime injector configuration
  providers: [],
  //bootstrapped entry component
  bootstrap: [AppComponent]
export class AppModule { }


Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions