Question

我刚刚开始使用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>

文件：app.min.js

var alertBlaze = angular.module('alertBlaze', ['ngRoute']);

alertBlaze.config(['$locationProvider', function($locationProvider) {
    $locationProvider.hashPrefix('');
}]);

alertBlaze.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'mainController'
    })
    .when('/platform', {
        templateUrl : 'pages/platform.html',
        controller  : 'platformController'
    })
    .when('/about', {
        templateUrl : 'pages/about.html',
        controller  : 'aboutController'
    })
    .when('/contact', {
        templateUrl : 'pages/contact.html',
        controller  : 'contactController'
    })
    .otherwise({
        redirectTo : '/'
    });
    $locationProvider.html5Mode(true)
});

alertBlaze.controller('mainController', function($scope) {

});

alertBlaze.controller('platformController', function($scope) {

});

alertBlaze.controller('aboutController', function($scope) {

});

alertBlaze.controller('contactController', function($scope) {

});

感谢任何帮助。

谢谢！

Answer 1

我认为 $ locationProvider.hashPrefix（''）;

中的问题

如果你可以去http://alertblaze.com/contact，那么你会抓到404，但是如果你可以去http://alertblaze.com/#/contact - 它就会成功。

尝试改变

<audio controls="true"><source src="https://WWW.MYWEBSITE.COM/learning-base/draftfile.php/5/user/draft/119880121/test.mp3">https://WWW.MYWEBSITE.COM/learning-base/draftfile.php/5/user/draft/119880121/test.mp3</audio>

到

$locationProvider.hashPrefix('');

或删除

$locationProvider.hashPrefix('!');

并使用＃/

更改路由

Answer 2

好的，所以是的，显然这个问题正是Tara所说的那样，但我希望删除英镑符号以获得更清晰的URL，所以我添加了Apache Rewrite Rules来重写所有内容到index.html：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]

将上面的内容添加为重写，一切正常！

直接访问URL时，AngularJS ngRoute无法加载

2 个答案: