现有的角度网络应用程序进入 wordpress 页面答案

【问题标题】：Existing angular web-app into wordpress page现有的角度网络应用程序进入 wordpress 页面
【发布时间】：2017-07-14 08:56:47
【问题描述】：

我为我的客户创建了一个有角度的单页网络应用程序。

现在他们需要将应用程序集成到他们 (wordpress) 网站的页面中。

编辑：换句话说，他们希望将应用程序放在现有的 wordpress 页面中

最好的方法是什么？

我尝试了 iframe，但它不起作用：没有调整应用内容更改的大小和模式问题。

谢谢

【问题讨论】：

标签： angularjs wordpress single-page-application

【解决方案1】：

如果您需要使用已经完成的模板将其插入现有页面，您可以创建一个短代码和一个插件：

在wordpress的插件文件夹（/wp-content/plugins/）中创建一个类似“your_spa”的文件夹

在新生成的文件夹中创建一个名为 your_spa.php 的 php 文件

把它放在文件“your_spa.php”中

<?php
/*
Plugin Name: your spa plugin
Description: description
*/

function your_spa_code(){ ?>

<!-- put here your code (this will be inside the body of the page) -->

<?php }

add_shortcode( 'yourspa', 'your_spa_code' );
?>

注意链接/资源 url（js、json、css）：将它们放置在您想要的任何位置，但请记住路径（如 html path => url）

记得让apache用户读取文件（文件权限）

在 wordpress 仪表板中激活插件“您的 spa 插件”

在博文/页面中使用 [yourspa] 作为快捷方式

现在您已经创建了一个插件和一个简码！

PS：请记住，您的代码将被现有页面的代码包围

它有点脏，但它是简单的解决方案。

【讨论】：

我需要将我的应用程序包含在现有的 wordpress 页面中

【解决方案2】：

我在简单地渲染 Angular 的引导代码、<app-root> 和 <script> 标记方面取得了一些成功，就像它们是从独立的 Angular 部署中提供的一样。

我刚刚使用 HTML 编辑器在帖子中添加了以下 HTML。

当然，我不得不摆弄 JS 脚本源 URL。渲染所有这些 HTML 可以使用 Wordpress 短代码和插件来完成，该插件要求 JS 文件的 URL 路径。

<app-root></app-root>
<script type="text/javascript" src="http://localhost:4200/inline.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/polyfills.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/styles.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/scripts.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/vendor.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/main.bundle.js"></script>

这与 Divi 主题和“代码”模块效果不佳，完全搞砸了页面。尝试使用官方 Wordpress 机制来包含 JS 脚本 (wp_enqueue_script) 失败，因为在加载脚本时找不到 <app-root> 标记。

【讨论】：