AngularJSRouting

AngularJS Routing with Parameter

AngularJs provides inbuilt routing framework,This will take 10 min to setup routing for any project in Angularjs

In todays post we will see how to configure routing for Angular Js application

There are two ways to add rouiting in angularjs

1.While creating application angular will ask if routing is required or not.like below screen shot

2. Write your own typescript file and exports routing

Today we will be going to see first approach by creating routing while creating application in angularjs.

This will create below files along with your project

app-routing.module.ts

Entry for this will be added in app.module.ts file

Create your angular Application

Setup Angular JS Application

Hello World with Angular JS

Prerequisites Angularj JS new version is using nodejs for setting up application and for running applicaion you will also need any code editor tool. For current setup we are using visual code studio Kindly down load latest version of nodejs and visual code studio on your machine and complete setup Node Installation 1 Go to…

by lazzygeek 26th Jul 20203rd Aug 2021

while creating angular application kindly select routing yes

2. Add Two components in your applications

ng generate component firstpage

ng generate component secondpage

This will look like below screenshot

3. Now Add routing in typescript class and add routing for these components

4. Add <router-outlet></router-outlet> tag and anchor tags for your routing in app.component.html page

we have created 3 routs here

      
          <nav>
            <div class="nav-wrapper">
              <a href="#" class="brand-logo">Logo</a>
              <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a [routerLink]="['/']">Home</a></li>
                <li><a  [routerLink]="['/first']">First Page</a></li>
                <li><a [routerLink]="['/second/3']">Second Page</a></li>
              </ul>
            </div>
          </nav>

<router-outlet></router-outlet>

5. Edit secondpage comonent

secondpage.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-secondpage',
  templateUrl: './secondpage.component.html',
  styleUrls: ['./secondpage.component.css']
})
export class SecondpageComponent implements OnInit {
  private sub:any;
  constructor(private route: ActivatedRoute) { }
  id = 0;

  ngOnInit() {
    // Subscribe to route params
    this.sub = this.route.params.subscribe(params => {

      this.id = params['id'];

      console.log(this.id);
  });
}

}

secondpage.component.html

<p>secondpage works! </p>
<p>in route parameter is {{id}}</p>

6. Run your application and test your routings

If you clone entire project then first run npm install so all dependencies will get downloaded.

Then run below command

ng serve --open

You will get below kind of output for your project once it get compiled and it will open your application in browser

7. Test Routes ,now click on first page and second page link from menu

When you clicked on second link it has taken input parameter and displayed on page

Now if you see both hyperlinks are working as routers for us ..This way your create centralized routing mapping in angularjs and use in your applicaiton

Source Code: https://github.com/letsblogcontent/AngularJS/tree/master/routingwithparameter