This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Communicate State Changes in Angular with an Event Bus

    Lukas RuebbelkeLukas Ruebbelke

    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.

    angularjsAngularJS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss