Using ngRoute and getting 404 error
That's it, I read the $ route Tutorial . and try to get the example to work against my IIS. When I click a link on the page. The chrome address will be changed as shown below.
And when I tried to reload the page by pressing a key enter
in the address bar. I assumed it would reload the page content for Moby
. But I got an error 404
. I don't know if this is the best practice for ngRoute. Why am I getting a 404 error.
I didn't want to show it in jsfiddle or plunker. because I thought it would be different from deploying it in IIS. So I am posting the code below. Thank.
TestRoute.html
<html ng-app="ngRouteExample">
<head>
<title>Angualar js test</title>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script>
var routeApp=angular.module('ngRouteExample', ['ngRoute']);
routeApp.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
}).controller('BookController', function($scope, $routeParams) {
$scope.name = "BookController";
$scope.params = $routeParams;
}).controller('ChapterController', function($scope, $routeParams) {
$scope.name = "ChapterController";
$scope.params = $routeParams;
});
routeApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
</script>
<script type="text/ng-template" id="book.html">
controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
</script>
<script type="text/ng-template" id="chapter.html">
controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
Chapter Id: {{params.chapterId}}
</script>
</head>
<body>
<div ng-controller="MainController">
Choose:
<a href="Book/Moby">Moby</a> |
<a href="Book/Moby/ch/1">Moby: Ch1</a> |
<a href="Book/Gatsby">Gatsby</a> |
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="Book/Scarlet">Scarlet Letter</a><br/>
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
</div>
<body>
source to share
If you don't need html5mode
You can delete $locationProvider.html5Mode(true);
Your link will change to http://localhost:86/#/Book/Moby
, but the server will be able to process the address without any additional changes.
On the other hand
If you absolutely need to delete #
, you will need to set up a server side redirect specific to your stack so the server knows where to find this page.
If you omit html5mode(true)
, you must also add a check before initializing html5mode for browsers where it is currently not supported. Then update the links in your app accordingly based on the html5mode you set.
source to share