javascript - Angularjs 如何在每个页面上构建共享功能

Question

我最近开始使用 angularjs 并了解基础知识。我有一个项目分为单独的 AngularJS 应用程序 - 例如帐户应用程序、邮件应用程序、新闻应用程序等。每个应用程序都是其自己的 Angular 模块。

现在，如果我要添加一个通知应用程序，并且我希望该通知应用程序在每个页面上与该特定页面的其他应用程序一起运行，我应该如何构建我的模块来做到这一点？*我主要担心的是，Angular 只允许一个 ng-view，因此我无法为该页面的主应用程序创建一个 View ，并为通知创建另一个 View 。

Answer 1

虽然每个应用程序目前仅支持一个 ng-view，但您可以手动将任意数量的应用程序(每个应用程序都有自己的 ng-view)引导到页面中的不同元素，如下所示:

angular.bootstrap(document.getElementById('main_container'), ['my-app']);

我们将它与 jQuery 结合起来，以便能够知道它何时被引导，并添加一个 ng-controller:

$(function () {
    $('#main_container').attr('ng-controller', 'MainCtrl')
    $.when(angular.bootstrap(document.getElementById('main_container'), ['my-app'])).done( function() {
        $('body').show()
    })
});

如果你想在应用程序之间进行通信，那么你需要使用 Angular 版本的 window: $window 和事件或服务来实现，如下所述:Share a single service between multiple angular.js apps