angularjs laravel page refresh gives 404 error - angularjs

Question

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 1

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

Answer 2

You can add the following code in web.php after all routes.
Route::get('/{any}', function () {
return view('welcome');})->where('any', '.*');
The welcome is the main view file (view file - resources/views/welcome.blade.php) in Laravel.
This may help someone.