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

问题描述

我想使用 Angularjs 的 $locationProvider.html5Mode(true) 从 URL 中删除 # 哈希.

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

示例:地址栏显示 http://localhost/shop 而不是 http://localhost/#/shop.

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

一切正常，直到我刷新页面.如果我刷新，则访问以下 Laravel 路由(在 routes.php 中定义)

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

我的代码:

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

我的目录结构:

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 将从这里接管路由).问题:通过这种方式，AngularJS $http 服务无法访问 Laravel 路由(Route::resource('shop', 'ShoppingController'); - 与数据库交互所必需的):

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

问题:如何解决路由问题，以便在刷新 localhost/shop 时访问 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 的路由使用 .otherwise 来处理未找到的页面.

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

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