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

Question

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

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

项目 URL: 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

解决方案 1

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

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

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

更多信息请查找thislink

解决方案 2

打开 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>

就是这样

Answer 2

页面不错！尝试来自 Curiousdev 的 html5 模式答案。而且我认为您可以使路由更简单。您可以更改路由

('/movies/:id/:title')

到

('/movies/:id')

以下是 imdb 上单部电影的示例：

http://www.imdb.com/title/tt1219827/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=2896364242&pf_rd_r=0QKNGNCGK3XM4PBDN2A0&pf_rd_s=hero&pf_rd_t=15061&pf_rd_i=homepage&ref_=hm_hp_cap_pri_2

他们也不在 url 中提供标题

进一步：如果您想解决 angular 路由中的问题，请删除所有额外的 jquery 脚本等。在添加酷炫的图形用户界面之前确保它可以正常工作

Answer 3

我就是这样做的。在我的配置中。

.config(['$routeProvider', function ( $routeProvider) {
$locationProvider.html5Mode(false).hashPrefix('');
$routeProvider.otherwise({redirectTo: '/dashboard'});}]);

我把html和对应的js分到文件夹ex:

/movie-details/movie-detail.html
/movie-details/movie-detail.js

我的 movie-details.js 应该类似于：

'use strict';
angular.module('myapp')
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/movies/:Id', {
            templateUrl: 'movie-details/movie-detail.html',
            controller: 'MovieDetails as vm'
        });
    }])
    .controller('MovieDetails', function ($scope, $routeParams) {
        var vm = this;
        vm.movieId= $routeParams.Id;

    });

在 html 中，您不需要任何控制器指令。只是：

{{vm.something}}

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

AngularJS routing links don't work on reload

javascript

routing

angularjs

angular-routing