Angular Routing not working, the URL changes but the page doesn't load correctly
Question
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
1 answers
solution1
0 ACCPTED 2016-11-10 22:52:55
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'
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.