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