如何将 Angular js 路由与 laravel/lumen 路由一起使用？
Posted
技术标签:
【中文标题】如何将 Angular js 路由与 laravel/lumen 路由一起使用？【英文标题】：How to use angular js routing with laravel/lumen routing? 【发布时间】：2016-05-26 03:15:39 【问题描述】：我正在开发在 laravel（最新版本 5.*）上开发的 web 应用程序。我做了很多搜索，但没有找到确切的解决方案，如何将 angular js 路由与 laravel 路由结合使用。
假设网址像：
/viewItem/2 /editItem/5 等等，任何有参数的url我想使用angular js根据参数获取数据。问题是laravel有自己的内置路由（/app/Http中的routes.php）和使用（ngRoute模块）的angular js路由。
如果两个路由同时使用，具体流程是什么？ 如果想避免在需要后端数据的每个页面上创建对象来获取数据，如何实现？ eg.$obj->getItem($id) Angular js 路由放置在哪里？【问题讨论】：
【参考方案1】：这些技术是不同的。 Angular Routing 是为单页应用程序 (https://en.wikipedia.org/wiki/Single-page_application) 构建的。 Laravel 路由服务多个页面。
但是，如果你想要一个单页应用程序，你应该使用 Laravel 路由/控制器来给应用程序页面。
您还可以使用 (https://laravel.com/docs/5.2/controllers#restful-resource-controllers) Laravel 资源控制器 在您的 JS 应用和后端之间共享数据。
但你不能混合使用 Laravel 和 Angular 路由。
【讨论】：
【参考方案2】：您需要区分 Laravel 应用程序的路由和 Angular 应用程序的路由。
定义一个路由来显示 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 端点
您将在 Angular 应用程序中使用 XHR 从 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 路由从后端检索数据。
【讨论】：
【参考方案3】：我是如何做到的： 在我的 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
);
我在resources/view 中创建了一个 index.html，这是我的基地。
您可以将 js 和 css 文件放在 resources/assets 或 public 文件夹中。
【讨论】：
我要导入哪个视图类？以上是关于如何将 Angular js 路由与 laravel/lumen 路由一起使用？的主要内容，如果未能解决你的问题，请参考以下文章
请求新页面时如何将 AngularJS 路由与 Express (Node.js) 一起使用？