Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Perform Basic Routing in Angular 4?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 365
    Comment on it

    Routing is used to separate parts of application by using URL to for location path. Angular Router is used to navigate from one view to another as performed application tasks by user.

     

     

    In Angular, there are three main components that are used to configure routing:
    * Routes describe routes of the application
    * RouterOutlet is a a component for “placeholder” that contains each route’s content
    * RouterLink is used to link to routes

    <base href>
    base element is added to index.html file as it is first child in the head tag. It tells router about composing navigation URLs. If the app folder is root of the application set href value as shown below:

    src/index.html (base-href)
    
     <base href="/">

    Router imports
    Angular Router is a service provided by angular as it has library package '@angular/router'. You have to import it in your module file in order to use its services.

    src/app/app.module.ts (import)
          
    import { RouterModule, Routes } from '@angular/router';

     

    Configuration

    You have to configure route in order to provide routes for your application. When URL in the browser changes, router find out corresponding Route by which it can get component to display on screen. Here is an example which shows four route definitions and configures it via RouterModule.forRoot method and result is added to import array of AppModule.

    src/app/app.module.ts (excerpt)
          
    const appRoutes: Routes = [
      { path: 'crisis-center', component: CrisisListComponent },
      { path: 'home/:id',      component: HomeDetailComponent },
      {
        path: 'users',
        component: UserListComponent,
        data: { title: 'Users List' }
      },
      { path: '',
        redirectTo: '/users',
        pathMatch: 'full'
      },
      { path: '**', component: PageNotFoundComponent }
    ];
    
    @NgModule({
      imports: [
        RouterModule.forRoot(
          appRoutes,
          { enableTracing: true } // <-- debugging purposes only
        )
        // other imports here
      ],
      ...
    })
    export class AppModule { }

     

    appRoutes: an array of routes to describe how to navigate. It is passed as a parameter in service of configuring router.
    Path: URL path to the component. some id can be added to the path as /pathname/:id.
    Data: this property can be used to store some data with particular route. you can use it to store page titles, read-only, static data.
    empty path: it is to represent default path for application.
    The ** path in the last route is a wildcard. In case the url requested does not match any path for routes which were defined in the configuration prior then the route will be selected by the router. This is useful for displaying a "404 - Not Found" page or redirecting to another route.

     

    Router outlet

    In this configuration, when the browser URL for this application becomes /users, the router matches that URL to the route path /users and displays the UserListComponent after a RouterOutlet that you've placed in the host view's HTML.
         

    <router-outlet></router-outlet>
    <!-- Routed views go here -->

    Router links
    Router links are used to navigate views in application.
    for example:

    src/app/app.component.ts (template)
          
    template: `
      <h1>Angular Router</h1>
      <nav>
        <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
        <a routerLink="/users" routerLinkActive="active">Users</a>
      </nav>
      <router-outlet></router-outlet>
    `


    The RouterLink is a directive on anchor tag that includes the path for the router.
    The RouterLinkActive directive distinguish the anchor for the selected "active" route.

     

    How to Perform Basic Routing in Angular 4?

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: