Skip to main content

Communicating between controllers in AngularJS

I have seen many solutions to how to make controllers talk to each other whilst at the same time remaining within "da rulez" of writing Angular applications.
I have been using Angular for about a month now and at times it has been swearier than a good Haskell session, it is most definitely worth it all in the end. I have written a really nice looking web application for my employer and they seem to like it. I think Angular.
One thing I really aced (to my own satisfaction at least) was wrapping a REST (of any type) API using a resource. I will make a separate post about that.

Do the simplest thing...

Here is my own solution to the problem of how you can make different controllers communicate cleanly using the "event" system that Angular provides. All you have to do is ensure that the following event listener is added to your application root-scope:
App.run( function( $rootScope )) {
    $rootScope.$on('broadcast', function( e, data ) {
        if (undefined == data.with) {
            $rootScope.$broadcast(data.say);
        }
        else {
            $rootScope.$broadcast(data.say, data.with);
        }
    });
});
There is of course a calling convention now but it is very very simple indeed and should not cause any undue hardship. It allows any normal data to be passed around, here is the format of the object that you must pass as the only argument
    {
        say: 'message-identifier',
        with: message-data (optional)
    }

How it does what it does...

If you read the (improving) documentation closely you will know that $emit() ripples messages up the scope hierarchy and $broadcast goes the other way. As we have added this to the root-scope it means that when the message arrives and is re-dispatched, it's going to go back down to every scope that is currently alive and listening. And that is how we achieve the seemingly impossible task of leaping between branches of a tree, which is essentially what communicating between controllers is all about.

Using it, an example...

I am currently writing a stop-motion web application so I can make the next block-buster Lego animation film. I use Linux and having used what appears to be the only Linux stop-motion program available ("stopmotion") and having found it to be a little unstable and buggy at times I did what any self-respecting hacker would do (next to fixing those bugs!), which is "roll your own".
I have a window that shows the video from the camera and a "configure" button that replaces the camera image with a configuration dialog in the same space. My issue was how to tell the rest of the UI that the user had toggled a checkbox, because the state of the checkbox had to cause the UI to make some changes.
All I had to do with my simplest-thing-possible broadcast helper was send an event like this:
[code] $scope.toggleIPCam = function() { $scope.isIPCam = !$scope.isIPCam; $scope.$emit('broadcast', { say: 'IPCamMode', with: $scope.isIPCam }); }; }; [code] Don't forget that the value for with can be any valid data type, the example shows a boolean being passed but it could as easily have been a function or an object etc.
Here is how we catch it and deal with it...
    $scope.$on('IPCamMode', function(ev, mode) {
        console.log("received mode change on camera: "+mode);
        $scope.isIPCam = mode;
    });
How difficult is that? And remember that if you didn't pass any data then you can dispense with having to declare anything at all after the event parameter and of course, if you don't care about the event then you don't need any formal parameters at all!
So there you have it, inter-controller communications in one simple addition to $rootScope at the cost of following a very simple calling convention.
Hope that helps fellow AngularJS jockeys everywhere.

Comments

  1. I was using services prior to reading your post. I think your way is simpler. Services are kind of overkill for single variable models. Thanks for this tip!

    ReplyDelete
  2. Services are probably the more AngularJS way to go but like you sometimes it seems like overkill.

    If I was writing an very large app that relied on IPC like this a lot then a service would probably better but sometimes you just have to get things done.

    ReplyDelete

  3. Angularjs is a structural framework for developing the dynamic web applications. Angular's data binding and dependecy injection is capable of eliminating much of the code.
    angularjs training in chennai | angularjs training chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

The Coolest Shortest PHP Function I Will Ever Write

Having now released my own programming language, FELT , and learned a lot about this and that in the process I have of late, in the evenings, been struggling to reconcile my love of LISP and how simple FELT makes some PHP coding task leaner and meaner with the fact that I still have to use PHP for my day job. In my language, FELT , I have used the square brackets to define a "normal" array and curly braces to define a "key-value" array, mainly because this is identical to JSON format and anybody familiar with Javascript coding just won't have any issues getting to grips with that now will they! Let's take some simple examples of FELT code: (defvar simple-array [1 2 3 4]) (defvar simple-map {:name "Eric" :age 42 :occupation "Viking Hacker"}) When FELT has done its thing, we get the following PHP code, $simple_array = array(1, 2, 3, 4); $simple_map = array('name' => "Eric", 'age' => 42, ...

Handling multipart/form-data with NanoHTTPD

I am in the process of reviving an old project from 2014 that I never finished because of other work commitments. In that time, bitrot has set in, the Android API has moved on and all in all, the home-brewed HTTP server I wrote using SocketServer and the org.apache libraries had to go! I looked around, found a couple of contenders and after much time decided to go with NanoHTTPD because it is lean, small and fits in exactly two files. The main server is in one file `NanoHTTPD.java`and there is another file called `ServerRunner.java` which manages instances of running servers. The others The other project I looked at is this one:  https://github.com/koush/AndroidAsync which led me a merry dance and I just couldn't figure out how get the POST data I had uploaded. I spent a few days really digging at it with Wire Shark too to make sure the data was going up. It was. Whatever... I had used it via a gradle dependency entry but I dropped it and went back to NanoHTTPD. For m...

Using a RAM disk with Opera on OS X

Having recently configured AndroidStudio to use a RAM disk for Gradle, I thought I would look around and see if I can use the remaining space for Opera. This is essentially a reproduction of this fine page: http://www.ghacks.net/2010/10/20/how-to-change-the-opera-cache-directory/ That page does not deal with Macs though and after a little bit of experimentation I came up with this spell: open /Applications/Opera.app/ --args --disk-cache-dir=/Volumes/RamDisk/opera For the record, here is my Opera version: Make sure that the specified folder exists before starting Opera, if might automatically create the folder for you but I didn't bother to find out, I hate disappointment. And for the record, the way I create a RAM disk on my iMac, which is done automatically when I log in, is like this: diskutil erasevolume HFS+ "RamDisk" `hdiutil attach -nomount ram://4194304` The above line was courtesy of this YouTube video: Thanks to Bartech TV then! So, with Turbo m...