Javascript 单个页面中有多个AngularJS应用程序

我在一个页面中有以下两个应用程序

导航条模块 位于页面的导航栏中。通过主布局文件（im使用laravel）包含在应用程序的每个页面中。包含搜索功能+导航栏功能，如（注销、登录）等

邮政模块 仅在应用程序的仪表板页面中显示。基本上从后端加载和显示帖子

目前两者都是两个独立的应用程序，我使用

angular.bootstrap

加载它们。这两个应用程序都需要使用一个公共服务，

UserService

。它基本上加载登录的用户详细信息。这是另一个模块的一部分，比如说

myapp.utils

。该服务将解析html标记中的数据，并为消费者构建一个用户对象（POST和导航栏应用程序）。但当我将服务注入两个应用程序时，用户对象被构建了两次。这是我不想要的。对于下面的代码，我可以在控制台中看到日志打印两次

.factory('UserService', function(){
    console.log("Initing UserService");

    return {
        'User':...
    }
})

我无法将这两个应用程序合并到一个更大的模块中，因为这两个模块都在两个不同的刀片模板（服务器视图文件）中声明

---

请建议一种替代策略。

如果您使用创建一个单实例，然后使用

.factory（）

方法创建单个实例或在共享模块中返回它，则将其实例化的次数限制为一次

这个单例实例可以使用Angular服务，但棘手的部分是如果您需要一个每个Angular应用程序都是唯一的服务。例如

$rootScope

或

$rootElement

。您可能必须将它们传递给使用它的共享服务上的函数，这将非常痛苦

这是我的小演示，希望能很好地模拟您的场景

var timescanized=0；
（功能（）{
var=null；
函数MyService（$filter）{
这个.$filter=$filter；
log（'Creating sharedSvc instance'）；
时间实例化++；
}
MyService.prototype.strickeitrich=函数（）{
返回“I just found”+this.$filter（'currency'）（20，'$）；
};
角度模块（'共享'，[]））
.factory（'sharedSvc'，函数（$filter）{
if（！singletonistance）{
singletonistance=newmyservice（$filter）；
}
回归单一立场；
});
})();
var topApp=angular.module（'topApp'，['shared']））
.run（函数（$rootScope，sharedSvc）{
$rootScope.topMessage=“我在DOM的顶端（嘿哦）”；
$rootScope.sharedMessage=sharedSvc.strikeItRich（）；
});
var bottomApp=angular.module（'bottomApp'，['shared']））
.run（函数（$rootScope，sharedSvc）{
$rootScope.bottomMessage=“底部向上！（谁切换了重力？！）”；
$rootScope.sharedMessage=sharedSvc.strikeItRich（）；
});
document.addEventListener（'DOMContentLoaded'，function（）{
//引导两个模块
log（'Bootstrappin\'…'）；
bootstrap（document.getElementById（'top-app'），['topApp']）；
bootstrap（document.getElementById（'bottom-app'），['bottomApp']）；
document.getElementById（'times-Instanced'）。textContent=TimesInstanced；
}，假）

顶级应用程序
顶部消息：{{topMessage}}

共享消息：{{sharedMessage}}

底部应用程序
底部消息：{{bottomMessage}}

共享消息：{{sharedMessage}}


Times shared service实例化：？
为什么不创建依赖于这两个模块的第三个模块？然后让它在两者之间路由消息。这样，您可以让一个模块告诉另一个模块它正在使用服务，不要做出反应。