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.
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.
$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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With