Конфликт маршрутизации AngularJS и Laravel 4 в режиме HTML5
Я хотел бы удалить хеш # из URL, используя Angularjs '$locationProvider.html5Mode(true)
.
Пример: в адресной строке отображаетсяhttp://localhost/shop
вместоhttp://localhost/#/shop
.
Все работает хорошо, пока я не обновлю страницу. Если я обновлюсь, следующий Laravel Route (определенный в rout.php) будет принят
Route::resource('shop', 'ShoppingController')
не AngularJS Route (определенный в app.js)
$routeProvider.when('/shop', {
templateUrl: 'templates/shop.html',
controller: 'ShoppingController'
});
Мой код:
маршруты.php (Маршруты Ларавела)
Route::get('/', function() {
return View::make('index');
});
Route::resource('shop', 'ShoppingController');
app.js (AngularJS Routes)
var app = angular.module('shoppingApp',['ngRoute','SharedServices']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/shop', {
templateUrl: 'templates/shop.html',
controller: 'ShoppingController'
});
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
});
Моя структура каталогов:
Project
/app
/...
/views
-index.php (single page application file)
-routes.php (Laravel routes)
/public
/...
/js
-angular.js
-app.js
-index.php (Laravel index file)
Пробные решения:
Перепишите файл htaccess, чтобы все запросы были перенаправлены в index.php (файл одностраничного приложения, откуда AngularJS взял на себя маршрутизацию). Проблема: Таким образом, маршрут Laravel (Route :: resource ('shop', 'ShoppingController'); - необходимый для взаимодействия с базой данных) становится недоступным для службы AngularJS $ http:
app.js
app.controller("ShoppingController", function($scope, $http) {
$http.get('/shop', { cache: true}).
success(function(data, status) {
$scope.items = data
}).
error(function(data, status) {
console.log('Status: ' + status);
});
});
Вопрос: Как я могу решить проблему маршрутизации, чтобы получить доступ к маршруту AngularJS, а не к маршруту Laravel, если я обновлю localhost / shop?