使用刀片将 Angular5 集成到现有的 Laravel 项目中

Posted 2023-02-23

【中文标题】使用刀片将 Angular5 集成到现有的 Laravel 项目中

【英文标题】：Integrating Angular5 in an existing Laravel project with blade

【发布时间】：2018-11-27 05:23:33

【问题描述】：

我担心在我当前的项目中涉及前端框架的集成问题。

我参与了一个基于 Laravel 的开发项目，其中我使用 Laravel 模板系统 (Blade) 进行视图和前端逻辑。我刚刚意识到，由于任务和客户端逻辑的复杂增量，我真的需要开始使用前端框架。

我真的迷路了，我真的不知道哪里是最好的方法。我只是考虑使用 angular5 来构建新功能。我的意思是，使用 laravel 开发一些服务（REST）并将它们与 angular 一起使用，以使用 angular 组件开发该功能的新视图。 我认为这没有问题。但是，主要问题是，如果我开始在客户端堆栈中使用 Angular 来获取新功能和视图，那么仅使用 laravel 加载的视图与使用 angular 加载的视图之间的转换会如何？我的意思是，两个 url 之间的转换会不会是一个问题，一个用刀片模板渲染，另一个用 angular 加载？

我不知道我是否以最好的方式解释自己。简而言之，我只想在我当前的项目中集成一个前端框架，在这个项目中我使用的是 html+CSS+Vanilla JS，没有任何框架。事实上，我不知道 Angular 是否是我需要的，你能给一些建议吗？

提前致谢！

【参考方案1】：

Angular5 主要是一个前端引擎。这意味着如果您在 index.html 中包含 Angular 捆绑库（和应用程序）javascript 文件。它适用于任何引擎，包括后端引擎 ex。 Laravel。

我之前有 Laravel 和 Angular 应用程序。我所做的是将 Angular 主要用于构建小部件（或组件）。前任。创建更多标签，<app-room [prop]="abc" />。这更像是以一种更好的方式重做 HTML 部分。你不同意吗？

在路由方面，尤其是后端路由，我仍然大量使用 Laravel，因为它具有所有会话控制的路由保护等。你只需要确保它需要 Angular 组件时，它需要从加载的 javascript 库index.html 模板，它可以是父模板或派生模板。

这很容易理解，如果您查看 Angular 5 的生产源代码，您可以看到 index.html 仅尝试加载从 Angular 5 编译的 4-5 个 javascript 文件。（尝试 npm run build 并研究 @987654326 @文件夹之后。）

现在为了同时在这两个系统上开发，最好将它们保存在单独的文件夹中，例如。 laravel 和 angular。因为两者都使用自己的包装系统。连接是 angular 的编译结果应该位于 laravel 的资产文件夹中。如果我们在下面处理 angularJS 1，这会容易得多。但是对于 angular 2 及更高版本，如果您只是复制资产文件夹下的所有内容，将会很混乱。

我认为这并不复杂，但简化流程实际上取决于您想用 Angular 做什么，因为我假设您已经有了使用 laravel 的宏伟计划。

【讨论】：

注意：你应该记住的一件事是 Laravel 带有页面状态，例如。会议。但总的来说，Angular 不会。混合它们时这一点非常重要。

我想我理解了你的评论。我很感激。我真的遇到了很大的麻烦，因为我真的不知道如何混合我当前的项目并将它的角度添加到前端。所以你认为使用 angular 5，我只需要将 angular 库添加到我的 index.html，但我该怎么做呢？是否可以以这种方式在我的项目中加载 Angular 并在我的 html 文件（刀片）中使用它？所以如果我正确地理解它，视图的角度编译应该将它保存在资产目录中，其中我有我的刀片视图？非常感谢您的帮助！

当我说混合时，我并不是真的想让他们坐在同一个文件夹下。相反，您可以继续使用单独的 Laravel 和 Angular5 文件夹。尽你最大的努力让两者分开工作。之后，您可以在 Laravel assets 文件夹下部署 angular5 dist 文件夹