Routing issue with Laravel 4 and AngularJS in html5Mode

Question

I am creating a RESTful application with Laravel 4 as backend and AngularJS as frontend. I want to use routing from Angular.

routes.php in laravel are set up like this (with one group /api, but it is not necessary)

Route::any('{all}', function ($uri) {
    return View::make('index');
})->where('all', '.*');

My routes in Angular are

$routeProvider.
    when('/', {
        templateUrl: 'views/test.html',
        controller: 'homeCtrl'
    }).
    when('/test', {
        templateUrl: 'views/test.html',
        controller: 'homeCtrl'
    }).
    when('/test/:id', {
        templateUrl: 'views/test.html',
        controller: 'homeCtrl'
    }).
    otherwise({
        redirectTo: '/'
    });
 $locationProvider.html5Mode(true);

I defined <base href="/"/> in index.php

And my DocumentRoot in xampp is in DocumentRoot "C:/xampp/htdocs/laravel/public" (so public folder in Laravel)

When I hit localhost/test everything works fine. But when I try access to localhost/test/1, everything is loaded as index.php file from Laravel views as you can see bellow.

Does anyone solve this problem? Should I create regex in routes.php, which will hold every (.js, .jpg, ...) extensions (i think it is not good idea)? Or should I change .htaccess file?

Answer 1

I found a solution in this question and changed missing routes catching in Laravel to this one and everything is fine.

App::missing(function ($exception) {
    return Redirect::to('/#/' . Request::path());
});

The problems were

• Angular in html5Mode need # as a prefix.
• Laravel was returning main page in subroutes including assets as I showed in the question.