AngularJS frontend (with routing) combined with a Laravel API as the backend

Question

So I've been trying to find a solution for my problem during the last 7 days or so. I have almost given up on this so this is my last attempt at solving this.

I'm trying to build a recipe site which fetches the recipes from my Laravel API Backend (i.e. api/recipes returns all recipes in the MySQL-database). The data is requested from the AngularJS frontend via the $http-service, so far so good.

Single page applications like this isn't a problem since I've defined the routes in Laravel like this. All HTTP reqs who isn't sent to the RESTful API is redirect to my index-view where I want AngularJS to take over the routing from there on.

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

Route::group(array('prefix' => 'api'), function() {
  Route::resource('recipes', 'RecipeController',
        array('except' => array('create', 'edit', 'update')));
  Route::resource('ingredients', 'IngredientController',
    array('except' => array('create', 'edit', 'update')));
  Route::resource('nutrients', 'NutrientController',
    array('except' => array('create', 'edit', 'update')));

  Route::resource('IngredientsByRecipe', 'IngredientsByRecipeController');
});

App::missing(function($exception)
{
    return View::make('index');
});

I want the user to be able to edit existing recipes, create new ones etc. Therefore I've created these routes in Angular:

var recipeApp = angular.module('recipeApp', [
  'ngRoute',
]);

recipeApp.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'list.html',
        controller: 'MainCtrl'
      })
      .when('/edit/:recipeId', {
        templateUrl: 'detail.html',
        controller: 'EditCtrl'
      })
      .when('/new', {
        templateUrl: 'detail.html',
        controller: 'CreateCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }
]);

Unfortunately I can't seem to get this to work even with this routing in Angular. I've seen similar problems being solved by decoupling the app and stuff like that, and I've tried something like that by running my Angular frontend at port 8888 and the Laravel backend at port 8000 but then I got a problem with CORS.

I'm eager to get this to work but can't seem to figure out how to get it to work. It seems like the browser ignores the Angular routing and only uses the Laravel routing, which means that I can only access the index view or the API. How should I solve this?

Please elaborate what your problem is. I can't figure it out — Patrick Reck
– Patrick Reck, Commented Oct 30, 2014 at 10:28
Thanks for the feedback Patrick. I just edited the last part to try and make the problem more obvious! — user2624679
– user2624679, Commented Oct 30, 2014 at 11:17
I am not really sure why you are trying to include your Angular client in your Laravel project. I would make them two separate projects — Patrick Reck
– Patrick Reck, Commented Oct 30, 2014 at 11:22
If you host it on the same domain it shouldn't be a problem. If not, I've had success with the following: gist.github.com/anonymous/ea89706a2b00217151e3 — Patrick Reck
– Patrick Reck, Commented Oct 30, 2014 at 11:34

chipit24 · Accepted Answer · 2014-12-19 18:48:18Z

Building hybrid apps like this is something I would not recommend. You should separate your Laravel API backend from your AngularJS frontend. You can then set up services in AngularJS to call your API. API driven development is the way to go.

If you have problems with CORS, you can modify the headers in your Laravel responses to fix this. To fix the problem with every Laravel route, you can add the following somewhere at the top of your routes.php file:

header('Access-Control-Allow-Origin: *');

Or (better solution if you want it for all routes), add this to your after filter in filters.php:

$response->headers->set('Access-Control-Allow-Origin', '*');

Or you can set up a separate filter:

Route::filter('allowOrigin', function($route, $request, $response) {
    $response->header('Access-Control-Allow-Origin', '*');
});

Now, to answer your question ...

In the head of your index file (for Angular), add <base href="/">, and also add $locationProvider.html5Mode(true); inside your Angular config; you can just place it after your $routeProvider.when('/', { ... }); function.

Collectives™ on Stack Overflow

AngularJS frontend (with routing) combined with a Laravel API as the backend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related