为什么这个角度应用程序在重新加载时会中断?

时间:2016-08-09 22:31:02

标签: javascript angularjs routes ngroute

我想弄清楚为什么我的页面会在我重新加载时断开,如果已经填充了网址。 以下是该问题视频的链接。 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>
&#13;
&#13;
&#13;

我已经广泛研究过这个问题,甚至试过使用不同的角度种子,但问题仍然存在。找到相关的搜索结果有点困难,因为我不确定如何用几句话来描述谷歌的问题。

更新路由

Hasn未修复内容问题在页面重新加载时消失

&#13;
&#13;
	.config(function($routeProvider){
	    $routeProvider

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

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

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

2 个答案:

答案 0 :(得分:1)

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

当您重新加载页面时,实际上是在访问localhost/app。如果在服务器端没有进行路由映射配置,则服务器(例如nginx)将在Web根目录的/app文件夹中查找索引文件(index.html,index.php等)。 / p>

因此,您需要将所有路由映射到服务器端的index.html

对于nginx配置,请检查此question

答案 1 :(得分:0)

您的路由看起来很困惑。它应该看起来像 -

=COUNTIFS(Sheet1!F:F,">=A3",Sheet1!F:F,"<A4")