Angular modules are becoming pivotal building blocks in Angular 2 architecture. With Angular 2-RC5 the NgModule is the decorator that defines an Angular module class. Modularity enables us to developed loosely coupled and extensible applications that are built to last and to change. A module encompasses components, templates, services, directives, etc.. into a cohesive block of functionality. Each angular module is responsible for a certain area of the application. These areas are not restricted to UI components only. An angular module can comprise shared logic, models,  services, or cross cutting code used amongst modules.

ng2-eventagg-modularapp
Fig1 – Angular 2 App with 4 UI modules (1 Root module that encompasses 3 feature modules)

Modules don’t Live in Silos

Although each module is responsible for a specific area of the application, modules need a way to talk to each other and exchange information. Because composite applications focuses on having decoupled modules, Event Aggregator is a pattern that comes to the rescue. Angular 2 framework is no different. Root and feature modules share the same execution context. These modules eventually might need to communicate.

The Event Aggregator is a event exchange hub service allows publishers and subscribers to communicate in a decoupled manner.

eventaggregator-diagram

Demo App

This screenshot is showing a simple angular 2 app that  consists of 4 modules. The root module, dashboard, console, and shared module. The dashboard fires events, and the console listens those events.

final-eventaggregator-demo

Implementation

The Event Aggregator i am planning to build utilises JavaScript Reactive Extension library (RxJS) for providing subscribing and publishing events to the observers/subscribers. RxJS is bundled in the node_modules used by an Angular app.

In the next posts i willl show the implantation code for a simple event aggregator that enables modules to publish a single event with simple payload and received by all subscribers in the various modules. Then a subsequent post will show a full fledged event aggregator where it can publish various types of events with dynamic payload type and received only by those who subscribed to that specific type of event.

The implementation of event aggregator lives in a shared module that is consumed by the UI feature modules within the application.

 

Leave a Reply

Your e-mail address will not be published. Required fields are marked *