启用$locationProvider.html5Mode(true)时,Angular单页站点无法正常工作;
我在服务器端有一个具有以下路由的应用程序启用$locationProvider.html5Mode(true)时,Angular单页站点无法正常工作;,html,angularjs,symfony,single-page-application,Html,Angularjs,Symfony,Single Page Application,我在服务器端有一个具有以下路由的应用程序 主路径:/ Api路径:/Api/* 部分路径/Partials/* 我有一个带有angular的单页应用程序,具有以下路径 app.config(function($routeProvider, $locationProvider) { $routeProvider .when('/home', {templateUrl: '/partials/home', controller: 'HomeCtrl'}) .whe
- 主路径:
/
- 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中复制url(或按F5键),示例:http://localhost/details/64c6eb79392e
我得到了一个404(这是合乎逻辑的,因为服务器端不知道该路由)
我怎样才能解决这个问题
我正在使用Symfony2构建我的服务器端应用程序
更新
这是我的.htaccess
文件(我使用的是symfony默认值)
DirectoryIndex app.php
重新启动发动机
RewriteCond%{REQUEST_URI}:$1^(/.+)/(.*):\2$
重写规则^(.*)-[E=基:%1]
RewriteCond%{ENV:REDIRECT_STATUS}^$
重写规则^app\.php(/(.*)|$)%{ENV:BASE}/$2[R=301,L]
RewriteCond%{REQUEST_FILENAME}-f
重写规则[L]
重写规则.?%{ENV:BASE}/app.php[L]
重定向匹配302^/$/app.php/
在Symfony中创建一个控制器操作,该操作将为任何给定url生成索引模板作为最后一个路由(因此/api/和/partials/仍然有效),如下所示:
/**
* @Route("/{any}", name="any", requirements={"any" = ".*"})
* @Template("DemoBundle:Index:index.html.twig")
*/
public function anyAction($any)
{
return array();
}
这将为任何url生成索引页,而不发出404,由AngularJS来路由它使用
htaccess
将目录中的所有内容指向您的应用程序入口点server@charlietfl存在一些方法来实现这一点,而无需触摸.htaccess文件,就像symfony中的模式一样,返回相同的控制器。我不知道symfony如何跨越路由。还有一件事要考虑的是,你是否希望服务器端回退SEO目的不感兴趣的SEO,是一个私人应用程序。它不是在Routes上使用“#”,我不知道你是否可以在symfony中使用它,我已经使用了其他框架,比如codeigniter,将整个symfony放在另一个目录中,只需将app.php
指向另一个目录中的单个控制器。那么我认为你目前拥有的htaccess可以正常工作。否则,我们将研究如何使所有路由指向同一控制器
/**
* @Route("/{any}", name="any", requirements={"any" = ".*"})
* @Template("DemoBundle:Index:index.html.twig")
*/
public function anyAction($any)
{
return array();
}