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
    • 4.82k
    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:

      declarations: [
      imports: [
        RouterModule.forRoot(routes) // <-- installs Router routes, components and services
      bootstrap: [ RoutesDemoApp ],
      providers: [
        provide(LocationStrategy, {useClass: HashLocationStrategy})
    class RoutesDemoAppModule {}
    // bootstrap our app
      .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:

      template: `
        Stuff in the outer template here



    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.

      template: `
            <li><a [router-link]="['home']">Home</a></li>
            <li><a [router-link]="['login']">Login</a></li>
            <li><a [router-link]="['dashboard']">Dashboard</a></li>


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

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


    Configuring Basic Routing in Angular 4 JavaScript Application

 0 Comment(s)

Sign In

Sign up using

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: