AngularJS前端（與路由）與Laravel API作爲後端

所以我一直試圖在過去的7天左右找到我的問題的解決方案相結合。我幾乎放棄了這個，所以這是我最後一次解決這個問題的嘗試。AngularJS前端（與路由）與Laravel API作爲後端

我試圖建立一個食譜網站，從我的Laravel API後端（即API /食譜返回在MySQL數據庫所有的食譜）獲取的食譜。這些數據是通過$ http-service從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'); 
});

我希望用戶能夠編輯現有配方，創造新的等。因此我在角創建這些路線：

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。我應該如何解決這個問題？

來源

2014-10-30 user2624679

請詳細說明您的問題。我無法弄清楚 – 2014-10-30 10:28:37

感謝Patrick的反饋。我只編輯了最後一部分，試圖讓問題更加明顯！ – user2624679 2014-10-30 11:17:28

我不確定你爲什麼試圖在你的Laravel項目中包含你的Angular客戶端。我會讓他們兩個單獨的項目 – 2014-10-30 11:22:26

構建像這樣的混合應用程序是我不推薦的。您應該將您的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', '*');

或者，你可以設置一個單獨的過濾器：

現在回答你的問題...

在您的index文件（適用於Angular）的頭部，添加<base href="/">，並在您的Angular配置中添加$locationProvider.html5Mode(true);;你可以把它放在你的$routeProvider.when('/', { ... });函數之後。

來源

2014-12-19 18:48:18 chipit24

AngularJS前端（與路由）與Laravel API作爲後端

回答

相關問題