我们可以在 AngularJs 的两个页面中的两个 ng-app 之间进行通信吗？答案

【问题标题】：Can we communicate between two ng-app in two pages in AngularJs?我们可以在 AngularJs 的两个页面中的两个 ng-app 之间进行通信吗？
【发布时间】：2017-10-02 16:15:20
【问题描述】：

假设，有两个 html 页面。每个 html 页面都有自己的 ng-app。如果我们想从一个 html 页面的一个 ng-app 发送数据到另一个 html 页面的另一个 ng-app，那么我们如何在两个不同页面的两个 ng-app 之间进行通信。

我有两个 html 页面 app1.html 和 app2.html 有自己的 ng-app。我处于无法使用共享单个 ng-app 并跨多个页面共享数据的布局或母版页的情况。每个 html 页面都有一个文本框。如果我在每个文本框上写一些东西，那么它应该反映到另一个文本框。需要记住的是，这两个页面在不同的选项卡上运行，我什至不能使用数据库、会话、cookies 来保存数据。而且，我什至不能使用父/子关系来相互获取数据，因为如果我使用DOM 的父子关系，父页面必须存在才能运行子页面。

【问题讨论】：

这个问题太笼统了。您应该展示您尝试过的内容以及遇到的问题，因为有不同的方法可以做到这一点，并且许多答案可以被认为是正确的。我们更喜欢特定于您编写的代码的问题，但您无法完全开始工作。大多数问题应该显示您使用的代码。
这些应用大概在不同的浏览器标签或窗口中？他们可以直接通信的唯一方法是一个应用程序创建另一个应用程序所在的窗口并提供回调函数来促进通信。但是，它们可以通过服务器 API 间接通信。
有几种方法可以完成这一切，但有缺点：localstorage、SharedWorker、服务器消息传递等。这太宽泛了，无法按原样回答。
@JCFord 这几乎就是 SharedWorker 的确切用例。障碍是浏览器支持。
您问题的唯一正确答案是：“是”，没有别的说法。 “如何”的隐含问题的一些线索：套接字、webRTC、前面提到的 LocalStorage、cookie、IE 有一种在父/子页面之间进行通信的机制......有很多方法可以做你所要求的，但它可以完成。

标签： javascript angularjs

【解决方案1】：

这是使用SharedWorker 在浏览器上下文中在选项卡/窗口/其他任何内容之间共享数据的非常幼稚的实现。请记住，这仅适用于一个浏览器上下文，因此如果您同时打开了 Firefox 和 Chrome，则数据不会在选项卡之间复制，但会在所有浏览器中复制在 Firefox 或 Chrome 中打开标签。要做到这一点，您必须在服务器端做一些事情。

演示

`index.html`

<!DOCTYPE html>

<html lang="en" ng-app="hvApp">

<head>
    <script src="node_modules/angular/angular.js"></script>
    <script src="src/index.js"></script>
</head>

<body>

    <main ng-controller="hvCtrl as $ctrl">
        <h1>Shared Worker Test</h1>
        <input type="text" ng-model="$ctrl.hvText" ng-change="$ctrl.hvChange()">
    </main>

</body>

</html>

`/src/index.js`

/*jslint browser:true, esversion:6, devel:true*/
/*global angular*/
(function () {
    angular
        .module("hvApp", [])
        .service("hvShared", function ($rootScope) {
            let worker = new SharedWorker("src/shared-worker.js");
            this.notify = function (message) {
                worker.port.postMessage(message);
            };
            worker.port.onmessage = function (message) {
                console.log(`Heard: ${message}`);
                $rootScope.$broadcast("message", message.data);
            };
        })
        .controller("hvCtrl", function ($scope, hvShared) {
            let $ctrl = this;
            $ctrl.hvText = "Hello";

            $scope.$on("message", function (evt, message) {
                $scope.$applyAsync(function () {
                    $ctrl.hvText = message;
                });
            });

            $ctrl.hvChange = function () {
                hvShared.notify($ctrl.hvText);
            };
        });
}());

`/src/shared-worker.js`

/*jslint worker:true, esversion:6, devel:true*/
let connections = [];

self.addEventListener("connect", (e) => {
    let port = e.ports[0];

    connections.push(port);

    port.addEventListener("message", (eMessage) => {
        console.log(eMessage);
        connections.forEach((p) => {
            p.postMessage(eMessage.data);
        });
    });

    port.start();
});

【讨论】：