Menu
All, I was reading The tutorial of $route. and try to get the example work against my IIS. When I click the link in the page. The address of chrome will be changed like below.
And when I tried to reload the page by hitting the enter key in the address bar. I supposed it will reload page content for the Moby. But I got a error 404. I don't know if this is the best practice for ngRoute. Why I got 404 error.
I didn't want to demo it in the jsfiddle or plunker . because I thought it will be difference from deploying it in the IIS. So I post the code below. Thanks.
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>
934
If you do not require html5mode
You can remove $locationProvider.html5Mode(true);
Your link would change to http://localhost:86/#/Book/Moby, but the server would be able to handle the address without any additional changes.
On the other hand
If you absolutely have to remove the # then you will need to setup server side redirect specific to your stack so the server knows where to find the page.
Link rewrite exampled
If you go down the html5mode(true) you should also add a check before you initialize html5mode for browsers where it is currently not supported. Then update the links in your application appropriately based on html5mode being set.
185
The problem come from your server, when you refresh you send a request for /book/moby and it doesn't know how to answer it. You need to setup a redirect.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
