Question

我正在构建一个打包的chrome应用程序，并且想要使用Angular。作为具有类似于本机应用程序的ui行为的本地应用程序，我想要为弹出窗口和不同的工作流程使用多个窗口。与对话框或模态相比，这对用户来说更直观。

在这些窗口之间是否有一种很好的角度方式共享服务实例？我没有看到不同的解决方案吗？

更新

为了更清楚一点，我想在javascript窗口之间共享数据。有基本window.postMessage，但我希望能够在这两个单独的窗口之间共享服务实例。

可能的解决方案

我找到了一个共享服务的黑客并在下面发布了答案。我喜欢它的想法。更理想的是，如果我可以共享$injector服务本身。这可能会照顾所有可能的选项，并使它好像它在同一个应用程序中。我相信$injector引用了DOM中的rootElement，当然在新窗口中会有所不同，因此解决方案可能无效。想法？

Answer 1

Angular 不提供任何跨窗口支持或对设计本地应用程序特别有用的任何内容。事实上，它并不是真的需要，尤其是Chrome应用程序。

查看Google为Chrome应用提供的localStorage包装，它提供了一些额外的便利（例如在线同步和排名）：chrome.storage。您不能像在{＆＃34;正常＆＃34;}中那样使用window.localStorage。网络应用程序，即使您只是想要localStorage的基础知识，也需要使用它。

文档有点稀疏，但你会在这里找到它的用法教程，包括Angular示例代码：Save and Fetch Data

最后，通过一个或多个服务管理此存储是明智的，就像您倾向于使用AJAX调用/外部数据资源一样，以便跨控制器进行封装和重用。

<强>更新

根据@ Xan的评论，您还可以考虑使用FileSystem API，它可以为您的应用提供

的功能

创建，阅读，导航和写入用户的沙盒部分本地文件系统

根据您的应用程序的需求，这在处理大量数据时非常有用，尤其是在与对象存储和$watch和/或$interval轮询一起检测时应用程序实例之间的变化。

来自Exploring the FileSystem APIs

的更多信息

Answer 2

我已经能够想出一种在多个窗口之间共享服务的方法，但它仍然有点笨拙，如果可用的话，更愿意使用更好的解决方案。

在作为Chrome应用的父窗口中，您将使用以下代码启动一个新窗口。

  chrome.app.window.create("view2.html", options, function(window){

    //This function is a callback that is called when the child 
    //window has been created and launched.
    //I believe it has first access to the window object before any child code
    //Note that the parameter is not the true javascript window but only 
    //a chrome wrapper object. The window is window.contentWindow

    //We are going to place an object on the window that the child code will look for
    window.contentWindow.sharedDependencies = {
       shared_dependency: dependency,
       other_shared_dep: dependency2
    }
  });

然后，当您的第二个页面加载时，它可以检查窗口上的属性sharedDependencies并正确加载它们。

//The main module must have the dependency module
angular.module("main_app", ["dependancyModule"]);

var deps = angular.module("dependancyModule", []);

if(typeof window.sharedDependencies === "object")
{
   for(var name in sharedDependencies)
      //Register each dependency as a value because we are receiving 
      //it as a value- not as a factory method or a service method. 
      deps.value(name, sharedDependencies[name]);
}

我在一个打包的应用程序中尝试了这个并且它工作但是您必须手动调用$ apply（），因为在一个上下文中更改某些内容不会警告其他上下文。我没有想到一个优雅的解决方案。

我也是Angular的初学者，所以这可能不支持Angular的其他方面。除了对共享对象的简单绑定之外，我还没有测试过它。

Cross Document / Window AngularJS App

2 个答案: