在我的网站上，如果我加载模板然后刷新该页面，则会收到“找不到页面”错误。有什么办法可以防止这种情况发生吗？
我可以发布代码，但我不太确定哪一段代码有值(value)。这是我的主页(其中包含模板):
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head >
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="img/computer.ico" />
<title>Erica Peharda</title>
<!--angular uses this base element which path to use when it gets any front end resource- this is the root b/c of "/"-->
<base href='/'>
</head>
<body>
<div class='container1'>
<div class='page-header'>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Welcome to EP Web Developing!</a>
</div>
<!--default menu bar below-->
<ul class="nav navbar-nav navbar-right">
<li><a href="/"><i class="fa fa-home"></i>Home</a></li>
<li><a href="/about"><i class="fa fa-shield"></i>About Me</a></li>
<li><a href="/contact"><i class="fa fa-comment"></i>Contact for a Quote</a></li>
<li><a href="/projects"><i class="fa fa-comment"></i>Projects</a></li>
</ul>
</div>
</nav>
<h1 class="titleText pull-left">Erica Peharda</h1>
<!--got code below from mycountdown.org-->
<div class="countdownContainer pull-right">
<noscript>
<div align="center" class="noCountdown">
</div>
</noscript>
<script type="text/javascript" src="http://mycalendar.org/calendar.php?cp3_Hex=2D00F9&cp2_Hex=F4EAF9&cp1_Hex=0E0E0F&ham=0&img=&hbg=0&hfg=1&sid=0&fwdt=150&text1=Halloween is on 31st October 2015&group=Holiday&calendar=International&widget_number=3">
</script>
</div>
<div class="photobanner">
<img class="first" src="img/pic1.jpg"/>
<img src="img/pic2.jpg"/>
<img src="img/pic3.jpg"/>
<img src="img/pic4.jpg"/>
<img src="img/pic1.jpg"/>
<img src="img/pic2.jpg"/>
<img src="img/pic3.jpg"/>
</div>
<div class="row">
<div class="col-md-4">
<a href="https://twitter.com/epeharda"><img class="twitter" src="img/twitter.png"/></a> <a href="https://www.facebook.com/epeharda"><img class="twitter" src="img/facebook.png"/></a>
</div>
</div>
</div>
<!--the place holder to render our view dependent on the route-->
<div class="row">
<div class="col-sm-12" ng-view>
</div>
</div>
</div>
<script type='text/javascript' src="lib/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="src/app.js"></script>
<script type="text/javascript" src="src/controller.js"></script>
<script type="text/javascript" src="src/factories.js"></script>
<script type="text/javascript" src="src/filter.js"></script>
<script type="text/javascript" src="src/style.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Asap' rel='stylesheet' type='text/css'>
</body>
</html>
提前致谢!!
这是我的路由器配置: angular.module('MainApp',['ngRoute', 'ngResource'])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/',{
templateUrl:'views/home.html',
contorller: 'HomeController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutController'
})
.when('/contact',{
templateUrl: 'views/contact.html',
controller: 'EmailController'
})
.when('/projects',{
templateUrl: 'views/projects.html',
controller: 'ProjectController'
})
.otherwise({ redirectTo: '/' });
//this is incase we need to add the #!
$locationProvider.html5Mode(
true);
});
最佳答案
在我最终缩小了需要搜索的范围后，我找到了这个解决方案:
Still getting 'Not Found' when manually refreshing with angular.js route
这与启用 HTML5 模式有关。您需要使用以下代码编辑 .htaccess 文件，以使页面刷新重新路由到您的 index.html 文件:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !^/$
RewriteRule ^.*$ index.html
</IfModule>
这是页面上的最后一个回复(不知道为什么它没有获得更多的赞成票 - 这是经过详尽搜索后唯一有效的方法)。
谢谢大家!
关于javascript - AngularJS 模板重新加载并且页面消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30947164/