AngularJS 路由鏈接在重新加載時不起作用

Question

我一直在使用TMDb API 和 AngularJS做一個小項目。 我的 Angular 路由部分工作正常，我可以點擊加載電影詳細信息。 單擊主頁會將您帶到詳細信息視圖，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，它使您的應用程序使用基於推送狀態的 URL 而不是主題標簽。 然而，這需要服務器端支持，因為生成的 url 也需要正確呈現。

只需將 index.html 復制到 404.html，並將其添加到您的應用程序中：

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

請找到此鏈接以獲取更多信息

解決方案2

打開 index.html 頁面並在 head 部分添加

<base href="/">

您的 Angular 代碼啟用html5Mode

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

執行此操作后，您需要在共享Apache 服務器的根目錄上創建一個 .htaccess 文件，因為您正在使用 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&150_rd_hp_hp_hp_hp_pri&15_rd_p_hp=hero=2896364242

他們也不在網址中提供標題

進一步：如果您想分解角度路由中的問題，請刪除所有額外的 jquery 腳本等等。 在添加很酷的 gui 東西之前確保它有效

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

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