Question

我自己在学习AngularJs。现在我被$locationProvider.html5Mode(true);困住了。

在app.js文件中，我使用了此代码。

angular.module('ContactsApp', ['ngRoute'])
        .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
                $routeProvider
                        .when('/contacts', {
                            controller: 'ListController',
                            templateUrl: 'views/list.html'
                        })

                $locationProvider.html5Mode(true);

            }]);

在我的窗口计算机上，我使用此代码创建了虚拟主机。

<VirtualHost *:80>
    ServerName contacts.local
    ServerAlias contacts.local
    ServerAdmin webmaster@localhost
    DocumentRoot D:/xampp/htdocs/angularJs/contacts/public
    DirectoryIndex index.php index.html index.htm
    <Directory "D:/xampp/htdocs/angularJs/contacts/public">
                Order allow,deny
                Allow from all
                Require all granted
    </Directory>
</VirtualHost>

现在的问题是，当我尝试打开重定向到http://contacts.local/#/contacts的{{1}}时。这工作正常。

但如果我尝试打开http://contacts.local/contacts它会显示错误 500内部服务器错误。

请指导我做错的地方。提前致谢。

Answer 1

AngularJS $ locationProvider.html5mode（true）要求服务器端重写到根URL以允许状态链接。您正在尝试直接访问路由，因此没有使用任何角度框架，因此500错误。

任何与配置路线不匹配的路线都应该重写以点击您的根网址（即index.html）。

例如，您正在使用Apache，因此要重写请求，您可以使用：

<Directory /path/to/app>
    RewriteEngine on

    # 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]
</Directory>

请参阅常见问题解答https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

Answer 2

您应在服务器上编写路由，以便每个与所有其他路由不匹配的请求都将返回您的基本视图（例如index.html）。休息路由将通过角度完成。详细解释：

当路由http://contacts.local/#/contacts时，如果没有与服务器进行交互，则http://contacts.local/contacts已改为html5 history api

直接转到http://contacts.local/contacts时，已向未找到的服务器路由/contacts发出请求

关于angularJs $ locationProvider.html5Mode（true）的问题;

2 个答案: