如何将前端 JS 重构为 Angular 2 以与 PHP MVC 后端完美配合？ [关闭]

Posted 2023-02-24

【中文标题】如何将前端 JS 重构为 Angular 2 以与 PHP MVC 后端完美配合？ [关闭]

【英文标题】：How to refactor frontend JS to Angular 2 to play nicely with PHP MVC backend? [closed]

【发布时间】：2017-04-02 03:55:01

【问题描述】：

我有一个巨大的 php MVC Web 应用程序，它现在用于一些点击事件和模式对话框呈现 jQuery。为了对现代前端技术保持信心，我想重构 javascript 代码以在 Angular 2 下运行。但我的主要问题是：我该怎么做？ Angular 2 不再有控制器，这在我的用例中确实使事情变得复杂。我主要只需要在 JavaScript 端进行一些点击事件订阅和模态对话框处理。大部分 html 在 PHP 后端呈现。

例如，假设我们有一个包含许多新闻条目的新闻站点（路由：index/news）。实际上，这完全是在后端通过从数据库中获取数据、为每个新闻条目加载一个帮助程序并将其输出到视图中来完成的。如果我将它重构为一个组件，那么每个新闻条目都会有大量的 ajax 请求。我相信这不是使用 Angular 2 的首选方式。另外，我真正需要的是按钮等上的一些交互。我认为用按钮和 ngClick 创建一个小的模板字符串也不是 Angular 2 的含义在里面，只是为了让我的按钮上有一个 ngClick。

那么，请告诉我如何以一种很好的方式集成 Angular 2，以便这两种技术能够很好地相互配合。

【参考方案1】：

即使你投了反对票，如果你真的愿意，让我帮助你开始一个伟大的旅程。

---

首先，如果您的视图是在后端生成的：

“大部分 HTML 都在 PHP 后端呈现。”

根据那句话，我想你没有 REST API。 Single Page Application 意味着在浏览器中无需重新加载整个页面。这将是您当前堆栈的问题。 （否则，做 SPA 没有意义）。

所以我建议您停止从后端生成视图并返回原始数据（json 对象）。为此，请阅读一些有关 REST API 的文章。

---

然后，您需要开始学习 Angular2 并了解 SPA 逻辑。 推荐你去官网看看：http://angular.io

---

老实说，这是向前迈出的一大步，我不确定您是否能够使用现有应用程序做到这一点。但是，这肯定很有趣，您可能想在制作/参与其他项目之前了解所有这些内容。

祝你好运

【讨论】：

嗯，是的，主要部分是在后端渲染的。我需要 Angular 2 来处理一些点击事件或类似的事情。那么，Angular 2 是否仅适用于 SPA？我的项目根本不可能做到这一点吗？

我不建议你在这个用例中使用 Angular2。 Angular2 对于“处理一些点击事件”来说太过分了。另外，除非你深入研究 AOT 和 tree shaking，否则你生成的 JS 会非常庞大​​，引导时间会很长，而且第一次绘制需要很多秒。我是 Angular2 的忠实粉丝，但如果它真的很简单，请使用 JQuery（我从没想过我会再推荐它）或者如果您需要 View 和 Model 之间的紧密同步，可以看看 Vue.js（这是更小）。

好的，谢谢。所以，Angular 2 对我来说真的是错误的。 Angular 相对于 jQuery 的最大优势是在初始化时读取 DOM 一次，而不是在每次注册点击处理程序时再次查询 DOM。在 Angular 1 中很容易做到这一点，只需创建一个控制器。但是 Anular 1 不是未来的保存，所以我真的应该使用 Vue.js。我的主要目的是用更少的开销和漂亮的结构获得一个更干净的 javascript。

我没有使用过 Vues.js，但从我阅读的内容和一些开发者反馈来看，我真的认为你应该使用它而不是 angular2 :) 另外，最新版本的 Vue.js 具有超级基准（比 Angular2 更好）并使事情变得非常简单（再一次，据我所知）。祝你好运:)