Konflikt routingu AngularJS i Laravel 4 w trybie HTML5
Chciałbym usunąć # hash z adresów URL używających Angularjs '$locationProvider.html5Mode(true)
.
Przykład: wyświetla się pasek adresuhttp://localhost/shop
zamiasthttp://localhost/#/shop
.
Wszystko działa dobrze, dopóki nie odświeżę strony. Jeśli odświeżę, pojawi się następująca Laravel Route (zdefiniowana w route.php)
Route::resource('shop', 'ShoppingController')
nie trasa AngularJS (zdefiniowana w app.js)
$routeProvider.when('/shop', {
templateUrl: 'templates/shop.html',
controller: 'ShoppingController'
});
Mój kod:
routes.php (Laravel Routes)
Route::get('/', function() {
return View::make('index');
});
Route::resource('shop', 'ShoppingController');
app.js (Trasy AngularJS)
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);
});
Moja struktura katalogów:
Project
/app
/...
/views
-index.php (single page application file)
-routes.php (Laravel routes)
/public
/...
/js
-angular.js
-app.js
-index.php (Laravel index file)
Wypróbowane rozwiązania:
Przepisz plik htaccess, aby wszystkie żądania były przekierowywane do index.php (plik aplikacji jednostronicowej, skąd AngularJS przejmie routing). Problem: W ten sposób trasa Laravel (Route :: resource („shop”, „ShoppingController”); - konieczna do interakcji z bazą danych) staje się niedostępna dla usługi 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);
});
});
Pytanie: Jak mogę rozwiązać problem z routingiem, aby uzyskać dostęp do trasy AngularJS, a nie do trasy Laravel, jeśli odświeżę localhost / sklep?