My file structure is shown below, but my routing is not working. Can you please help me identify the issue?
index.html
<!DOCTYPE html>
<html ng-app="appNakul">
<head>
<title> Nakul Chawla</title>
<!--<base href="App/"/>-->
<link href="../Content/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<ul>
<li><a href="#/">Default Route</a></li>
<li><a href="#/resume">Resume Route</a></li>
<li><a href="#/home">Home Route</a></li>
</ul>
<div ng-view></div>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="shared/common.js"></script>
<script src="appNakul.js"></script>
<script src="shared/indexCtrl.js"></script>
<script src="home/homeCtrl.js"></script>
<script src="resume/resumeCtrl.js"></script>
</body>
</html>
appNakul.js
(function () {
'use strict';
angular.module('appNakul', ['ngRoute' ])
.config(function ($routeProvider) {
$routeProvider.when('/home', {
title: 'Home',
templateUrl: 'home/home.html',
controller: 'homeCtrl'
})
.when('/resume', {
title: 'Resume',
templateUrl: 'resume.html',
controller: 'resumeCtrl'
})
.otherwise({
redirectTo: '/home'
});
// $httpProvider.interceptors.push('httpInterceptor');
})
.run(function ($rootScope) {
$rootScope.on('$routeChangeSuccess', function (event,currentRoute,previousRoute) {
document.title = currentRoute.title;
});
});
});
Additionally, I have a resume folder and a home folder containing basic HTML layouts and Ctrl files, similar to the example below:
resumeCtrl.js
(function(){
'use strict';
angular.module('appNakul').controller('resumeCtrl',['$scope','$rootScope','$routeParams','$route', function($scope,$rootScope,$routeParams,$route){
}]);
});
The URL that is generated is:
../App/index.html#/home, but the URL that actually loads the content is ..App/home/home.html