Question

我有一个在laravels公共文件夹中运行的angularjs（版本5）应用程序。 angularjs应该服务于ui aka前端。 laravels“only”route是后端api访问服务于/api/...的ui的数据（base）。我如何与两人结婚？

我的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>

Answer 1

以下是如何集成laravel和angular routing。

在 routes.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 中，添加所有必要的角度js配置和控制器，就像通常使用角度项目一样。

注意：对于每个$ http请求网址，您必须在laravel路由文件中定义它。

现在，当任何url被命中时，它将提供index.php文件，然后angular routing将提供正确的文件。

Answer 2

为了使Angular（7+）和Laravel（5.8）的路由系统有效共存，是将Laravel拦截的所有404错误重定向到Angular路由器。

您必须在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。

然后，您必须在Angular应用程序中启用enable HashLocationStrategy，如下所示：

RouterModule.forRoot(routes, {useHash: true})

如何结合laravel和angularjs路由

2 个答案: