如何与laravel和angularjs路由结合

问题描述 投票:1回答:2

我有一个在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>
angularjs laravel laravel-5 angular-ui-router laravel-5.5
2个回答
0
投票

这是如何集成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文件,然后角度路由将提供正确的文件。


0
投票

为了使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})
© www.soinside.com 2019 - 2024. All rights reserved.