angularjs - Electron 和 angularJS 应用程序架构 - 两个窗口中的 SPA 克隆

Question

在 主窗口在我的应用程序中，我有 angularJS SPA。一切都很好，直到我创建 新 window 。在每个窗口中，我需要加载 URL，它是 HTML 文档的路径，如 主窗口 :

mainWindow = new BrowserWindow({
    width: 790,
    height: 580
});
mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'), // load - index.html angularjs dashboard
    slashes: true
}));

问题是因为我的 中有 SPA主窗口我打开后 新 窗口我应该将整个 SPA 加载到 新 窗口以及 主窗口并且只是重定向到正确的(隐藏的)url，所以我会在这个新的内容中包含一些其他内容。我需要加载整个 SPA 才能访问我需要在 中使用的 SPA 服务、工厂和指令新 window 。

let createQuestionWindow = () => {
    questionWindow = new BrowserWindow({
        width: 380,
        height: 300,
        alwaysOnTop: true
    });
    transparentWindow.loadURL(`file://${__dirname}/index.html`);
    // in above line im actually loading same SPA as in mainWindow
    questionWindow.isFocused();
    questionWindow.setFocusable(true);
    mainWindow.restore();
    // here I should also redirect or set url somehow but...
};
createQuestionWindow();

我什至没有尝试在 中的克隆 SPA 中设置正确的 url新 窗口，因为它可能会导致巨大的性能问题，因为最后我会打开 2 甚至 3 个窗口，有时这将是完全相同的 SPA 克隆。

这不是很好的解决方案 I heard about "child window"但它仍然不能让我访问父 SPA(我认为)。

如何重构我的应用程序，以便我能够从 访问 SPA新 windows，但我不需要一次又一次地加载整个东西？

如果这不可能以其他更好的方式完成，那么如何在 中设置 SPA 的 url新 来自应用程序 Electron (节点)端的窗口，但 angularJS 路由器会捕捉到它吗？

Answer 1

不幸的是，这就是 Electron 窗口架构的缺点:每个窗口就像一个单独的 Chrome 浏览器，有自己的进程。因此，它必须重新加载其所有 HTML、JS 和 CSS，而不能重用(内存方面)另一个窗口中的任何内容。

在 SPA(单页应用程序)的情况下，是的，这绝对意味着在新窗口中重新加载整个 SPA，即使您拥有在前一个窗口中呈现新窗口内容的所有代码。

这与尝试在弹出式浏览器窗口中打开 SPA View 非常相似。见 How can I render an Angular directive in a popup window, allow it to communicate with the main window?

Electron 子窗口也不会有任何帮助。 “子”窗口的概念只是为了确保用户在“子”关闭之前不能在“子”前面显示“父”窗口。但是子窗口仍然必须加载自己的 Assets 。

当然，您可以简单地避免使用新窗口，并在主窗口中使用一些模式或传统路由(非常像普通的浏览器 Web 应用程序)。

但是，如果您真的想通过打开新窗口从 Electron 和桌面应用程序体验中受益，那么在后者中重新加载整个 SPA 通常不会那么困难。与 Web 应用程序相反，您的所有 Assets 都在本地可用并且加载速度很快(除非您确实有一个 MB 大小的应用程序......)

现在至于如何打开新窗口到特定的 URL/路由，只需将您的路由器配置为使用哈希方案，这样您就可以编写您的 URL 来打开您常用的 index.html文件，但路由作为哈希部分传递，例如:

newWindow.loadURL(`file://${__dirname}/index.html#!/question`);

然后你的路由器会在新窗口加载 SPA 时自动捕获它，并显示相应的 View 。

参见例如:

Blank screen when navigating Angular routes within Electron app

https://discuss.atom.io/t/angular-ngroute-not-working/32605