Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular: using $rootScope.$on vs $scope.$on to catch a $rootScope.$broadcast in a component – what is better in terms of performance?

Hi I’m wondering what is better in terms of performance. Let’s say I have this factory that broadcasts stuff:

angular.module('core.foo')
  .factory('Foo',
    ['$rootScope', 
      function FooFactory($rootScope) {

        $rootScope.$broadcast('bar', baz);

      }
    ]
  );

And have a component somewhere (or a lot of them) listening for that event. What would be better?

To use $rootScope.$on:

angular.module('foo').component('foo', {
  templateUrl: 'foo.html',
  controller: ['$rootScope',
    function FooController($rootScope) {

      $rootScope.$on('bar', function(event, data){
        // use the data
      });

    }]
});

or $scope.$on:

angular.module('foo').component('foo', {
  templateUrl: 'foo.html',
  controller: ['$scope',
    function FooController($scope) {

      $scope.$on('bar', function(event, data){
        // use the data
      });

    }]
});

Both would work, I’m just curious.

like image 281
chitzui Avatar asked Nov 04 '16 15:11

chitzui


People also ask

What is the difference between rootScope and scope?

The main difference is the availability of the property assigned with the object. A property assigned with $scope cannot be used outside the controller in which it is defined whereas a property assigned with $rootScope can be used anywhere.

When would you use a $rootScope?

$rootScope exists, but it can be used for evilScopes in Angular form a hierarchy, prototypally inheriting from a root scope at the top of the tree. Usually this can be ignored, since most views have a controller, and therefore a scope, of their own.

What is alternative of rootScope in Angular?

In similar way, you can use use the sharedService inside any component & fetch the returing output and used inside your view. That's it. I found this solution as a good alternative of rootScope. You can use this inside your angular 2/4 application.

What is the difference between $emit and $broadcast?

The difference between $broadcast and $emit is that the former sends the event downwards from parent to child controllers, while $emit sends an event upwards from the current controller to all of its parent controllers.


1 Answers

I don't really understand why people here seem to be so obsessed with performance. You should only worry about performance when you have a performance problem. Otherwise, it's premature optimization, which is the root of all evil.

In that case, the evil might be memory leaks, and much performance problems.

A controller has a scope that has the same life-cycle as the controller. $rootScope on the other hand is a singleton.

So, if you add a listener to the root scope, and forget to remove it when it's not needed anymore, you'll have a memory leak. The listener, which has an implicit reference to the controller, which has an implicit reference to its scope, will stay alive, consume memory, and continue reacting to events for no reason.

If you add a listener to the scope of the controller, however, when the scope and the controller are destroyed, then nobody will have a reference to the listener anymore, and everything will be garbage collected.

So, strive for simplicity, maintainability, testability and correctness first. Performance should not be your primary concern. The framework makes sure every natural, documented way of using the framework is fast enough.

like image 119
JB Nizet Avatar answered Nov 05 '22 14:11

JB Nizet