Laravel 4 - AngularJS - Routing

Question

I'm trying to biuld an app with L4 and Angular. I'm struggling a bit with routes. I'm using the html5Mode(true) to have nice looking urls. It all works fine as long as I don't reload.

If I reload a page with a url other than /, L4 takes over and tries to send me to the appropriate page. I don't want that. I'd like all pages to be routed to the homepage where angular can take over.

I found a way to redirect all traffic to the home by using this:

Route::get('{all}', function($uri){

    return View::make('home');

})->where('all', '.*');

Only issue is that once I try doing request with angular it sends me back the HTML of the homepage instead of the resource I need.

Any idea how I could solve this problem?

Thanks

Anshad Vattapoyil · Accepted Answer · 2013-09-26 16:32:23Z

I am also making the same and my solution is, make some api routes which is grouped and call this in angular. This route should be placed before your main route.

/*
    API Routes
*/

Route::group(array('prefix' => 'api/v1', 'before' => 'auth.basic'), function()
{
    Route::resource('pages', 'PagesController', array('only' => array('index', 'store', 'show', 'update', 'destroy')));
    Route::resource('users', 'UsersController');
});

Route::get('{all}', function($uri){

    return View::make('home');

})->where('all', '.*');

And access this like api/v1/pages in angular js. If you don't want to authenticate, you can remove 'before' => 'auth.basic'

pagid · Accepted Answer · 2015-12-03 18:38:59Z

I was battling this for a few hours as well and came up with a solution. In my project i am using angular to control the actual view switching. so what i did was to define two separate route groups in L4, one that returns actual pages directly from laravel's routing system and another that returns HTML fragments for angulars routing system.

Here is an example of my routing

//Laravel pages and API routes
Route::get('/', function()
{
    return View::make('hello');
});

Route::get('/register',function(){
    return View::make('registration');
});

//Angular SPA routes(HTML fragments for angulars routing system)
Route::get('/getstarted', function(){
    return View::make('getStarted');
});

Route::get('/terms',function(){
    return View::make('terms');
});

So in this scenario, laravel sends your home page when you call "/", and the ng-view asks for "/getstarted" by ajax which returns your html fragment. Hope this helps :)

aet · Accepted Answer · 2013-09-26 16:16:18Z

-1

What web server software do you use, server side? Apache? Nginx? You must configure your http server to support your push state app. Here is a sample Apache .htaccess that can do this:

# html5 pushState support
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !index
  RewriteRule (.*) index.html [L]
</IfModule>

answered Sep 26, 2013 at 16:16

aet

7,3023 gold badges29 silver badges26 bronze badges

OP already mentioned Laravel, and provided the route declarations used (which render the home page to all incoming traffic). Moreover, this would not solve OP's issue of identifying requests from the Angular and serving data rather than the home page to those.
– tomjakubowski
Commented Oct 13, 2013 at 6:56

Add a comment |

Collectives™ on Stack Overflow

Laravel 4 - AngularJS - Routing

3 Answers 3

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related