Fatal编程技术网
  • javascript/
  • Javascript 直接访问URL时未加载AngularJS ngRoute

Javascript 直接访问URL时未加载AngularJS ngRoute

javascript html angularjs

Javascript 直接访问URL时未加载AngularJS ngRoute,javascript,html,angularjs,ngroute,Javascript,Html,Angularjs,Ngroute,我刚开始使用AngularJS，但对JavaScript、PHP、HTML、CSS等有着广泛的背景。我有一个基本的模板，当你从“/”开始时，一切都很好。但是，如果我尝试加载“/contact”或任何其他页面而不是从“/”开始，我会得到一个404未找到。现在，我了解了其中的基本原因：AngularJS通过AJAX加载基于模板的不同内容，因此页面永远不会更改。问题是：我如何解决这个问题？我不是第一个遇到这个问题的人，但我在谷歌上搜索了一下，没有找到任何帮助 文件：index.html <!DO

我刚开始使用AngularJS，但对JavaScript、PHP、HTML、CSS等有着广泛的背景。我有一个基本的模板，当你从“/”开始时，一切都很好。但是，如果我尝试加载“/contact”或任何其他页面而不是从“/”开始，我会得到一个404未找到。现在，我了解了其中的基本原因：AngularJS通过AJAX加载基于模板的不同内容，因此页面永远不会更改。问题是：我如何解决这个问题？我不是第一个遇到这个问题的人，但我在谷歌上搜索了一下，没有找到任何帮助

文件：index.html

<!DOCTYPE html>
<html ng-app="alertBlaze">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AlertBlaze</title>
    <link href="stylesheet/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheet/app.min.css" rel="stylesheet">
    <base href="/">
</head>
<body ng-controller="mainController">

<nav class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">AlertBlaze</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a href="/platform">Platform</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<div ng-view></div>

<script src="javascript/jquery.min.js"></script>
<script src="javascript/angular.min.js"></script>
<script src="javascript/bootstrap.min.js"></script>
<script src="javascript/app.min.js"></script>

</body>
</html>
感谢您的帮助

谢谢大家!

我认为，$locationProvider.hashPrefix（“”）中存在问题

如果你能去，你就能抓住404，但如果你能去，那就是成功

尝试改变

$locationProvider.hashPrefix('');
到

$locationProvider.hashPrefix('!');
或删除

$locationProvider.html5Mode(true)
然后用#/更改您的路由。好吧，是的，显然问题正是Tara所说的。但是，我想删除cleaner URL的磅号，所以我添加了Apache重写规则，将所有内容重写到index.html：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
添加上述内容作为重写，所有内容都将正常工作

请分享一些代码，这样我们就可以看到可能的问题。我的错！我忘了，你不能只看源代码。更新代码！您的代码看起来很好，似乎工作正常…您是正确的！我发布了一个答案，添加了重写规则。 
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]