我正在开发在laravel(最新版本5.*(上开发的Web应用程序。我做了很多搜索，但没有找到确切的解决方案，如何将角度js路由与laravel路由一起使用。
假设网址如下：
- /viewItem/2 /
- 编辑项/5
- 等，任何有参数的网址
我想使用角度 js 根据参数获取数据。问题在于 laravel 在/app/Http 中有自己的内置路由(routes.php(和使用角度 js 路由(ngRoute 模块(。
- 如果两个路由都用于共轭，确切的流程是什么？
- 如果要避免在需要从后端获取数据的每个页面上使用创建对象来获取数据，如何实现它？例如$obj->getItem($id(
- 在哪里放置角度js路由？
您需要区分Laravel应用程序的路由和Angular应用程序的路由。
定义显示角度应用程序的路由
// Http/routes.php
Route::get('/{js_route}', function() {
return view('application');
})->where('js_route', '(.*)'); // Allow multiple URI segments
此路由允许斜杠使用 ngRoute 进行路由，它应该是routes.php中定义的最后一个路由。
它只会渲染一个模板，该模板将用于显示您的真实 Angular 应用程序。
// views/application.blade.php
<html>
<body>
<div class="container">
<div ng-view></div> <!-- Here will come your partial views -->
</div>
</body>
</html>
使用 Angular 进行真正的应用程序路由
现在，使用 ngRoute 定义应用程序的路由并在它们之间导航。
// public/js/src/app.js
$routeProvider
.when('/', {
templateUrl: 'Default/index.html', // A simple HTML template
});
// ...
在 Laravel 中创建 API 端点
您将使用 XHR 从 Angular 应用程序中的 Laravel 应用程序中检索数据。
为此，只需在相应的方法(即 GET、POST(中定义新路由，并创建相应的控制器/操作。
// 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'));
像这样，您可以从 laravel 路线中检索数据，而无需直接浏览路线。 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);
使用您的应用程序
现在，您可以仅使用 javascript 路由在应用程序中导航，并使用 Laravel 路由从后端检索数据。
我是如何做到的：
在我的路线上.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
});
我创建了一个索引.html在我的resources/view中，我的基地在哪里。您可以将 js 和 css 文件放在resources/assets或public文件夹中。
这些技术是不同的。角度路由是为单页应用程序 (https://en.wikipedia.org/wiki/Single-page_application( 构建的。Laravel路由服务于多个页面。
但是，如果你想要一个单页应用程序，你应该使用Laravel路由/控制器来提供应用程序页面。
还可以使用 (https://laravel.com/docs/5.2/controllers#restful-resource-controllers( Laravel资源控制器在 JS 应用和后端之间共享数据。
但你不能混合Laravel和Angular路线。