Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Configuring Basic Routing in Angular 4 JavaScript Application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 23
    Comment on it

    In Angular Router is like an object that can be used in our app component to describe the routes we want to use.

    In Angular, there are three components that can be used to configure routing:
    * Routes:  It describes routes of the application
    * RouterOutlet: It is a “placeholder” component that gets expanded to each route’s content
    * RouterLink: It is used to get link to the routes

     

     

     

    For example:

    const routes: Routes = [
      { path: '', redirectTo: login, pathMatch: 'full' },
      { path: dashboard, component: DashboardComponent },
      { path: edit-profile, component: EditProfileComponent },
      { path: settings, component: SettingsComponent }
    ];

    here we have used:
    * path to give a specific URL.
    * component in which we want to go for that path.
    * we can redirect using the redirectTo option

     

     

    Providing Router:

    To install router in the application we use the RouterModule.forRoot() function in the imports key of our NgModule:
     

    @NgModule({
      declarations: [
        RoutesDemoApp,
        HomeComponent,
        LoginComponentComponent,
        DashboardComponent
      ],
      imports: [
        BrowserModule,
        RouterModule.forRoot(routes) // <-- installs Router routes, components and services
      ],
      bootstrap: [ RoutesDemoApp ],
      providers: [
        provide(LocationStrategy, {useClass: HashLocationStrategy})
      ]
    })
    class RoutesDemoAppModule {}
    
    // bootstrap our app
    platformBrowserDynamic().bootstrapModule(RoutesDemoAppModule)
      .catch((err: any) => console.error(err));


     
    It's important to see here that our routes serve as the argument to RouterModule.forRoot(). By putting RouterModule in our imports, we ensure the utilization of the RouterOutlet and RouterLink components in this module.

     

    The RouterOutlet directive tells router where to render the content in the view.
    For example, if we have a view:
     

    @View({
      template: `
      <div>
        Stuff in the outer template here
        <router-outlet></router-outlet>
      </div>
     `
    })

     

    RouterLink:

    For navigating between routes, we need to use RouterLink directive. For example, if we want to perform the task of linking to our login and dashboard page from a navigation, it becomes possible to change our view something like showed below.

    @View({
      template: `
      <div>
        <nav>
          <a>Navigation:</a>
          <ul>
            <li><a [router-link]="['home']">Home</a></li>
            <li><a [router-link]="['login']">Login</a></li>
            <li><a [router-link]="['dashboard']">Dashboard</a></li>
          </ul>
        </nav>
    
        <router-outlet></router-outlet>
      </div>
     `
    })

     

    Locating the imports:
    To find all of the constants we used above, we use the following:
     

    import {
      NgModule,
      provide,
      Component
    } from '@angular/core';
    import {BrowserModule} from '@angular/platform-browser';
    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
    import {
      RouterModule,
      Routes,
    } from '@angular/router';
    import {LocationStrategy, HashLocationStrategy} from '@angular/common';
    

     

    Configuring Basic Routing in Angular 4 JavaScript Application

 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: