<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="demo">
<div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#link1/11/ekansh">Link 1</a></li>
<li><a href="#link2/204/test">Link 2</a></li>
<li><a href="#link100">Random Link</a></li>
</ul>
</div>
<hr/>
<h3>Hello, </h3>
<h1 ng-view=""></h1>
</body>
</html>
var app = angular.module('demo', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
template: "HI this is home Screen"
})
.when('/link1/:id/:name', {
templateUrl: "template.html",
controller: 'Ctrl'
})
.when('/link2/:id/:name', {
templateUrl: "template.html",
controller: 'Ctrl'
})
.otherwise({
redirectTo: '/home'
})
}]);
app.controller("Ctrl", function($scope, $routeParams) {
$scope.id = $routeParams.id;
$scope.name = $routeParams.name;
// do other stuff
});
body{background:#ffffff !important;}
<h2> User id : {{id}} , name : {{name}}</h2>