当启用$ locationProvider.html5Mode（真）角一个页面的网站不正常工作; [英] Angular one page site dont work properly when enables $locationProvider.html5Mode(true);

问题描述

我有在服务器侧

以下路线的应用程序

• 主要路径： /


• API路径： / API / *


• 局部模板路径 /谐音/ *

我有角的单个页面的应用，但有以下的路线

 的app.config（函数（$ routeProvider，$ locationProvider）{
    $ routeProvider
      。当（'/家'，{templateUrl：'/谐音/家，控制器：'HomeCtrl'}）
      。当（'/列表'，{templateUrl：'/谐音/名单，控制器：'的ListCtrl'}）
      。当（'/信息/：身份证'，{templateUrl：'/谐音/详细信息，控制器：'DetailsCtrl'}）;
    $ locationProvider.html5Mode（真）;
}）;
 

该应用程序工作正常，我可以回家之间导航，请列出并查看详细信息。但是，如果我从/例如复制URL（或preSS F5）中的任何网址不同：的http：//本地主机/细节/ 64c6eb79392e 我得到一个404（是合乎逻辑的，因为服务器端不知道这条路线）。

我怎样才能解决这个问题。

我使用的Symfony2为打造我的服务器端应用程序

更新

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

 的DirectoryIndex app.php＆LT; IfModule mod_rewrite.c＆GT;
    RewriteEngine叙述在    的RewriteCond％{REQUEST_URI} :: $ 1 ^（/.+）/（。*）:: \\ $ 2
    重写规则^（。*） -  [E = BASE：％1]
    的RewriteCond％{ENV：REDIRECT_STATUS} ^ $
    重写规则^应用\\的.php（/(.*）| $）％{ENV：BASE} / $ 2 [R = 301，L]
    的RewriteCond％{} REQUEST_FILENAME -f
    重写规则？ -  [L]
    重写规则？ ％{ENV：BASE} /app.php [L]
＆LT; / IfModule＆GT;＆LT;！IfModule mod_rewrite.c＆GT;
    ＆LT; IfModule mod_alias.c＆GT;
        RedirectMatch 302 ^ / $ /app.php/
    ＆LT; / IfModule＆GT;
＆LT; / IfModule＆GT;
 

解决方案

创建Symfony的控制器操作产生任何给定的URL作为最后途径指数模板（所以你的/ API /和/谐音/仍然会工作）是这样的：

  / **
 * @Route（/ {}任何NAME =任何，要求= {的=。*}）
 * @Template（DemoBundle：索引：index.html.twig）
 * /
公共职能anyAction（$任意）
{
    返回阵列（）;
}
 

这将产生任何网址索引页没有issueing 404，这将是高达AngularJS路由它

I have an application with the following routes on the server side

• Main path: /
• Api path: /api/*
• Partials path /partials/*

I have a single page application with angular, with the following routes

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

The app works fine I can navigate between home, go to list and view details. but if i copy the url (or press F5) in any url different from '/' example: http://localhost/details/64c6eb79392e i get an 404 (Is logical since the server side does not know about that route).

How i can solve this.

I'm using Symfony2 for build my server side application

Update

this is my .htaccess file (I'm using the symfony defaults)

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>

解决方案

Create a controller action in Symfony which generates index template for any given url as the LAST route (so your /api/ and /partials/ would still work), something like this:

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

This will generate the index page for any url without issueing 404, and it will be up to AngularJS to route it

这篇关于当启用$ locationProvider.html5Mode（真）角一个页面的网站不正常工作;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！