Routing in angular 4

Routing is used to navigate one component to another component without ever change the URL. Adding routing allow the user to go straight into certain aspects of the application. This is very useful. it can keep your application linkable and bookmark and allow users to share links with others.

configure Routing

The Base URL tag must be set within <head> tag of index.html

<base href="/">

The <base href="/"> tell the Angular router what is the static part of the URL. Then only Router modifies the remaining part of the URL.

Route Definition object

The Route type is an array route, this is define the routing for the application. we can set up the expected paths.

Each route have different attribute. The common attribute are

Path - URL is shown in the browser when application in the specific route
component - pointing the specific component for the specific route
redirectTo - redirect route if needed. each route have either component or redirect attribute defined in the routing.
pathMatch - optional property that defaults to 'prefix' determines whether to match full URLs or just the beginning. When defining a route with empty path string set pathMatch to 'full', otherwise it will match all paths
children - array of route definitions objects representing the child routes of this route

app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app.routes';
import { AppComponent } from './app.component.ts';
import ComponentOne from './component-one';
import ComponentTwo from './component-two';

@NgModule({
  imports: [ BrowserModule, AppRoutingModule],
  declarations: [ AppComponent, ComponentOne, ComponentTwo ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

app/app.component.ts

import {Component} from '@angular/core';
@Component({
  selector: 'app',
  template: `
    <nav>
      <a routerLink="/component-one">Component One</a>
      <a routerLink="/component-two">Component Two</a>
    </nav>

    <div style="color: green; margin-top: 1rem;">Outlet:</div>
    <div style="border: 2px solid green; padding: 1rem;">
      <router-outlet></router-outlet>
    </div>
  `

})

export class AppComponent { }

app/app.routes.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import ComponentOne from './component-one';
import ComponentTwo from './component-two'; export const routes: Routes = [
  { path: '', redirectTo: 'component-one', pathMatch: 'full' },
  { path: 'component-one', component: ComponentOne },
  { path: 'component-two', component: ComponentTwo }
];
@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

app/component-one.ts

import {Component} from '@angular/core';
@Component({
  selector: 'component-one',
  template: 'Component One'
})

export default class ComponentOne { }

app/component-two.ts

import {Component} from '@angular/core';

@Component({
  selector: 'component-two',
  template: 'Component Two'
})

export default class ComponentTwo {}

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

index.html

<!DOCTYPE html>

<html>

  <head>

    <title>Angular 2 - Basic router example</title>

    <script src="https://unpkg.com/systemjs@0.19.38/dist/system.src.js"></script>

    <script src="https://code.angularjs.org/tools/typescript.js"></script>

    <script src="system.config.js"></script>

    <!-- Set the base href, demo only! In your app: <base href="/"> -->

    <script>document.write('<base href="' + document.location + '" />');</script>

  </head>

  <body>

    <app>Loading...</app>    

    <script>

      System.import('app');

    </script>

  </body>

</html>

0 Comments

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed