Laravel 4 + 角路由无限循环答案

【问题标题】：Laravel 4 + Angular Routing Infinite LoopLaravel 4 + 角路由无限循环
【发布时间】：2014-04-27 11:04:37
【问题描述】：

尝试在 Laravel 4 中设置 API 以供 Angular 前端使用。一切都很好，直到我使用 Angular 路由然后我得到一个无限循环。我知道这是 Laravel 的路由和 Angular 之间的冲突，但无法找到解决方法。

这是我设置的 Laravel 路由

<?php

// API ROUTES

Route::group(array('prefix' => 'api/v1'), function() {

Route::resource('pages', 'PagesController',
    array('only' => array('index', 'store', 'destroy')));

});

// CATCH ALL ROUTE

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

这是 Angular 的路由

var laravelCMSRoutes = angular.module('laravelCMSRoutes', []);

laravelCMSRoutes.config(function($routeProvider,$locationProvider) {

  $routeProvider.
    when('/', { templateUrl: '../partials/test.html' }).
    when('pages', { templateUrl: '../partials/test.html' }).
    otherwise({redirectTo: '/'});

  $locationProvider.html5Mode(true);

});

最后是主视图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Test Site</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='assets/css/style.css' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="assets/js/libs/angular/angular-route.min.js"></script>
<script src="assets/js/libs/angular/angular-resource.min.js"></script>
<script src="assets/bower/angular-sanitize/angular-sanitize.min.js"></script>
<script src="assets/bower/showdown/compressed/showdown.js"></script>
<script src="assets/bower/angular-markdown-directive/markdown.js"></script>
<script src="assets/js/routes/routes.js"></script>
<script src="assets/js/controllers/controllers.js"></script>
<script src="assets/js/services/services.js"></script>
<script src="assets/js/filters/filters.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/libs/jquery-ui.min.js"></script>

<base href="/">

</head>

<body ng-app="laravelCMS" ng-controller="MainCtrl" class="dashboard">

<nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Test Site</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class=""><a href="">Pages</a></li>
            <li class=""><a href="">Users</a></li>
            <li class=""><a href="">Settings</a></li>
          <li><a href="logout">Logout</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="message message-success" ng-if="main.message">
        <a href="#" class="message-close pull-right"><i class="fa fa-times"></i></a>
        <div class="container">
        <div class="row">
            <div class="col-md-12">
            <p>Message</p>
        </div>
    </div>
  </div>
</div>

<div ng-view></div>

</body>
</html>

所以我基本上被困在如何让 Laravel 指向我的主视图文件并让 Angular 从那里接管路由。甚至不知道如何解决这个问题，我在网上找到的很少。

【问题讨论】：

请发布相关代码，不要截图。
删除截图并添加实际代码

标签： javascript php angularjs laravel laravel-4

【解决方案1】：

您可能只想捕获所有 GET 请求并提供主视图。

Route::get('{any}', function()
{
    return View::make('index');
})->where('any', '.*');

这条路线应该是您的路线文件中的最后一条路线。

【讨论】：