Laravel 4 and AngularJS - clean URL's with routing

Question

I'm new to AngularJS and having a hard time getting it to work smoothly with Laravel. I am trying to create a back-end application for a website and want the routes prefixed with '/admin' to all be managed by AngularJS without the hash in the URL.

Laravel's Back-end

Routes

Route::group(['prefix' => 'admin'], function()
{
    Route::get('/', function() {
        return View::make('backend/dashboard');
    });
});

View - dashboard.blade.php

<!doctype html>
<html ng-app="glenn">
<head>
    <title>Laravel and Angular Together</title>
    <meta charset="utf-8">

    <base href="/admin">

    <script src="vendor/angular.js"></script>
    <script src="vendor/angular-route.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
    <h1>Dashboard</h1>
    <div class="container">
        <ng-view></ng-view>
    </div>
</body>
</html>

AngularJS Front-end

app.js

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

glenn.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/test', {
            templateUrl: 'test.html',
            controller: 'TestController'
        })
        .otherwise({
            redirectTo: '/'
        });

    $locationProvider.html5Mode(true);
});

glenn.controller('TestController', function($scope) {

});

Problem: when I direct the browsers url to admin/test, then I receive Laravel's NotFoundHttpException because Laravel is trying to take over the routes that I want Angular to take care of...how can I fix this? Thanks

Verron Knowles · Accepted Answer · 2014-06-08 05:42:14Z

1

Since angular will be handling all the routing for admin (and you won't be specifying any further routing in Laravel), you can probably do without the prefix.

Try:

Route::get('admin{angular}', function () {
    return View::make('backend/dashboard');
})->where('angular', '.*');

Instead of:

Route::group(['prefix' => 'admin'], function()
{
    Route::get('/', function() {
        return View::make('backend/dashboard');
    });
});

This should catch all routes that begin with admin, which is what I believe you want.

answered Jun 8, 2014 at 5:42

Verron Knowles

9739 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ed B · Accepted Answer · 2014-07-14 08:19:49Z

1

On a related note:

If you were creating an Angular + Laravel web app where you wanted all routing to be handled by AngularJS you can specify a 'catch-all' route within Laravel to avoid the NotFoundHttpException error:

App::missing(function($exception)
{
    return View::make('backend/dashboard'); // this should match your index route
});

answered Jul 14, 2014 at 8:19

Ed B

8591 gold badge7 silver badges25 bronze badges

Collectives™ on Stack Overflow

Laravel 4 and AngularJS - clean URL's with routing

Laravel's Back-end

AngularJS Front-end

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Laravel's Back-end

AngularJS Front-end

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related