AngularJS Web Application Development Cookbook
Packed with easy-to-follow recipes, this practical guide will show you how to unleash the full might of the AngularJS framework. Skip straight to practical solutions and quick, functional answers to your problems without hand-holding or slogging through the basics. Avoid antipatterns and pitfalls, and squeeze the maximum amount out of the most powerful parts of the framework, from creating promise-driven applications to building an extensible event bus. Throughout, take advantage of a clear problem-solving approach that offers code samples and explanations of components you should be using in your production applications.
Read an Extract from the book
Configuring and using AngularJS events
AngularJS offers a powerful event infrastructure that affords you the ability to control the application in scenarios where data binding might not be suitable or pragmatic. Even with a rigorously organized application topology, there are lots of applications for events in AngularJS.
How to do it…
AngularJS events are identified by strings and carry with them a payload that can take the form of an object, a function, or a primitive. The event can either be delivered via a parent scope that invokes $scope.$broadcast(), or a child scope (or the same scope) that invokes $scope.$emit().
The $scope.$on() method can be used anywhere a scope object can be used, as shown here:
Broadcasting an event
The $scope.$broadcast() method triggers the event in itself and all child scopes. The 1.2.7 release of AngularJS introduced an optimization for $scope.$broadcast(), but since this action will still bubble down through the scope hierarchy to reach the listening child scopes, it is possible to introduce performance problems if this is overused. Broadcasting can be implemented as follows:
In this setup, clicking on the Send Down button will log the following in the browser console:
Emitting an event
As you might expect, $scope.$emit() does the opposite of $scope.$broadcast(). It will trigger all listeners of the event that exist within that same scope, or any of the parent scopes along the prototype chain, all the way up to $rootScope. This can be implemented as follows:
In this example, clicking on the Send First Up button will log the following to the browser console:
Clicking on the Send Second Up button will log the following to the browser console:
Deregistering an event listener
Similar to $scope.$watch(), once an event listener is created, it will last the lifetime of the scope object they are added in. The $scope.$on() method returns the deregistration function, which must be captured upon declaration. Invoking this deregistration function will prevent the scope from evaluating the callback function for this event. This can be toggled with a setup/teardown pattern, as follows:
Invoking $scope.setup() will initialize the event binding, and invoking $scope.teardown() will destroy that binding.
|Course Length||10 hours 22 minutes|
|Date Of Publication||26 Dec 2014|