Dynamic routing with AngularJS

Sep 8, 2014 - Edit this page on GitHub

In My previous Article we have learned about Routing in angular JS . But in normal routing if we have 1000 route then at that time set config for every route is not a good choice . for this we will do Dynamic Routing. Thanks Angular you have provide $routeParams.

Dynamic routing with Angular JS is easily done by $routeParams. :)

In previous article example you can see that for every page we set routing configuration for below route

home
aboutus
contactus

Now we will set it by Dynamic routing.

How we will set Dynamic Routing ?

Lets Start One by One.

First make a main file it will like our previous article in which we set all layout and linked all files like below.

index.html

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
    <script src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <!--Now it Tells to AngularJS to be active in this portion of the page. In this case the entire document.(due to we apply on body tag ) -->
    <div class="container">
      <div class="jumbotron">
        <img src="http://tech-blog.maddyzone.com/uploads/2013/10/maddyzone-logo-300x72.png" />
        <br />
        <h1>Dynamic Routing Example</h1>
        <br />
        <!-- navigation menu start-->
        <a href="#home" class="btn btn-primary">Home</a>
        <a class="btn btn-success" href="#about">About</a>
        <a class="btn btn-danger" href="#contact">Contact</a>
        <!-- navigation menu stop-->
        <br />
        <br />
        <!-- by ng-view we create a space in this dynamic content come according to route by ng-view angular know that on which area content will set-->
        <div ng-view="">in this area by $routeparam content will change</div>
        <br />
        <a href="http://maddyzone.com/angularjs/javascript/learn-complete-angularjs-5-steps-step-5-5" target="_blank">View Post on Maddyzone </a>
      </div>
    </div>
  </body>

</html>

Now as per previous article we set three template.

home.html

<!-- content set for home page -->
<div style="font-size: 32px" >
	<h1>Home </h1>
	<h2 class="label label-info"></h2>
</div>

aboutus.html

<!-- content set for about us page -->
<div style="font-size: 32px">
	<h1>About Us </h1>
	<h2  class="label label-info"></h2>
</div>

contact.html

<!-- content set for contact page -->
<div style="font-size: 32px">
	<h1>Contact </h1>
	<h2 class="label label-danger"></h2>
</div>

But now we don’t need these above template files we will set a single file with name uirouter.html in which all above template file html set.

uirouter.html

<!-- this is our template which will set in ng-view section
     in main page(index.html)
     in this template by $routeParam set in script then scope value set dynamic
     in our case we are using two variable $scope.page and $scope.message
-->
<div style="font-size: 32px">
  <h1>[![Dynamic routing with AngularJS]({{ site.url }}/uploads/2014/09/Dynamamic-routing-with-angularjs.png)]({{ site.url }}/uploads/2014/09/Dynamamic-routing-with-angularjs.png)

Dynamic routing with Angular JS is easily done by $routeParams. :)

In previous article example you can see that for every page we set routing configuration for below route

home
aboutus
contactus

Now we will set it by Dynamic routing.

How we will set Dynamic Routing ?

Lets Start One by One.

First make a main file it will like our previous article in which we set all layout and linked all files like below.

index.html

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
    <script src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <!--Now it Tells to AngularJS to be active in this portion of the page. In this case the entire document.(due to we apply on body tag ) -->
    <div class="container">
      <div class="jumbotron">
        <img src="{{ site.url }}/uploads/2013/10/maddyzone-logo-300x72.png" />
        <br />
        <h1>Dynamic Routing Example</h1>
        <br />
        <!-- navigation menu start-->
        <a href="#home" class="btn btn-primary">Home</a>
        <a class="btn btn-success" href="#about">About</a>
        <a class="btn btn-danger" href="#contact">Contact</a>
        <!-- navigation menu stop-->
        <br />
        <br />
        <!-- by ng-view we create a space in this dynamic content come according to route by ng-view angular know that on which area content will set-->
        <div ng-view="">in this area by $routeparam content will change</div>
        <br />
        <a href="http://maddyzone.com/angularjs/javascript/learn-complete-angularjs-5-steps-step-5-5" target="_blank">View Post on Maddyzone </a>
      </div>
    </div>
  </body>

</html>

Now as per previous article we set three template.

home.html

<!-- content set for home page -->
<div style="font-size: 32px" >
	<h1>Home </h1>
	<h2 class="label label-info">{{message}}</h2>
</div>

aboutus.html

<!-- content set for about us page -->
<div style="font-size: 32px">
	<h1>About Us </h1>
	<h2  class="label label-info">{{message}}</h2>
</div>

contact.html

<!-- content set for contact page -->
<div style="font-size: 32px">
	<h1>Contact </h1>
	<h2 class="label label-danger">{{message}}</h2>
</div>

But now we don’t need these above template files we will set a single file with name uirouter.html in which all above template file html set.

uirouter.html

<!-- this is our template which will set in ng-view section
     in main page(index.html)
     in this template by $routeParam set in script then scope value set dynamic
     in our case we are using two variable $scope.page and $scope.message
-->
<div style="font-size: 32px">
  <h1>{{page}}</h1>
  <div class="alert bg-success"><b>{{message}}</b></div>
</div>

In above uirouter.html we are using two $scope variables which value set according to route

$scope.page = by this we set title of page
$scope.message= by this we set description of page

Now in our script code in which we will set route configuration.

app.js

//create a module myApp
var myApp = angular.module('myApp', ['ngRoute']);
//Now Configure  our  routing
myApp.config(function ($routeProvider, $locationProvider) {
    console.log("route");
    $routeProvider
    // set route for the dynamic page
    .when('/:pagename',
    {
        controller: 'RouteCtrl',
        templateUrl: 'uirouter.html'
    }) // if not match with any route config then send to home page
     .otherwise({
        redirectTo: '/'
      });
 });
 
// create the controller and inject Angular's $scope
  // set for Route Controller
  myApp.controller('RouteCtrl', function($scope,$routeParams) {
    // create a message to display in our view 
    $scope.page=$routeParams.pagename;
    $scope.message = "(',')---I am on "+$routeParams.pagename +" page---(',')";
  });

in above script we use

$routeProvider
    // set route for the dynamic page
    .when('/:pagename',
    {
        controller: 'RouteCtrl',
        templateUrl: 'uirouter.html'
    }) // if not match with any route config then send to home page
     .otherwise({
        redirectTo: '/'
      });

here ⁄:pagename is for route configuration.

Route Name	$routeParams	$routeParams Ouput
/home	$routeParams.pagename	home
/aboutus	$routeParams.pagename	aboutus
/contactus	$routeParams.pagename	contactus

Here you can see in this all route we use $routeParams.pagename and output come different which will shown in our uirouter.html template file $scope variables.

we can set any no of attributes in dynamic route like

for two parameters in URL.

xyz.com#/firstparameter/secondparameter

url	$routeParams config	$routeParams	$routeParams Output
/javascript/a javascript post	/:category/:postname	$routeParams.category $routeParams.postname	javascript a javascript post

for three parameters in URL.

xyz.com#/firstparameter/secondparameter/thirdparameter

url	$routeParams config	$routeParams	$routeParams Output
/javascript/angular/a javascript post	/:category/:subcategory/:postname	$routeParams.category $routeParams.subcategory $routeParams.postname	javascript angular a javascript post

So you can set any no of route parameters and get easily and do Dynamic Routing.

Happy Dynamic Routing :)

Code

Demo

Please give your comment and your suggestion Thanks. </h1> <div class="alert bg-success"></div> </div>