AngularJS前端（带有路由），结合Laravel API作为后端

Question

因此，我一直在过去7天左右的时间里为我的问题找到解决方案。 我几乎已经放弃了这个，所以这是我解决这个问题的最后尝试。

我正在尝试建立一个配方站点，该站点从Laravel API后端获取配方（即api / recipes返回MySQL数据库中的所有配方）。 到目前为止，数据是通过$ http服务从AngularJS前端请求的。

这样的单页应用程序不是问题，因为我已经在Laravel中定义了这样的路由。 所有未发送到RESTful API的HTTP请求都将重定向到我的索引视图，我希望AngularJS从那里接管路由。

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

我希望用户能够编辑现有配方，创建新配方等。因此，我已经在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: '/'
      });
  }
]);

不幸的是，即使使用Angular中的这种路由，我似乎也无法使它正常工作。 我已经看到通过解耦应用程序和类似的东西来解决类似的问题，并且我尝试通过在端口8888上运行Angular前端和在端口8000上运行Laravel后端来尝试类似的方法，但是后来我遇到了CORS问题。

我渴望使它起作用，但是似乎无法弄清楚如何使其起作用。 似乎浏览器忽略了Angular路由，仅使用Laravel路由，这意味着我只能访问索引视图或API。 我该如何解决？

Answer 1

我不建议您像这样构建混合应用程序。 您应该将Laravel API后端与AngularJS前端分开。 然后，您可以在AngularJS中设置服务以调用您的API。 API驱动的开发是必经之路。

如果您在CORS方面遇到问题，则可以修改Laravel响应中的标头以解决此问题。 要解决每Laravel路由问题，你可以在你的顶部添加以下地方routes.php的文件：

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

或者（如果您想为所有路由更好的解决方案），将它添加到你的after过滤器filters.php ：

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

或者，您可以设置一个单独的过滤器：

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

现在，回答您的问题...

在index文件的开头（对于Angular），添加<base href="/"> ，还添加$locationProvider.html5Mode(true); 在您的Angular配置中; 您可以将其放在$routeProvider.when('/', { ... }); 功能。