我有一个在Laravels公用文件夹中运行的angularjs(版本5)应用程序。 angularjs应该服务于ui前端。 而laravels“仅”路由是后端api访问/api/...
为ui提供服务的数据库。 我怎么都嫁?
我的angularjs应用程序驻留在/public/ui/
所以我目前在laravel中只有一条路线,如下所示:
Route::get('/', function () {
return Redirect::to('/ui/dist');
});
这部分起作用。 它可以像预期的那样在angularjs应用程序中运行。 但是,当我调用anuglarjs路由时,它们将无法显示,因为它们当然在laravel中不存在。 例如,使用angularjs教程:如果我调用/ui/dist/heroes
,它将显示404而不是angularjs应用程序。
注意:Laravels公用文件夹是符号链接到webroot的。
编辑:我重定向到/ui/dist
因为我使用angulars生成器来生成其文件,并且这些也反映在也使用该生成器生成的index.html
。 index.html看起来像这样:
<!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>
这是如何集成laravel和角度路由。
在您的route.php中 ,添加以下路由:
Route::get('{slug}', function () {
return view('index');
}); // this will ensure all routes will serve index.php file
Route::get('/', function () {
return view('index');
});
在laravel视图的index.php中,像通常对角项目一样,添加所有必要的angular js配置和控制器。
注意:对于每个$ http请求url,您必须在laravel路由文件中对其进行定义。
现在,当任何URL被命中时,它将提供index.php文件,然后角度路由将提供正确的文件。
为了使Angular(7+)和Laravel(5.8)的路由系统有效共存,是将Laravel拦截的所有404错误重定向到Angular路由器。
您必须在app/Exceptions/Handler.php
编辑render函数:
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
。
然后,您必须启用在Angular应用程序中启用HashLocationStrategy
,如下所示:
RouterModule.forRoot(routes, {useHash: true})