Angular 路由漂亮 URL 错误

Question

我正在尝试制作 angular 路由应用程序。这是我的代码。

<html ng-app="LumenApp">
<head>
    <title>LumanAngular v1.0</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/angular-app.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container">
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="row" ng-view>
        </div>  
    </div>
</body>

Angular 脚本..

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

app.config(function($routeProvider) {

$routeProvider
        // route for the home page
        .when('/', {
            templateUrl : 'home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'contact.html',
            controller  : 'contactController'
        });


});


// create the controller and inject Angular's $scope
app.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

app.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

app.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

home.html

<h1>Home Page</h1>
{{message}}

about.html

<h1>About Page</h1>
{{message}}

contact.html

<h1>Contact Page</h1>
{{message}}

没有这个条件，它完美地工作并将 home.html、about.html 和 contact.html 注入模板。

但我想从 url 中删除散列 (#) 标记作为下一个。

我搜索了很多，得到了这样的解决方案，在路由配置函数中添加以下代码。

$locationProvider.html5Mode({
            requireBase: false,
            enabled: true
        });

之后删除了散列标签，但无法将页面注入模板..

为什么会这样。当我删除上面的位置代码时，它工作得很好，正如我已经解释过的那样。

我该如何解决这个问题？

谢谢。

Answer 1

要使用它，您需要一个 express js 后端来为具有 Angular 脚本依赖项的基本索引页面提供服务

它随每个请求一起提供，以便您的应用知道如何路由。

创建一个路由，如果没有发送其他路由，则在每次请求时发送索引。

Answer 2

如果您使用 Apache 服务器来托管您的应用程序，请在您的根文件夹中添加一个 .htaccess 文件：

.htaccess

RewriteEngine on

RewriteBase /restapi/app/ 

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

并在您的 index.html 文件中添加一个 base 标签 head:

<base href="/restapi/app/" />

Angular 路由漂亮 URL 错误

Angular Routing Pretty URL Error

javascript

html

angularjs

angularjs-routing