<!DOCTYPE html>
<html ng-app="demo">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.min.js"></script>
<script src="script.js"></script>
</body>
</html>
var demoapp = angular.module("demo",['ngRoute']);
demoapp.controller("mainCtrl",["$scope",'$location',function($scope,$location){
$scope.next = function(){
$location.path("/myparam/"+"parameterTest");
}
}]);
demoapp.controller("paramview",["$scope",'$route',function($scope,$route){
$scope.param1 = $route.current.params.param1;
}]);
demoapp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'landing.html',
controller: 'mainCtrl'
})
.when('/myparam/:param1', {
templateUrl: 'template1.html',
controller: 'paramview'
});
}]);
/* Styles go here */
<div>
<p>Param1 : {{param1}} </p>
</div>
<p>I am landing page</p>
<p><button ng-click="next();">Go...</button></p>