如何结合 laravel 和 angularjs 路由答案

【问题标题】：how to marry laravel and angularjs routing如何结合 laravel 和 angularjs 路由
【发布时间】：2018-05-17 20:43:16
【问题描述】：

我有一个在 laravel 公共文件夹中运行的 angularjs（版本 5）应用程序。 angularjs 应该服务于 ui aka 前端。而 laravel“唯一”路由是后端 api 访问在/api/... 为 ui 服务的数据（库）。我如何同时结婚？

我的 angularjs 应用程序位于 /public/ui/，所以我目前在 laravel 中只有一条这样的路线：

Route::get('/', function () {
    return Redirect::to('/ui/dist');
});

这部分有效。它像预期的那样在 angularjs 应用程序中工作。但是当我调用 anuglarjs 路由时，它们将无法显示，因为它们当然不存在于 laravel 中。以 angularjs 教程为例：如果我调用/ui/dist/heroes，它将显示 404 而不是 angularjs 应用程序。

注意：Laravel 公用文件夹符号链接到 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>

【问题讨论】：

为什么要在 Angular 应用程序中使用 laravel url？我认为您需要在角度配置中将“/ui/dist/heroes”定义为状态。
不是根据角度教程，我认为它应该这样工作。但它不会起作用，因为 laravel 路由先于 angulars 路由。我想我只需要在 laravel 中生成一个通配符路由。

标签： angularjs laravel laravel-5 angular-ui-router laravel-5.5

【解决方案1】：

以下是集成 laravel 和角度路由的方法。

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

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

现在，当任何 url 被点击时，它将为 index.php 文件提供服务，然后角度路由将提供正确的文件。

【讨论】：

感谢您的回答。你如何用这个来处理有角的建筑？在构建文件名更改时，您将不得不为它调整 laravel 视图，不是吗？这就是我试图阻止的，因此简单地重定向到 dist 文件夹。
文件名更改是什么意思？在您的 index.php 中，您将像往常一样提供角度状态，每个文件都将从 laravel 公共文件夹中提供（映射到角度状态）。
对不起，我可能没听明白。我的角度条目是角度项目的 dist 文件夹中的角度生成器生成的 index.html。 index.html 包含几个 Angular js 文件的脚本标签。这些文件名会随着每次构建而改变，但 index.html 会改变。如果我将这些脚本标签放入 laravel 视图中，我每次构建 angular 时都必须更改文件名。它不适用于自动部署。或者我没有做对。
你能分享一点 index.html 文件代码吗（每次新构建后都改变了什么）？
当然，我编辑了我的问题。我看到几个帖子重定向到一个包罗万象的路线，这将返回一个 laravel 视图。但我认为我的问题是我不能使用 laravel 视图。但这些帖子都是关于旧的 Angular 版本的。

【解决方案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);
}

现在，假设您想使用 Angular 导航到 /auth/login 来显示登录表单。当您点击该路线时，Laravel 将启动，并且无法识别路线然后将控制权传递给异常处理程序。我们在 render() 函数中所做的只是告诉 Laravel 重写 URL 并重定向到 /#/auth/login。

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

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

【讨论】：