CODEWITHSUNDEEP
angularjslaravellaravel-4
Got The Fever Media
Got The Fever Media

Reputation: 760

Laravel 4 - AngularJS - Routing

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

Upvotes: 2

Views: 765

Answers (3)

shanks
shanks

Reputation: 922

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 :)

Upvotes: 0

Anshad Vattapoyil
Anshad Vattapoyil

Reputation: 23483

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'

Upvotes: 2

aet
aet

Reputation: 7292

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>

Upvotes: -1

Related Questions