Conflito de roteamento AngularJS e Laravel 4 no modo HTML5
Gostaria de remover o # hash dos URLs usando o Angularjs '$locationProvider.html5Mode(true)
.
Exemplo: A barra de endereço exibehttp://localhost/shop
ao invés dehttp://localhost/#/shop
.
Tudo funciona bem até eu atualizar uma página. Se eu atualizar, a seguinte rota do Laravel (definida em routes.php) é acessada
Route::resource('shop', 'ShoppingController')
não a rota AngularJS (definida em app.js)
$routeProvider.when('/shop', {
templateUrl: 'templates/shop.html',
controller: 'ShoppingController'
});
Meu Código:
routes.php (rotas do Laravel)
Route::get('/', function() {
return View::make('index');
});
Route::resource('shop', 'ShoppingController');
app.js (rotas do 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);
});
Minha estrutura de diretórios:
Project
/app
/...
/views
-index.php (single page application file)
-routes.php (Laravel routes)
/public
/...
/js
-angular.js
-app.js
-index.php (Laravel index file)
Soluções experimentadas:
Reescreva o arquivo htaccess para que todas as solicitações sejam redirecionadas para index.php (o arquivo de aplicativo de página única, de onde o AngularJS assumiria o roteamento). Problema: Dessa forma, a rota Laravel (Route :: resource ('shop', 'ShoppingController'); - necessária para a interação com o banco de dados) fica inacessível ao serviço http AngularJS $:
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);
});
});
Pergunta, questão: Como resolver o problema de roteamento, para que a rota AngularJS, e não a rota Laravel, seja acessada se eu atualizar localhost / shop?