Nurul Alam Anik Nurul Alam Anik - 4 months ago 24
AngularJS Question

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

Answer

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'
     ]);
}
Comments