AngularJS $routeParams

/*!
** ngRouter App
** Licensed under the Apache License v2.0
** http://www.apache.org/licenses/LICENSE-2.0
** Built by Jay Kanakiya ( @techiejayk )
**/

"use strict";

var App = angular.module("example",["ngRoute"]);

App.controller("ExmpCtrl",function  ($scope,$route) {
	$scope.message = "Takes it from Parent";
	$scope.debug = $route;
});

App.controller("ChildCtrl1",function  ($scope,$routeParams) {
	$scope.message = "Link 1 has been Visited";
	$scope.debug = $routeParams;
});

App.controller("ChildCtrl2",function  ($scope,$routeParams) {
	$scope.message = "Link 2 has been Visited";
	$scope.debug = $routeParams;
});

App.controller("ChildCtrl3",function  ($scope,$routeParams) {
	$scope.message = "Link 3 has been visited";
	$scope.debug = $routeParams;
});

App.config(function  ($routeProvider,$locationProvider) {
	$routeProvider
	.when("/link1",{
		templateUrl : "hello.html" , controller : "ChildCtrl1"
	})
	.when("/link2/:linkId",{
		templateUrl : "hello2.html" , controller : "ChildCtrl2"
	})
	.otherwise({
		templateUrl : "hello3.html"
	});
	$locationProvider.html5Mode(true);
});

<!doctype html>
<html ng-app="example">
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.min.js"></script>
  <script type="text/javascript" src="script.js"></script>

  <script type="text/javascript">
  //this is here to make plunkr work with AngularJS routing
  angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>
</head>
  <body>

<div ng-controller="ExmpCtrl">
<div class="row" ng-controller="ExmpCtrl">
            <p><a href="link1?search=hello">Link1</a></p>
            <p><a href="link2/1">Link2</a></p>
            <p><a href="#">Back</a></p>
          </div>
          <div ng-view></div>
</div>


  </body>
</html>

<h1>Hello World from Link1</h1>
{{message}}
<p class="text-info">{{debug}}</p>

The path defined in $routeProvider can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches.

For example /list/:id will match /list/1 and give <code>$routeParams.id = 1.</code>

The path can contain optional named group parameters with a question mark.FOr e.g.link1?search=hello will give 
<code>$routeParams.search = "hello"</code>

<h1>Hello World from Link2</h1>
{{message}}
<p class="text-info">{{debug}}</p>

<h1>Gets redirected when no routes are defined</h1>
{{message}}