我最近开始使用 angularjs 并了解基础知识。我有一个项目分成单独的 angularjs 应用程序 - 例如帐户应用程序、邮件应用程序、新闻应用程序等。这些应用程序中的每一个都是它自己的 Angular 模块。
现在,如果我要添加一个通知应用程序,并且我希望该通知应用程序在每个页面上与我的其他应用程序一起针对该特定页面运行,我应该如何构建我的模块来做到这一点?*我主要担心的是 Angular 只允许一个 ng-view,所以我不能为该页面的主应用程序和通知创建另一个。
我最近开始使用 angularjs 并了解基础知识。我有一个项目分成单独的 angularjs 应用程序 - 例如帐户应用程序、邮件应用程序、新闻应用程序等。这些应用程序中的每一个都是它自己的 Angular 模块。
现在,如果我要添加一个通知应用程序,并且我希望该通知应用程序在每个页面上与我的其他应用程序一起针对该特定页面运行,我应该如何构建我的模块来做到这一点?*我主要担心的是 Angular 只允许一个 ng-view,所以我不能为该页面的主应用程序和通知创建另一个。
虽然每个应用程序目前只支持一个 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 和事件或服务,如下所述:在多个 angular.js 应用程序之间共享单个服务
正如 Angular 文档所说。
该指令指定应用程序的根目录,通常放置在页面的根目录处。...ngApp 是引导应用程序的最简单方法。
一个角度应用程序定义了它的模块,但它也可以依赖于其他模块。因此,您的通知示例是模块依赖项而不是应用程序依赖项。
您将创建通知模块,例如
var notificationModule=angular.module('notification', []);
并注册多个子元素,如控制器、指令、过滤器、服务等。
然后,您可以将此模块作为依赖项添加到其他模块中,例如
var customerModule=angular.module('customer', ['notification']);
您可以notification
使用任何模块注册依赖项,而不仅仅是链接到ng-app
.
您的 html 结构应该包含主视图,ng-view
并使用ng-include
指令包含辅助视图。由于属性支持数据绑定,因此您可以在主要内容更改时ng-include src
交换使用的模板。ng-include
ng-view