Laravel 4 +角度路由无限循环

时间:2014-03-20 14:18:15

标签: javascript php angularjs laravel laravel-4

尝试在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从那里接管路由。不知道如何处理这个问题,我在网上找不到这个。

1 个答案:

答案 0 :(得分:0)

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

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

此路线应该是路线档案中非常最近的路线。