var app = angular.module('angularjs-starter', []);
app.config(function($routeProvider){
$routeProvider.when('/page/:id', {templateUrl: 'Main.html' , controller: 'MainCtrl'});
$routeProvider.otherwise({templateUrl: 'Main.html' , controller: 'MainCtrl'});
});
app.run(function($rootScope, $log){
$rootScope.$on('$routeChangeStart', function(events, next, current) {
$log.log('$routeChangeStart', current, next);
if(!current) {
$log.warn('current has no $route!', current);
}
if(!next) {
$log.warn('next has no $route!', next);
}
});
});
app.controller('MainCtrl', function($scope, $routeParams) {
$scope.id = $routeParams.id || 'no id';
});
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body>
<h1>Default route demo</h1>
<div ng-view></div>
<hr/>
<ul>
<li><a href="#/other">other</a></li>
<li><a href="#/page/1">Page 1</a></li>
<li><a href="#/page/2">Page 2</a></li>
<li><a href="#/page/3">Page 3</a></li>
<li><a href="#/page/4">Page 4</a></li>
</ul>
</body>
</html>
<div>Page with ID={{id}}</div>
/* CSS goes here */