Before going to Angularjs Routing, Let’s have a quick overview of Single-Page Application (SPAs).

 

What is Single Page Applications?

 

Single Page Applications (SPAs) are web applications that will works or loads on a single HTML page and dynamically update the page based on user interaction.

 

That means, changing the content on what we want to route.

 

Routing in AngularJs with parameter | Single page examples

 

What is Angularjs Routing?

 

If we want to navigate to different pages in our application and we also want the application to stay in a single page with no page loading, then we can use the ngRoute module.

 

  • AngularJS routes enable you to create different URLs for different content in our application.
  • In AngularJs, A route is specified in the URL after the ‘ # ‘ sign.

 

Let’s take an example of a site which is hosted via the URL

http://localhost:3000/index.html.

 

On this page, you would host the main page of your application.

Suppose if the application was organizing an Event and one wanted to see what the various events on display are, or wanted to see the details of a particular event or delete an event.

When Angularjs Routing is enabled in Single Page Application all of this functionality would be available in the following links and the mail URL remains the same.

 

http://localhost:3000/index.html#ShowEvent

 

http://localhost:3000/index.html#DisplayEvent

 

http://localhost:3000/index.html#DeleteEvent

 

The ngRoute module routes your application without reloading the entire application.

 

Routing in AngularJs with parameter | Single page examples

 

What do we need?

 

We have to include angular js route module as followed in script tags or you can download it and store it in your library and use in your HTML page as script

 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

 

Then we have to add the ngRoute dependency in the application module as follows.

 

var app = angular.module("routingApp", ["ngRoute"])

 

Now our application has access to the route module, which provides the $routeProvider.

 

[Read: Progressive Web Apps | PWA: Framework and Tools for PWA]

 

Use the $routeProvider to configure different routes in our application.

 

var app = angular.module("routingApp", ["ngRoute"]);

app.config(function($routeProvider) {

 $routeProvider

 .when("/", {

   templateUrl : "main.html"

 })

 .when("/delhi", {

   templateUrl : "delhi.html"

 })

 .when("/mumbai", {

   templateUrl : "mumbai.html"

 });

});

 

 

Now where it is going?

 

Now our application needs a container to put the content provided by Angularjs Routing.

 

The container is ng-view directive.

 

Now you can see the entire single page application code as follows

 

<!DOCTYPE html>

<html>

<head>

   <meta charset='utf-8'>

   <meta http-equiv='X-UA-Compatible' content='IE=edge'>

   <title>Form Validation</title>

   <meta name='viewport' content='width=device-width, initial-scale=1'>

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

</head>




<body ng-app="myApp">

   <p><a href="#/!">Main</a></p>

<a href="#!delhi">City 1</a>

<a href="#!mumbai">City 2</a>




<p>Click on the links.</p>




<p>Note that each "view" has its own controller which each gives the "msg" variable a value.</p>




<div ng-view></div>




<script>

   var app = angular.module("myApp", ["ngRoute"]);

   app.config(function($routeProvider) {

       $routeProvider

       .when("/", {

           templateUrl : "main.html",

       })

       .when("/delhi", {

           templateUrl : "delhi.html",

           controller : "delhiCtrl"

       })

       .when("/mumbai", {

           templateUrl : "mumbai.html",

           controller : "mumbaiCtrl"

       });

   });

   app.controller("delhiCtrl", function ($scope) {

       $scope.msg = "Hi, This is Delhi. Capital of India";

   });

   app.controller("mumbaiCtrl", function ($scope) {

       $scope.msg = "Hi, This is Mumbai. Financial Capital of India";

   });

   

   </script>

</body>

</html>

 

To configure the routes we will use $routeProvider. We use the ngRoute config() method to configure the $routeProvider.

 

The config() method takes a function which takes the $routeProvider as a parameter and the Angularjs Routing configuration goes inside the function.

 

$routeProvider has a simple API, accepting the when() or otherwise() method.

 

when() method takes a path and route as parameter and route contain two properties, those are templateUrl and controller.

 

templateUrl defines which HTML page has to load on between div of the ng-view directive.

 

controller property defines which controller should be used for the respective template.

 

delhi.html

 

<h1>Delhi</h1>

<h3>Delhi is the capital of India.</h3>

<p>It is the most populous city in India, with a metropolitan area of over 1.84 crores inhabitants.</p>

<p>{{msg}}</p>

 

mumbai.html

 

<h1>Mumbai</h1>

<h3>Mumbai is the financial capital India.</h3>

<p>It is the most populous city in India, with a metropolitan area of over 13 million inhabitants.</p>

<p>{{msg}}</p>

 

[Read: Page your data with ReactJs Pagination]

 

If you’ve any doubts, please let us know through comment!!

Follow Us on Facebook | Twitter | LinkedIn.

Let CronJ assist you..!

Thank you !!!