Loading
 
What's Next: View All Tutorial →

Angular Js 2 - Understanding Routing Setup

A sample program to understand how to create the routing setup  In this program we have created two components, and two links,   Each link pointing to one component. Live Example availbale in plnkr  https://plnkr.co/edit/d3D...

Published Date: 22/12/2016  Last Modified Date: 22/12/2016    New Post



A sample program to understand how to create the routing setup 

In this program we have created two components, and two links,   Each link pointing to one component.


Live Example availbale in plnkr 

https://plnkr.co/edit/d3DLRQq6MzytLDUfAzYo?p=preview


Program:

File: index.html
 
<html>
  <head>
   
....

    <base href="/">          
  </head>
.....

</html>


<base href="/"> should be added in the index.html file 

If this line is not added, the APP_BASE_HREF error will come
zone.js@0.7.2?main=browser:394 Error: Uncaught (in promise): Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
    at new PathLocationStrategy (common.umd.js:697) [angular]
    at provideLocationStrategy (router.umd.js:5301) [angular]


File: app.routing.js
 
import { RouterModule, Routes } from "@angular/router";


import { AppComponent }  from './app.component';
import { AppOneComponent }  from './one.component';
import { AppTwoComponent }  from './two.component';


const APP_ROUTES: Routes = [
    {path:'', component: AppComponent},
    {path:'component-one',component: AppOneComponent},
    {path:'component-two',component: AppTwoComponent}
];

export const routing = RouterModule.forRoot(APP_ROUTES);

Here the APP_ROUTES is the user defined constant variable, it is an array defining all the url path

path:'' -  http://localhost
path:'component-one' - http://localhost/component-one
path:'component-two' - http://localhost/component-two





File: app.component.js
 
import { Component } from '@angular/core';

import{ComponentOne} from './one.component';
import{ComponentOne} from './two.component';


@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  
      <a [routerLink]="['component-one']" routerLinkActive="active">Load One</a> | 
      <a [routerLink]="['component-two']" routerLinkActive="active">Load Two</a>
   <br>
   <hr>
    <router-outlet></router-outlet>
    `,
    styles:[      `
      .active{
        color: green; font-weight:bold
      }
      `]
})
export class AppComponent { name = 'Angular'; }



[routerLink] is the directive class, it helps to redirect to angular router and load the content inside the <router-outlet>

routerLinkActive="active" - This attribute add the specified class name to the active link. 


File: app/one.component.ts
 
import { Component,View } from '@angular/core';

@Component({
  selector: 'one',
  template: `Component One`
})
export class AppOneComponent { name = 'Angular'; }


File: app/two.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'two',
  template: `Component Two`
})
export class AppTwoComponent { name = 'Angular'; }


File: app/app.module.ts
 
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { AppOneComponent }  from './one.component';
import { AppTwoComponent }  from './two.component';
import { routing }  from './app.routing';



@NgModule({
  imports:      [ BrowserModule , routing],
  declarations: [ AppComponent,AppOneComponent,AppTwoComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Program Execution:


Live Example availbale in plnkr 

https://plnkr.co/edit/d3DLRQq6MzytLDUfAzYo?p=preview
 

Program Output:

 
Hello Angular
Load One | Load Two 

Component One

 
Awaiting for Administrator approval




← Back to list


Related Post




×