Menu
I am working on web application developed on laravel (latest version 5.*).I did a lot of search but not find exact solution for,how to use angular js routing with laravel routing.
Suppose urls like :
I want to fetch the data according to the parameters using angular js.The problem is that laravel having its own in-built routing (routes.php in /app/Http) and angular js routes using (ngRoute module).
496
You need to make difference between the routes of your Laravel application and routes of your 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>
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
});
// ...
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')
// 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);
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.
94
How I make it:
In my routes.php
/**
* Redirects any other unregistered routes back to the main
* angular template so angular can deal with them
*
* @Get( "{path?}", as="catch.all" )
* @Where({"path": "^((?!api).)*$"})
*
* @return Response
*/
Route::any('{path?}', function () {
View::addExtension('html', 'php');
return View::make('index');
})->where("path", "^((?!api).)*$");
/*
|--------------------------------------------------------------------------
| API routes
|--------------------------------------------------------------------------
*/
Route::group([
'prefix' => 'api'
], function () {
//here are my api calls
});
I have created one index.html in my resources/view where is my base.
You can put your js and css files in resources/assets or in public folder.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
