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

Question

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

应用 1 - PHP 应用

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

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

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

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

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

在此先感谢您的帮助。

Answer 1

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

这就是我使用 Bower 的方式，它只使用 Git 来降低您的依赖性。此解决方案需要您知道如何使用 Git.

安装 Bower—见上文 link。

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

{
    "name": "my-php-app",
    "version": "0.0.0",
    "dependencies": {
        "my-angular-app": "git@bitbucket.org:MY_BITBUCKET_ACCOUNT/my-angular-app.git#master"
    }
}

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

bower install

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

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

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

What's the correct way to embed a remote AngularJS application into a webpage?

html

javascript

php

angularjs

microservices