Pretty Urls in AngularJs and Laravel not working

Question

I'm developing an application using Laravel and AngularJS. For AngularJS pretty URL , i have set $locationProvider.html5Mode(true) and it's working fine. But suppose my url is http://localhost:8000/demo and if i refresh the page, I'm getting NotFoundHttpException in compiled.php line 7693:

Here is my angular's routes.

function($routeProvider,$locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.
    when('/', {
        templateUrl: 'partials/index.html',
        controller: 'indexController'
    }).
    when('/dom',{
        templateUrl:'partials/dom.html',
        controller:'DomController'
    }).
    when('/demo',{
        templateUrl:'partials/demo.html',
        controller:'DemoController'
    });
}]);

And here's my laravel's route.

Route::get('/', function(){
    return view('index');
});

I'd appreciate a little help. Thanks!

Answer 1

The problem here is that the web server will pick up http://localhost:8000/demo when you refresh the page, and try to handle the request. It's not aware that you wish to use html5 routing. So it will parse the request, say "oh, I should pass this to public/index.php and be done with it". And then public/index.php will receive it and throw an error since the route doesn't exist in Laravel.

What you need to do is to make a catch all type of route in Laravel, and then let Angular's routing take over. You then render your index view on every single request. There's a great answer here on SO on how you do that in Laravel 5: How do I catch exceptions / missing pages in Laravel 5?

This is pseudo code and will not work, just to show an example:

Route::get('*', function() {
    return view('index');
});

So, render the index view on every request and then let Angular handle the routing from there.