<!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/wp-content/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://tech-blog.maddyzone.com/javascript/learn-complete-angularjs-5-steps-step-5-5" target="_blank">View Post on Maddyzone </a>
      </div>
    </div>
  </body>

</html>
//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---(',')";
  });
 
//
/* Styles go here */

Dynamic routing in angular js
<!-- 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
     -->
<h1>{{page}}</h1>
<div class="alert bg-success"><b>{{message}}</b></div>