如何与laravel和angularjs路由结合 [英] how to marry laravel and angularjs routing
问题描述
我有一个在Laravels公用文件夹中运行的angularjs(第5版)应用程序.angularjs应该服务于ui前端.而laravels唯一"路由是后端api访问位于/api/...处的用于ui的数据库.我要怎么娶?
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.
注意:Laravels公用文件夹已符号链接到webroot.
Note: Laravels public folder is symlinked to the webroot.
当我使用angulars构建器构建其文件时，我重定向到/ui/dist ，这些文件也反映在该构建器生成的 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 中编辑渲染功能:
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屋！
