How to send message from one module to another?

问题

Does angular have any integrated solutions for intermodule communications? How I can send data from one module to another? Maybe there's some eventloop?

回答1:

I would have a common module that your two communicating modules would depend on. The common module would provide an implementation of the Mediator pattern, by exposing a service that can raise and broadcast events to listening modules. See $emit, $on, and $broadcast

I personally like to utilize "hidden" events, so that the events broadcast and handling are encapsulated inside of the service. You can read more about this technique here.

Example Service implementation:

angular.module('app.core').factory('NotifyService', function($rootScope) {
    return {
        onSomethingChanged: function(scope, callback) {
            var handler = $rootScope.$on('event:NotifyService.SomethingChanged', callback);
            scope.$on('$destroy', handler);               
        },
        raiseSomethingChanged: function() {
            $rootScope.$emit('event:NotifyService.SomethingChanged');
        }
    };
});

Make sure your modules depend on app.core

angular.module('module1', ['app.core']);
angular.module('module2', ['app.core']);

Example service usage:

angular.module('module1').controller('SomeController', function($scope, NotifyService) {
    NotifyService.onSomethingChanged($scope, function somethingChanged() {
        // Do something when something changed..
    });
});

angular.module('module2').controller('SomeOtherController', function($scope, NotifyService) {

    function DoSomething() {
        // Let the service know that something has changed, 
        // so that any listeners can respond to this change.
        NotifyService.raiseSomethingChanged();
    };
});

回答2:

In order to achieve bidirectional communication in a "call function" rather than "send event" approach, this can be achieved using services. The trick is to avoid the two modules to require each other - which is not allowed.

Instead, a configuration that works looks like this:

Module A is required by module B
This allows services in module A to be naturally (angular-wise) injectable into functions in module B. That's the easy part.
Functions in module A cannot be injected with services from module B, but...
It is possible to define a stub service in module A (thus accessible to functions within the same module) and "decorate" these (actually, implement these) in module B.

Unlike the event-based communication, this is an asymmetric communication pattern, which allows decoupling between the interface (the service defined in module A) and the implementation (the decorated version of the same service in module B).

Module A could be implemented this way:

// The module itself
angular.module("ModuleA", [])

// A stub service (optional: define "un-decorated" implementation)
.service("someService", function(){
    return {};
})

// Any controller or other function invoking the service
.controller(someController, ["someService", function(someService){
    someService.usefulFunction();
}])

Module B could be implemented this way:

// The module itself
angular.module("ModuleB", ["ModuleA"])

// Decorate the service in the other module
.decorator("someService", [function(){
    return {
        usefulFunction: function(){
            // Implement function here
        }
    };
}])

Remarks:

The decorator function could be injected with $delegate, but this is not required as long as module B provides a complete replacement of the service in module A.
Also, the decorator function may be injected with any services (not just providers!) from modules A or B, so there is no particular constraint regarding the actual service implementation, which can rely on basically anything in the AngularJS environment.

来源：https://stackoverflow.com/questions/34161728/how-to-send-message-from-one-module-to-another

标签

angularjs

messages