直接访问URL时未加载AngularJS ngRoute

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-成功。

尝试改变

$locationProvider.hashPrefix('');

到

$locationProvider.hashPrefix('!');

或删除

$locationProvider.html5Mode(true)

并使用＃/更改路由

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 个解决方案

解决方案1
0 2017-01-26 08:18:46

解决方案2
0 2017-01-26 08:21:40

直接访问URL时未加载AngularJS ngRoute

问题描述

2 个解决方案

解决方案1 0 2017-01-26 08:18:46

解决方案2 0 2017-01-26 08:21:40

解决方案1
0 2017-01-26 08:18:46

解决方案2
0 2017-01-26 08:21:40