在HTML5模式AngularJS和Laravel 4路由冲突 [英] AngularJS and Laravel 4 routing conflict in HTML5 mode

问题描述

我想从使用Angularjs' $ locationProvider.html5Mode（真）网​​址删除＃哈希值。

I would like to remove the # hash from URLs using Angularjs' $locationProvider.html5Mode(true).

例：地址栏显示的http：//本地主机/店铺而不是的http：//本地主机/＃/商店。

Example: The address bar displays http://localhost/shop instead of http://localhost/#/shop.

一切都工作得很好，直到我刷新页面。如果我刷新，下面Laravel路由（在routes.php文件中定义）accesed

Everything works well untill I refresh a page. If i refresh, the following Laravel Route (defined in routes.php) is accesed

Route::resource('shop', 'ShoppingController')

不是AngularJS路线（在app.js中定义）

not the AngularJS Route (defined in app.js)

$routeProvider.when('/shop', { 
    templateUrl: 'templates/shop.html', 
    controller: 'ShoppingController' 
});

我的code：

routes.php文件（Laravel路由）

routes.php (Laravel Routes)

Route::get('/', function() {
    return View::make('index'); 
});
Route::resource('shop', 'ShoppingController'); 

app.js（AngularJS路线）

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

我的目录结构：

My directory structure:

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路线（路线::资源（'店'，'ShoppingController'）; - 所需的与数据库交互）变得不可访问到AngularJS $ http服务：

Rewrite the htaccess file so that all requests are redirected to index.php (the single page application file, from where AngularJS would take over the routing). Problem: In this way the Laravel route (Route::resource('shop', 'ShoppingController'); - necessary for interaction with the database) becomes inaccessible to the AngularJS $http service:

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路由被访问的，如果我刷新本地主机/店铺？

Question: How can I solve the routing problem, so that the AngularJS route, not the Laravel Route gets accessed if I refresh localhost/shop?

推荐答案

从我读，好像Laravel正在读修正路线，当你刷新页面。在这种情况下，你应该Laravel继续使原来的观点，即使它本来是一个404重定向。

From what I read, it seems like Laravel is reading the modified route when you refresh the page. In this case, you should make Laravel continue to make the original view even if it would otherwise be a 404 redirect.

尝试添加的Laravel方某处以下（例routes.php文件）

Try adding the following somewhere on the Laravel side (Ex. routes.php)

App::missing(function($exception)
{
    return View::make('index');
});

注意：您可能希望有AngularJS的路由使用。否则，以处理未找到网页

Note: You might want to have AngularJS's routing use .otherwise to handle pages that are not found.

这篇关于在HTML5模式AngularJS和Laravel 4路由冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！