<!DOCTYPE html>
<html lang="en">
<head>
  <title>AngularJs Routes</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
  <script>
    var app = angular.module("routesApp", ['ngRoute']);

    app.controller("routesController", function($scope, $routeParams) {
      $scope.params = $routeParams.param;
    });

    app.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.when('/routeURL1/:params', {
          templateUrl: 'templateURL1',
          controller: 'routesController'
        }).
        when('/routeURL2/:params>', {
          templateUrl: 'templateURL2',
          controller: 'routesController'
        }).
        when('/routeURL3/:params', {
          templateUrl: 'templateURL3',
          controller: 'routesController'
        }).
        otherwise({
          redirectTo: '/login'
        });
      }
    ]);
  </script>
</head>

<body ng-app="routesApp">
  <div ng-view></div>
  <div>
    <ul>
      <li>
        <a href="#/routeURL1/1001">Route Text1 with Params</a>
      </li>
      <li>
        <a href="#/routeURL2/1002">Route Text2 with Params</a>
      </li>
      <li>
        <a href="#/routeURL3/1003">Route Text3 with Params</a>
      </li>
    </ul>
  </div>
</body>
// Code goes here

/* Styles go here */