CODEWITHSUNDEEP
angularjslaravel
easyScript
easyScript

Reputation: 633

Angular and Laravel

How to setup Laravel and Angular.js folder structure on XAMPP. I understand creating an RESTFULL Laravel API.

I have been working on an app, but when I type in the address in the browser something like this "contacts/john" I get a Laravel View.

When I go to "/" then click on some contacts like John, I get correct table and browser address bar shoving "contacts/john", I refresh page and again get Laravel View.

Upvotes: 1

Views: 2024

Answers (2)

martinlabs
martinlabs

Reputation: 1032

Basically this is my routes configuration when working with Angular as my API consumer

// HOME PAGE ===================================  
// we don't need to use Laravel Blade 
// we will return a PHP file that will hold all of our Angular content
// We'll put all of our angular file on the public folder  
Route::get('/', function() {   
    View::make('index'); // will return app/views/index.php 
});

// API ROUTES ==================================  
Route::group(array('prefix' => 'api'), function() 
    Route::resource('comments', 'CommentController', 
        array('only' => array('index', 'store', 'destroy')));

});

// CATCH ALL ROUTE =============================  
// all routes that are not home or api will be redirected to the frontend 
// this allows angular to route them 
App::missing(function($exception) { 
    return View::make('index'); 
});

Since we will put all of our angular code in public folder of the laravel, we also need changes the way laravel get the view.

// app/config/view.php
...

    // make laravel look in public/views for view files
    'paths' => array(__DIR__.'/../../public/views'),

...

Upvotes: -1

sisou
sisou

Reputation: 323

I understand that Angular requests the route from the server via AJAX and then sets the browser's URL bar to the new location via the HTML5 history/pushstate methods?

If so, when you request the URL via a page reload, it gets routed by Laravel. Then, Laravel just serves the view that you have configured via your routes (sometimes plain JSON). Which is what you want, but only for Angular's AJAX calls.

I propose you add an isAJAX filter to your routes. In your filter.php declare this filter:

Route::filter('isAJAX', function()
{
    if (!Request::AJAX()) return Redirect::to('/')->with(array('route' => Request::path()));
});

Then put all your routes that you only want accessible via AJAX into a group. In your routes.php:

Route::group(array('before' => 'isAJAX'), function()
{
    Route::get('contacts/{name}', ContactController@index); // Or however you declared your route

    ... // More routes
});

This way, only Angular's AJAX calls return results from the database. Every manual page reload is routed back to '/' with a variable route set to the requested route. You would then have to pick up this route and initiate Angular's router with it.

Upvotes: 3

Related Questions