Question

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

enter image description here

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

enter image description here

我不想在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>

Answer 1

如果您不需要html5mode

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

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

另一方面

如果您必须删除#，则需要设置特定于堆栈的服务器端重定向，以便服务器知道在哪里找到该页面。

Link rewrite exampled

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

Answer 2

问题来自您的服务器，当您刷新时发送/ book / moby请求并且它不知道如何回答它。您需要设置重定向。

使用ngRoute并获得404错误

2 个答案: