如何结合laravel和angularjs路由 [英] how to marry laravel and angularjs routing
问题描述
我有一个运行在 laravel 公共文件夹中的 angularjs(版本 5)应用程序.angularjs 应该服务于 ui aka 前端.而 laravel 的唯一"路由是后端 api 访问在 /api/... 处为 ui 提供服务的数据(base).我如何同时结婚?
I have an angularjs (version 5) app running in laravels public folder.
angularjs should serve the ui aka frontend. whilst laravels "only" route is the backend api access to the data(base) serving the ui at /api/....
How do I marry both?
我的 angularjs 应用程序驻留在 /public/ui/ 中，所以我目前在 laravel 中只有一个路由，如下所示:
My angularjs app resides in /public/ui/ so I currently just have a route in laravel like so:
Route::get('/', function () {
return Redirect::to('/ui/dist');
});
这部分有效.它像预期的那样在 angularjs 应用程序中工作.但是当我调用 anuglarjs 路由时，它们将无法显示，因为它们当然不存在于 laravel 中.以 angularjs 教程为例:如果我调用 /ui/dist/heroes 它将显示 404 而不是 angularjs 应用程序.
This works partially. It works from within the angularjs app like expected. But when I call anuglarjs routes they will fail to display because of course they don't exist in laravel.
Going with the angularjs tutorial for example:
If I call /ui/dist/heroes it will display a 404 instead of the angularjs app.
注意:Laravel 公共文件夹符号链接到 webroot.
Note: Laravels public folder is symlinked to the webroot.
我重定向到 /ui/dist ，因为我使用 angulars builder 来构建它的文件，这些都反映在 index.html 也是用构建器生成的.index.html 看起来像这样:
I redirect to /ui/dist as I use angulars builder to build its files and these are reflected in the index.html also generated with the builder.
The index.html looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ui</title>
<base href="./">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.5cf98968a6d57e778c48.bundle.css" rel="stylesheet"/><!-- the hash changes on every build -->
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.2379cc013d19d70a8003.bundle.js"></script> <!-- the hash changes on every build -->
<script type="text/javascript" src="polyfills.ad37cd45a71cb38eee76.bundle.js"></script> <!-- the hash changes on every build -->
<script type="text/javascript" src="main.99c0191843a51dda5d54.bundle.js"></script> <!-- the hash changes on every build -->
</body>
</html>
推荐答案
为了让 Angular (7+) 和 Laravel (5.8) 的路由系统有效共存，就是将 Laravel 拦截的所有 404 错误重定向到 Angular路由器.
In order to make the routing systems of Angular (7+) and Laravel (5.8) coexist effectively is to redirect all the 404 errors that Laravel intercepts to the Angular router.
你必须在app/Exceptions/Handler.php中编辑render函数:
You have to edit the render function in app/Exceptions/Handler.php:
public function render($request, Exception $e)
{
// handle Angular routes
if ($e instanceof \Symfony\Component\HttpKernel\Exception\NotFoundHttpException) {
$url = parse_url($request->url());
$angular_url = $url['scheme'] . '://' . $url['host'] . '/#' . $url['path'];
return response()->redirectTo($angular_url);
}
return parent::render($request, $e);
}
现在，假设您要使用角度导航到 /auth/login 来显示登录表单.当您点击该路由时，Laravel 将启动，如果不识别该路由，则会将控制权传递给异常处理程序.我们在 render() 函数中所做的只是告诉 Laravel 重写 URL 并重定向到 /#/auth/login.
Now, let's say that you want to show a login form using angular navigating to /auth/login. When you hit that route Laravel will kick in, and not recognising the route will then pass the control to the Exception Handler. What we're doing in the render() function is simply tell Laravel to rewrite the URL and redirect to /#/auth/login.
然后，您必须启用以启用HashLocationStrategy 在您的 Angular 应用程序中，如下所示:
Then, you have to enable to enable HashLocationStrategy in your Angular application, like so:
RouterModule.forRoot(routes, {useHash: true})
这篇关于如何结合laravel和angularjs路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
