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

Question

我一直在使用 TMDb API 和 AngularJS 做一个迷你项目。我的 Angular 路由部分可以工作，我可以在点击时加载电影详细信息。点击主页后，您将进入 details 视图，并且 URL 更改为 movie/:id/:title，现在如果用户点击 details 视图中的另一部电影，相关数据为新点击的电影替换之前的数据。现在，如果我尝试使用浏览器返回，则上一部电影的数据不会加载，但 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 而不是主题标签。但是，这需要服务器端支持，因为生成的 url 也需要正确呈现。

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

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

请找到this链接了解更多信息

解决方案 2

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

<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

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

进一步：如果您想解决 angular routing 中的问题，请删除所有额外的 jquery 脚本等等。在添加酷炫的 gui 内容之前确保它可以正常工作

Answer 3

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

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

我将带有相应js的html分成文件夹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}}