Angular one page site dont work properly when enables $locationProvider.html5Mode(true);

问题

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>

回答1:

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

来源：https://stackoverflow.com/questions/24708352/angular-one-page-site-dont-work-properly-when-enables-locationprovider-html5mod

标签

html5

angularjs

symfony

single-page-application