Question

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

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

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
        });

之后删除了哈希标记，但是向模板注入页面不起作用..

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

如何解决此问题？

感谢。

Answer 1

如果您使用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/" />

Answer 2

要使用此功能，您需要一个快速的js后端来提供具有Angular脚本依赖性的基本索引页

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

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

角度路由漂亮URL错误

2 个答案: