Javascript AngularJS路由链路不'；不要在重新装填上工作

我一直在使用TMDb API和AngularJS做一个小项目。我的AngularRouting部分工作正常，我可以点击加载电影细节。单击主页可进入详细信息视图，URL将更改为

电影/：id/：title

，现在如果用户单击详细信息视图中的另一部电影，则新单击电影的相关数据将替换以前的数据。现在，如果我尝试使用浏览器返回，则不会加载上一部电影的数据，但URL会显示上一部电影的标题

除了这个错误，还有一个错误。当我尝试重新加载浏览器时，会导致404错误。如果我打开HTML5模式（true），就会发生这种情况。如果我禁用了

HTML5模式

，则页面不会显示相关信息，但会在视图中显示一个空模板。我只是AngularJS的初学者。我不知道怎么解决这个问题。我提到了我主持网站的域名。我想，看看它会更容易理解我的问题。希望这里有人能帮我

项目URL:

这是我的路线代码

.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);
        }]);

---

解决方案1

angularjs提供HTML5模式，这使得你的应用程序使用基于pushstate的URL而不是hashtags。但是，这需要服务器端支持，因为生成的URL也需要正确呈现

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

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

请查找链接以了解更多信息

解决方案2

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

<base href="/">

完成此操作后，您需要在共享的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

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

IIS服务器

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

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

---

就这样

好极了！尝试一下Curiousdev提供的html5模式答案。我认为你可以使路线更简单。您可以从更改路由

('/movies/:id/:title')

到

以下是imdb上单个电影的示例：

他们也不在url中提供标题

---

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

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

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

我将html和相应的js划分到文件夹中，例如：

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

My 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中，您不需要任何控制器指令。只是：

{{vm.something}}

---

我已经添加了该代码。你能帮我解决视图不加载的问题吗？：）您是否将index.html代码复制到404.html？只需将该页面复制到404页面，它就可以工作了。我没有404.html页面设置，所以它会转到我的网络主机的链接（Hostinger）。查看我附加到这个问题的URL。Ohh，而不仅仅是创建一个名为404.html的页面，并将其添加到您的角度路由

中，否则（{templateUrl:'/404.html'}）类似于这种方式的东西，并且比检查更感谢：）我修复了404错误。唯一剩下的就是没有按照URL加载视图。谢谢您的夸奖。：）即使我更改了路由的URL，我也不会得到与URL相关的电影结果。此链接加载空视图。我将尝试此操作。感谢您的帮助，这样您就可以将路由与html和js保持在一起。希望这将使网站更容易成长。您的问题可能是因为当路由到达时控制器未加载。也许……我已经修复了所有的bug，非常感谢您的帮助。：）