You need to make difference between the routes of your Laravel application and routes of your Angular application.
Define a route to display the angular application
// Http/routes.php
Route::get('/{js_route}', function() {
return view('application');
})->where('js_route', '(.*)'); // Allow multiple URI segments
This route allows slashes to make your routing using ngRoute and it should be the last defined in your routes.php.
It will just render the a template that will be used to display your real Angular application.
// views/application.blade.php
<html>
<body>
<div class="container">
<div ng-view></div> <!-- Here will come your partial views -->
</div>
</body>
</html>
Make the real application routing with Angular
Now, use ngRoute to define routes of your application and navigate between them.
// public/js/src/app.js
$routeProvider
.when('/', {
templateUrl: 'Default/index.html', // A simple HTML template
});
// ...
Create API endpoints in Laravel
You will use XHR to retrieve your data from your Laravel application, in your Angular application.
To do this, just define new routes in the corresponding method (i.e. GET, POST), and create the corresponding controllers/actions.
// Http/Controller/FooController.php
class FooController extends \BaseController {
/**
* List all Foo entities in your app
*
* @return Response
*/
public function index()
{
return Response::json(Foo::get());
}
}
// Http/routes.php
Route::get('/api/foo', 'FooController@index')
Create Services/Factories to retrieve your data
// public/js/src/app.js
(function (app) {
function FooService($http, $q) {
this.getFoos = function() {
return $http.get('/api/foo');
};
}
app.service('Foo', FooService);
})(angular.module('yourApp'));
Like this, you can retrieve the data from laravel routes without browse the route directly.
// public/js/src/app.js
function MainCtrl($scope, $http) {
$scope.listFoo = function() {
$http.getFoos()
.then(function(response) {
$scope.foos = response.data;
}, function(error) {
console.log(error);
});
};
}
app.controller('MainController', MainCtrl);
Use your application
Now, you are able to navigate in your application using the javascript routing only, and retrieve data from your backend by using the Laravel routing.
