Angular Routing Pretty URL Error

Angular Routing Pretty URL Error

本文关键字：Error URL Pretty Routing Angular      更新时间：2023-09-26

我正在尝试制作角度路由应用程序。这是我的密码。

<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>

角度脚本。。

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中删除hash（#）标记作为下一步。

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

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

之后，散列标记被删除，但将页面注入模板的操作不起作用。。

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

如何解决此问题？

谢谢。

如果您使用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文件head:中添加一个base标签

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

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

它随附在每个请求中，以便您的应用程序知道如何路由。

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

相关文章：