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

Question

我一直在使用TMDb API和AngularJS做一个迷你项目。我的角度路由部分的作品，我可以加载点击电影的详细信息。主页上的点击会带您到详细信息视图和URL更改为movie/:id/:title，现在如果用户单击详情视图中存在的另一个电影，则新点击的电影的相关数据将替换以前的数据。现在，如果我尝试返回使用浏览器，以前的电影的数据不会加载，但URL显示前一部电影的标题。

随着这个错误，还有一个其他的错误。当我尝试重新加载浏览器时，它会导致404错误。如果我打开html5Mode(true)这发生。如果我禁用html5Mode该页面不显示相关信息，但在视图中显示一个空模板。我只是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

解决方案1 ​​

angularjs提供html5Mode，这使得你的应用程序使用的基于pushState的-网址，而不是主题标签。然而，这需要服务器端的支持，因为生成的URL需要正确渲染为好。

只需复制的index.html到404.html，并添加到您的应用程序：

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

请找this链接了解更多信息

解决方案2

打开的索引。 html页面，并在头部分添加

<base href="/"> 

你的角码启动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脚本等。确保它在你添加酷酷的东西之前有效

Answer 3

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

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

我把与相应的JS在HTML中的文件夹例如：

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

我的电影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}}