启用 $locationProvider.html5Mode(true); 时，Angular 一页站点无法正常工作；答案

【问题标题】：Angular one page site dont work properly when enables $locationProvider.html5Mode(true);启用 $locationProvider.html5Mode(true); 时，Angular 一页站点无法正常工作；
【发布时间】：2014-07-12 00:15:47
【问题描述】：

我在服务器端有一个具有以下路由的应用程序

主路径：/
API 路径：/api/*
部分路径/partials/*

我有一个带有角度的单页应用程序，具有以下路线

app.config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/home', {templateUrl: '/partials/home', controller: 'HomeCtrl'})
      .when('/list', {templateUrl: '/partials/list', controller: 'ListCtrl'})
      .when('/details/:id', {templateUrl: '/partials/details', controller: 'DetailsCtrl'});
    $locationProvider.html5Mode(true);
});

该应用程序运行良好，我可以在主页之间导航，转到列表并查看详细信息。但是如果我将 url（或按 F5）复制到与 '/' 不同的任何 url 中，例如：http://localhost/details/64c6eb79392e，我会得到 404（这是合乎逻辑的，因为服务器端不知道该路由）。

我该如何解决这个问题。

我正在使用 Symfony2 构建我的服务器端应用程序

更新

这是我的.htaccess 文件（我使用的是 symfony 默认值）

DirectoryIndex app.php

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteCond %{REQUEST_URI}::$1 ^(/.+)/(.*)::\2$
    RewriteRule ^(.*) - [E=BASE:%1]
    RewriteCond %{ENV:REDIRECT_STATUS} ^$
    RewriteRule ^app\.php(/(.*)|$) %{ENV:BASE}/$2 [R=301,L]    
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule .? - [L]    
    RewriteRule .? %{ENV:BASE}/app.php [L]
</IfModule>

<IfModule !mod_rewrite.c>
    <IfModule mod_alias.c>        
        RedirectMatch 302 ^/$ /app.php/
    </IfModule>
</IfModule>

【问题讨论】：

使用htaccess 将目录中的所有内容指向服务器上的应用入口点
@charlietfl 存在某种方法可以在不触及 .htaccess 文件的情况下实现这一点，就像 symfony 中的模式一样返回相同的控制器
我不知道 symfony 知道如何覆盖路由。不过要考虑的一件事是您是否希望服务器端回退以用于 SEO 目的
对 SEO 不感兴趣，是一个私人应用程序。不能在路线上使用“#”
我不知道你是否可以在 symfony 中做到这一点，我已经使用其他框架（如 codeigniter）完成了 t，将整个 symfony 放在另一个目录中，只需将 app.php 指向单个控制器那个其他目录。然后我认为您当前拥有的 htaccess 将按原样工作。否则会看看如何让所有路由指向同一个控制器

标签： html angularjs symfony single-page-application

【解决方案1】：

在 Symfony 中创建一个控制器操作，它为任何给定的 url 生成索引模板作为 LAST 路由（因此您的 /api/ 和 /partials/ 仍然可以工作），如下所示：

/**
 * @Route("/{any}", name="any", requirements={"any" = ".*"})
 * @Template("DemoBundle:Index:index.html.twig")
 */
public function anyAction($any)
{
    return array();
}

这将为任何 url 生成索引页面而不会发出 404，由 AngularJS 来路由它

【讨论】：