angularjs - 使用ngRoute并出现404错误

全部，我正在阅读The tutorial of $route。
并尝试使示例工作针对我的IIS。当我单击页面中的链接时。 chrome的地址将如下更改。

当我尝试通过点击地址栏中的enter键来重新加载页面时。我以为它将重新加载Moby的页面内容。但是我收到一个错误404。我不知道这是否是ngRoute的最佳做法。为什么我收到404错误。

我不想在jsfiddle或plunker中演示它。因为我认为这与在IIS中部署将有所不同。因此，我在下面发布了代码。谢谢。

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>

最佳答案

如果您不需要html5mode

您可以删除$locationProvider.html5Mode(true);

您的链接将更改为http://localhost:86/#/Book/Moby，但是服务器将能够处理该地址而无需进行任何其他更改。

另一方面

如果绝对必须删除#，则需要设置特定于堆栈的服务器端重定向，以便服务器知道在何处查找页面。

Link rewrite exampled

如果您按下html5mode(true)，还应该在当前不支持html5mode的浏览器初始化之前添加检查。然后根据设置的html5mode更新应用程序中的链接。