Communicate State Changes in Angular with an Event Bus
In Angular 2, we use observables to push new data to our components. In Angular 1, we occasionally need to notify a component that a collection has changed so that we can perform an operation at the component level.
For example, when we are editing or creating a bookmark, and we navigate to a new category, we are left in this awkward state of an incomplete edit.
We need to be notified when a new category is selected at the bookmark level so that we can reset the current bookmark. Even though we do not have the convenience of an observable to emit state changes to us, we can still spin up an event bus to let us know when we need to hit reset.
[00:02] In Angular 2, we use observable to push new data to our components. In Angular 1, we occasionally need to notify a component that a collection has changed so that we can perform an operation at the component level.
[00:15] For example, when we are editing or creating a bookmark, if we navigate to a new category mid-stride, we're left in this awkward state of an incomplete edit that is not congruent with the view that we are looking at. What needs to happen is we need to be notified when a new category is selected at the bookmark level so that we can reset the current bookmark.
[00:41] Even though we do not have the convenience of an observable to admit state changes to us, we can still sped up our own event bus to let us know when we need to hit reset. We're going to hop into the categories model and inject $rootScope.
[00:56] Just a bit of cautionary advice, be very judicious about what you put on $rootScope. It is not a global grabbag of properties, but it works very well as an event bus as all events come from the scope object and $rootScope being the mothership of them all.
[01:17] Within our set current category method, when we have set a new category, we're going to call this $rootScope.$broadcast(), and we're just going to emit an event called on current category updated.
[01:33] Then from here, let's hop into the bookmark controller. We're going to inject scope, and we're going to listen for that event. $rootScope is broadcasting the event, so it goes from the $rootScope component all the way down to all the children components, so we're guaranteed using $broadcast on $root scope that every scope object is going to hear, will be notified of that event. We can go this scope on, on current category updated.
[02:00] We're going to call this reset, but we need to bind this method to the bookmark's controller itself because we will lose that if we do not add bind this. Let's hop into the browser, and now you can see that if we're going to create or edit state, that when we select a new component or a new category, it is reset.
[02:27] Using the $rootScope.$broadcast() in our model, we can notify our bookmarks controller that a category was selected, and then allow the bookmark
[02:37] S controller to perform its logic at the component level. This is how you notify your components that a collection has changed at the model.
Hey Kate,
This particular implementation of an event bus would not be necessary with eggly’s implementation of uiRouter.
As an example in the original app, if a user starts editing a bookmark and then selects a category, the controller/view pair associated with the current state is unloaded and whatever pair is associated with eggly.categories.bookmarks then gets loaded in, effectively clearing whatever edit (or create) is happening.
Thx Lukas that makes sense but how would you go about and implement the navigation with uiRouter on this component structure ... I have tried different ways but I can't get it to work. Thx
how would you implement the navigation like in the original bookmark app here with uiRouter?