javascript - AngularJS 路由链接在重新加载时不起作用

Question

我一直在使用 TMDb API 和 AngularJS 做一个小型项目。 我的 Angular 路由部分工作正常，我可以在点击时加载电影详细信息。单击主页会将您带到详细信息 View 并且 URL 更改为 movie/:id/:title 现在，如果用户单击 中显示的另一部电影>details查看，新点击的电影的相关数据替换之前的数据。现在，如果我尝试使用浏览器返回，则不会加载上一部电影的数据，但 URL 会显示上一部电影的标题。

除了这个错误，还有一个错误。当我尝试重新加载浏览器时，它会导致 404 错误。如果我打开 html5Mode(true)，就会发生这种情况。如果我禁用 html5Mode 页面不会显示相关信息，但会在 View 中显示一个空模板。我只是 AngularJS 的初学者。我不知道如何解决这个问题。我已经提到了我托管网站的域。我想，看看它会更容易理解我的问题。希望有人能帮助我。

项目网址: http://movie-buffs.xyz/

这是我的路由代码。

.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
            $routeProvider
            .when('/',{
                templateUrl:'templates/movies.html'
            })
            .when('/movies/:id/:title',{
                templateUrl:'templates/moviedetails.html'
            })
            .when('/search',{
                templateUrl:'templates/search.html'
            })
            .when('/tv',{
                templateUrl:'templates/tv.html'
            })
            .when('/tv/:id/:title',{
                templateUrl:'templates/tvdetails.html'
            })
            .when('/celebs',{
                templateUrl:'templates/celebs.html'
            })
            .when('/celebs/:id/:name',{
                templateUrl:'templates/celebsdetails.html'
            })
            .when('/contact',{
                templateUrl:'contact_us.html'
            })

            .otherwise({
                redirectTo:'/'
            });

    $locationProvider.html5Mode(true);
        }]);

Answer 1

解决方案一

angularjs 提供 html5Mode，它使您的应用程序使用基于 pushstate 的 URL 而不是主题标签。然而，这需要服务器端支持，因为生成的 url 也需要正确呈现。

只需将 index.html 复制到 404.html，并将其添加到您的应用中:

angular.module('app', []).config(function($locationProvider) {
  $locationProvider.html5Mode(true);
});

请查找this链接以获取更多信息

方案二

打开 index.html 页面并在头部添加

<base href="/">

您的 Angular 代码启用 html5Mode

 angular.module('main', []).config(['$locationProvider', function($locationProvider) {  
      ...
      $locationProvider.html5Mode(true);
      ...
    });

完成此操作后，您需要在共享 Apache 服务器 的根目录中创建一个 .htaccess 文件，因为您正在使用 apache 服务器添加以下代码

Apache 服务器

RewriteEngine On  
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html

IIS 服务器

<rewrite>
  <rules>
    <rule name="AngularJS" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

就是这样