Trying to set up an API in Laravel 4 for an Angular front end to consume. Everything is fine until I use Angular routing and then I get an infinite loop. I know this is a conflict between Laravel's routing and Angular but can't figure out a way to solve it.
Here are the Laravel routes I've set up
<?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');
});
Here is Angular's routing
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);
});
and finally here is the main view
<!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>
So I'm basically stuck on how to get Laravel to point to my main view file and let Angular take over routing from there. Not sure how to even approach this, I'm finding very little online about this.
You'll probably only want to catch all GET requests and serve the main view.
Route::get('{any}', function()
{
return View::make('index');
})->where('any', '.*');
This route should be the VERY LAST route in your routes file.