<!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 */