设置AngularJS HTML5路由

Question

我已经在我的Mac上使用MAMP设置了一个本地版本的AngularJS。我已经使用locationProvider启用了HTML5模式，以便url中不再有#。

为了做到这一点，我添加了:

<base href="http://localhost:8888/AngularJS/app/">

放到index.html页的顶部

这让事情工作…但前提是浏览器中的url完全匹配(例如，正确的大小写和斜杠)。否则，它会重定向到服务器根localhost:8888，但仍然显示AngularJS应用程序，所以这是客户端历史记录的更改，而不是实际的服务器重定向。

我觉得我做错了什么…有没有更好的方法让它工作?

Answer 1

如果你能分享你的angular模块配置文件，让你清楚地看到你的路由是如何设置的，那就更好了。

我建议将您的基本标记与域相关，这使得它与环境无关，并且更安全地部署到新环境<base href="/AngularJS/app/">

服务器应该被配置为优雅地处理掉所需路径的路由。这意味着如果您访问http://localhost:8888/AngularJS/ZZZ，它应该重定向到404页面未找到(毕竟，这是一个坏的路由，正确吗?)。

最后，为了支持用Angular的HTML5模式深度链接到你的应用，你的服务器应该捕捉所有比/AngularJS/app/更深的url环球，并给它们加一个哈希前缀，这样你的服务器路由就不会中断，并把哈希传递给Angular。

具体来说，如果你有一个HTML5路由，比如/AngularJS/app/login或/AngularJS/app/page/1，而用户在浏览器中输入了/AngularJS/app/page/1，你可以让服务器重定向到/AngularJS/app/#/page/1, Angular会识别它的哈希值，并将其转换为HTML5路由(从而支持深度链接，并假设它是Angular中正确配置的路由)。

我正在一个HTML5应用中做同样的事情，但是我们在Angular的路由器中也有[多个]动态的slugs，所以我们的服务器是为那些没有有效路由的场景而配置的，以及那些深度链接超过我们HTML5应用的基本路由的场景。

关于尾随斜杠的问题，你可能不得不从它的声音中找到一个解决方案。htaccess(可能通过在不存在时强制它)。

Answer 2

使用以下虚拟主机文件:

<VirtualHost *:80>
    ServerName my-app
    DocumentRoot /path/to/app
    <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>
</VirtualHost>