angularjslaravelroute-provider

angularjs laravel page refresh gives 404 error


Could you kindly tell me how can fix the issue of 404notfoundexception when I am trying to reload urls that was found using ngRouteProvider? For example..

    $routeProvider.when('/about',{
    templateUrl:'partials/about.php',
    controller: 'pageController'
});

if i click /about from a url, it displays the about page. However when I reload the page, it gives 404 error. I saw i will need to edit my .htaccess file. However I am not entirely sure what code to add.

Here is my current .htaccess file. Notice i tried to add something which did not work.

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews
</IfModule>
#Options +FollowSymLinks
RewriteEngine On

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]


# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

#handle angular route
#RewriteCond %{REQUEST_URI} !index
#RewriteRule (.*) index.html [L]

Laravel Routes :

/****** Api *******/

Route::group([
    'prefix' =>'/api',
     'middleware' => 'web'
    ], function(){

    Route::get('/post/{id?}',[
        'uses'=>'postApiController@getPost',
        'as'=>'apiPost'
        ]); 
    Route::get('/slug/{slug?}',[
        'uses'=>'postApiController@getOnePost',
        'as'=>'apiPostSlug'
        ]); 
    Route::get('/addition/{slug?}',[
        'uses'=>'postApiController@getOnePostAddition',
        'as'=>'apiAdditionSlug'
        ]);

    Route::get('/posts',[
        'uses'=>'postApiController@getAllPost',
        'as'=>'api.allPost'
        ]);
    Route::get('/contacts',[
        'uses'=>'ContactController@getContactList',
        'as'=>'api.getContactList'
        ]);
    Route::get('/nextslug/{id}',[
        'uses'=>'postApiController@getNextRowSlug',
        'as'=>'api.getNextSlug'
    ]);
    Route::post('/mail',[
        'uses'=>'ContactController@postContact',
        'as'=>'api.postContact'
        ]);
    });

/***** Api ends *****/

Route::get('/',[
    'uses'=>'siteController@index',
    'as'=>'index'
]);

Thanks in advance :)

Edit

I added following code on my laravel route:

    /***** Handle missing ****/
Route::get('/pages/{slug?}',function($slug){
    return view('index');
});

Its working well now !! I think that solves it


Solution

  • For all routes in angular you need to route to index action in Laravel.

    So you need to add:

    Route::get('/about',[
       'uses'=>'siteController@index',
       'as'=>'index'
    ]);
    

    All this urls will be redirected to same entrypoint, view renderered by action siteController@index and then angular router will handle routing to right location.

    UPDATE

    You avoid boilerplate you could do something like this:

    foreach(['/', '/about', '/something'] as $route){
        Route::get($route,[
            'uses'=>'siteController@index',
            'as'=>'index'
         ]);
    }