如何通过PHP MVC后端将数据概念性地提供给现代SPA前端？

Question

我不确定，从概念上来说，什么是从php mvc后端向前端提供数据的正确方式。

基本上，我对angularjs中的东西很满意:在DOM中放入一些控制器，以及一些事件的指令，如单击、if条件等。然而，时代不同了，我们必须继续前进。

所以我的问题是:我有一个巨大的PHP MVC后端和一个模板引擎。我想保持原地不动，因为只向前端提供json会将视图从MVC中完全移除。

也许作为json提供一些内部视图是可以的。但我需要的HTML结构，以服务和PHP预渲染。所以混合了php模板引擎和angular的语法。让我们以angular或带有TypeScript的vue2为例(这是我更喜欢在我的应用程序中使用的)。

如何正确地做到这一点，以保持未来的储蓄？我的意思是这个组件风格很好，但我需要让它与我的后端以流畅的方式结合起来。如果我只提供一个templateUrl，我如何确保从前端充分利用缓存技术和类似的东西呢？

Answer 1

创建混合的angular应用程序有点棘手，因为如果在angular中处理状态本身很棘手，那么可以尝试将其与php中的状态相结合。

我发现的最好的方式就是把angular看作是一个小部件库。

通过创建包含执行繁重的UI的小部件(组件)，您可以取得长足的进步。

我不会尝试将angular组件模板与php结合使用，而是将数据传递给angular组件。这样，你就可以很容易地测试angular组件，并且你将能够推断出在angular土地上是什么，在混合土地上是什么。如果你正在调试一个angular组件，你可以通过检查进入组件的数据来知道它是否存在于typescript或php中。

有几个场景。

表单验证

您有一个表单，angular在该表单上处理验证，然后使用普通的<form action="/submitform" method="post">提交它

高级表单

您有一个更复杂的表单，可能有多个视图，您可以通过json api和angulars Http服务处理post数据。

图表

通过图形小部件以图形方式呈现数据。

使用方法

让你的整个php应用成为一个angular应用，但不要使用angular的路由。

通过@Input()将php状态注入组件

<my-component showinfo="<?= $showInfo ?>"></my-component>

通过输入传入所有php变量，您将能够通过jasmine轻松地测试角度组件。

angular-cli

我可能会使用angular-cli来创建应用程序。问题是默认使用的是只在内存中运行的webpack开发服务器。

相反，请使用

• --注意在文件change
• --output-hashing=none时进行angular重建，以便angular始终输出相同的文件名，以便您可以将它们包含在app
• --output-path=中，以指定要将构建文件放在何处

ng构建--查看--输出散列=无--output-path=my/php/public/folder