nakulchawla09 nakulchawla09 - 29 days ago 16
AngularJS Question

Angular Routing not working, the URL changes but the page doesn't load correctly

Below is my file structure, please let me know what I am doing wrong that my routing is not working:

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;
});
});
});


apart from this I have a resume folder and a home folder that have basic html layouts and Ctrl files that both look like below:

resumeCtrl.js

(function(){
'use strict';
angular.module('appNakul').controller('resumeCtrl',['$scope','$rootScope','$routeParams','$route', function($scope,$rootScope,$routeParams,$route){

}]);

});


The URL that gets created is :
../App/index.html#/home
, but the URL that is actually loading the content is
..App/home/home.html


enter image description here

Answer

New answer
In your appNakul.js you are instantiating the module in an anonymous function. Only thing is, you're not calling the function! Change it to this:

(function () {
    'use strict';
    angular.module('appNakul', ['ngRoute' ])
    // Truncated
})();

And you should be good to go.

Old but still relevant answer
Looks like your templateUrl for the route is incorrect.
You said you have a resume and a home folder, the url should be in the resume folder then.

.when('/resume', {
    title: 'Resume',
    templateUrl: 'resume/resume.html',
    controller: 'resumeCtrl'
})