将远程 AngularJS 应用程序嵌入网页的正确方法是啥？

Posted 2023-02-19

【中文标题】将远程 AngularJS 应用程序嵌入网页的正确方法是啥？

【英文标题】：What's the correct way to embed a remote AngularJS application into a webpage?将远程 AngularJS 应用程序嵌入网页的正确方法是什么？

【发布时间】：2015-08-24 07:50:16

【问题描述】：

我正在尝试找出将 AngularJS 应用程序嵌入另一个网页（由另一个应用程序提供服务）的正确方法。我有两个应用程序，在不同的服务器上运行：

应用 1 - php 应用

App 2 - AngularJS 应用程序（各种日历小部件）

PHP 应用程序是主要应用程序，我想在其中嵌入日历，它由远程服务器提供服务。我拥有对两台服务器和这两个应用程序的完全访问权限。我的想法是我希望能够在其他地方重用 Angular 应用程序，因此它需要尽可能松散地耦合到 PHP 应用程序，最好嵌入在一行代码中。

我目前正在使用 html5 标记，它似乎运行良好，但我想知道这种方法是否有任何问题，或者是否有更好的方法来做我所追求的。

我应该提到我很高兴使用仅 HTML5 的解决方案，我不担心与旧浏览器的向后兼容性。

没有 iFrame 解决方案，除非有真正有效的解决方案。我的最终目标是走向微服务式架构。

提前感谢您的帮助。

【问题讨论】：

一个“应用程序”是它自己的东西。如果您需要嵌入小部件，请尝试使用 jQuery UI 或类似的东西。

嗨@Blazemonger - 我无法链接到特定文件，因为我需要它是松散耦合的，如果需要，我需要允许 Angular 应用程序进行更改。我想将bla.example.com 提供的任何内容嵌入到 PHP 应用程序的页面中。

【参考方案1】：

我通常使用 Bower 管理所有客户端依赖项，但您可以使用任何包管理器。

这就是我使用 Bower 的方式，它只是使用 Git 来拉取你的依赖项。此解决方案需要您知道如何使用Git。

安装 Bower——见上面的链接。

然后，在项目的根目录下创建一个名为 bower.json 的文件，该文件指向项目的 Git 存储库：

    "name": "my-php-app",
    "version": "0.0.0",
    "dependencies": 
        "my-angular-app": "[e-mail]:MY_BITBUCKET_ACCOUNT/my-angular-app.git#master"
    

然后你可以在你的 PHP 项目的根目录下运行以下命令：

bower install

这将在根目录创建一个名为bower_components 的目录。你可以configure the default directory。

您的应用程序应该是自包含的。您可以在所需页面上使用 PHP 导入它及其所有依赖项。

【讨论】：

谢谢蒂娜 - 虽然我的解决方案要求所有文件都从远程 Angular Web 服务提供，并且松散地绑定到主应用程序。所有主应用程序都会知道 Angular 应用程序，即端点。