Question

我一直在使用 TMDb API和AngularJS进行迷你项目。我的Angular路由部分可以工作，我可以点击加载电影细节。点击主页会转到详细信息视图，网址将更改为movie/:id/:title，现在，如果用户点击详细信息视图中显示的其他电影，新点击的电影的相关数据取代了以前的数据。现在如果我尝试使用浏览器返回上一部电影的数据没有加载，但URL显示上一部电影的标题。

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

PROJECT网址： 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的URL而不是hashtags。但是，这需要服务器端支持，因为生成的URL也需要正确呈现。

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

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

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

解决方案2

打开index.html页面并在head section中添加

<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

他们不会在网址中提供标题

此外：如果要分解角度路由中的问题，请删除所有额外的jquery脚本。在添加酷炫gui之前确保它可以正常工作

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中你不需要任何Controller指令。只是：

{{vm.something}}

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

3 个答案: