为什么这个 angular 应用程序在重新加载时崩溃？

Question

如果 url 已经填充，我想弄清楚为什么我的页面在重新加载时会中断。这是有关该问题的视频的 link。 https://drive.google.com/file/d/0B7y4F6sYl0HxcnpCa1lhazRCRHc/view?usp=sharing

这是我用于 app.js 和 index.html

的代码

(function(){
   'use strict';

   angular.module('mysteryScience', ['ngRoute'])

 .config(function($locationProvider) {
    $locationProvider.html5Mode(true);
 })

 .config(function($routeProvider, $locationProvider){
     $routeProvider
     .when("/", {
         redirectTo: function () {
          return "/app";
      }
     })
     .when("/app", {
         templateUrl : "view1/app.html"
     })
     .when("/app/article", {
         templateUrl : "view2/article.html"
     })
     .otherwise({redirectTo:'/'});
 })

 .controller('MediaController', function ($scope) {
     $scope.mediaObjs = [
      { 
       background_image: "components/img/Exhibit1.png",
       headline: "Season 0 KMTA",
       pageUrl: "/app/article"
       },
      { 
       background_image: "components/img/Exhibit2.png",
       headline: "Comedy Central The Golden Years",
       pageUrl: "/app/article"
       },
      { 
       background_image: "components/img/Exhibit3.png",
       headline: "Sci-Fi, Crow's voice, Ram Chips",
       pageUrl: "/app/article"
       }
  ];
 })

 .directive("mediaItems", function(){
     return {
         restrict: 'E',
         templateUrl:"components/partials/mediaObjectDirective.html"
     };
 })

})();

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="mysteryScience" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="mysteryScience" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="mysteryScience" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="mysteryScience" class="no-js"> <!--<![endif]-->
<head>
  <base href="/app">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
</head>
<body>

  <section class="header">
    <div class="container-fluid">
     <nav>
       <a href="/app"> <img src="components/img/g.png"/> </a>
     </nav>
    </div>
  </section>

  <div ng-view></div>

  <section class="follow">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-4 left">     
          <p class=""><img src="components/img/facebook.png"/>Help</p>
          <p>Privacy & Terms</p>
          <p>English </p>
        </div>
        <div class="col-sm-offset-4 col-sm-4 right">      
          <p class="">Follow us on</p>
          <img src="components/img/facebook.png"/>
          <img src="components/img/twitter.png"/>
          <img src="components/img/googlePlus.png"/>
          <img src="components/img/pinterest.png"/>
        </div>
      </div>
    </div>
  </section>

</body>
</html>

我已经广泛研究了这个问题，甚至尝试使用不同的 angular 种子，但问题仍然存在。很难找到相关的搜索结果，因为我不确定如何用几句话向 google 描述这个问题。

更新路由

尚未解决页面重新加载时内容消失的问题

 .config(function($routeProvider){
     $routeProvider

        .when('/app', {
            templateUrl : "view1/app.html",
            controller  : 'MediaController'
        })

        .when('/app/article', {
            templateUrl : 'view2/article.html',
            controller  : 'MediaController'
        })

        .otherwise({
            redirectTo: "/app"
        });
 })

Answer 1

您的路由看起来很混乱。它应该看起来像 -

        .when('/', {
            templateUrl : "view1/app.html",
            controller  : 'MediaController'
        })

        .when('/app', {
            templateUrl : "view1/app.html",
            controller  : 'MediaController'
        })

        .when('/app/article', {
            templateUrl : 'view2/article.html',
            controller  : 'MediaController'
        });

        .otherwise({
            redirectTo: "/"
        });

Answer 2

当您没有在服务器端配置路由映射时，可能会发生这种情况。

当您重新加载页面时，您实际上是在访问 localhost/app。如果服务器端没有做路由映射配置，服务器（如nginx）会在web中的/app文件夹中寻找索引文件（index.html、index.php等）根目录。

所以你需要将所有路由映射到服务器端的index.html。

对于 nginx 配置检查这个 question

为什么这个 angular 应用程序在重新加载时崩溃？

Why is this angular app breaking on reload?

javascript

routes

angularjs

ngroute

更新路由