Angularjs 1, Building a Data-Driven App, Using events to track meetings

When working with Firebase, sometimes we can wait until some database actions take place to do something. So let’s take a look at how we can leverage some of these events to make our application a little bit better. We’re going to add a meeting count to our menu and also make sure that we have the ability to go to our menu whenever we want to. So right now you can see that I’ve refreshed the screen, and somehow I ended up in this log in screen. If I want to go to meetings I can go ahead and do meetings here, and it’ll take me to that page, but occasionally it’ll sort of reset itself to the meetings page, and I can fix that in a couple of different ways.

So if I go, for example, to the app you’ll notice that the default right now redirects you to the log in page. We could change that in there by going to meetings, and then whenever the application reset it would attempt to go to the meetings page, something that wasn’t happening before, but just in case we have other pages it would be nice to sort of display the meetings page here as part of the menu navigation. So we can do that pretty easily. We’ve sort of done that before. If we go to the nav right here, we make login and register part of the menu but only if a user is currently logged in.

So we can do something similar here, and let’s go ahead and type in a list item and then an anchor tag, and we’re going to send people, and remember, with Angular we always use ng-href, and so we want to send people to the meetings page. And I will put a label here called “Meetings,” but we only want to do this, so we’ll use an ng-show, which it’s different from the ng-hide so this one will display whenever the current user exists, so if a user is logged in, and registered, of course, it will show this link to the meetings page.

Now what I’m going to do here is also add a little span that is going to tell us how many meetings are currently in this database. So I’ll add a span right here, and then this span is going to have an ng-show, and let’s make sure we add… Actually, let me go ahead and put this on the next line so that it’s easier to read, and we’ll do ng-show, and we are going to track a variable called how Many Meetings, and we’ll go ahead and create that.

So this is something we don’t have yet. We’ll be doing that in just a minute. And this is going to be of class badge. If you remember, this is a little bit of the css that I added into this course that wasn’t in the previous registration course. And then we’ll display that variable here, howManyMeetings. And so, in addition to having a link to the meetings it’s also going to display a little badge that shows you the amount of meetings, and of course we need to create the code that is going to generate this number right here.

Alright, so that means that we’ll have to go to the meetings controller, and the meetings controller is right here in meetings.js, and right here we’re setting the meeting information and putting it into this meetings local variable, so I want to do something right after this. And one of the things that we can do with Firebase is sort of detect when something exists, so we could do a, say, meetingsInfo and then test for an event, and this is a Angular sort of library event, loaded.

So what we’re saying here is, when this meetings information has completed loading from Firebase, and this will receive a promise here. So then we can do something only when the data has been properly received, and we can grab that data and put it into this data variable that we’re creating right here, and then we can set the rootScope and set that variable howManyMeetings, and we can say meetingsInfo.length because we are getting the meetings info as an array-like object.

Technically it’s not an array, but it’s an array-like object. Then we can use the length method in JavaScript to get that meetingsInfo, you know, the amount of meetings in that array, and that’s what we’re putting in here. So notice we are calling rootScope, and the reason we’re doing that is normally we use the scope variable when we want something to take effect in a specific page, you know, in this case most of the time we’re going to be in the meetings page, but with the navigation it’s very possible that we are going to be in different pages, so we might be on some future pages that we’ll be generating here, so it’s better to actually place that in the rootScope, that way it will be available to all of our pages.

That means that we have to grab this rootScope and make it a dependency, just like we did scope right here. We will need to do rootScope and also place it right here as well. So it’s important when you are using that global variable then just make it a dependency, and let’s go ahead and add a comment here. Right, and the other thing we want to do is watch for changes to this variable because it could very well be that while the user is using the application, it’s very possible that even while we’re using the application, and perhaps we’re adding meetings, that that amount of meetings variable is going to change, so you can’t just do something when that meetings information is loaded from the database because that’s only going to happen once.

You want to be able to do things whenever something updates, and so we can use a different method. So we’ll do a similar thing here. MeetingsInfo… Instead we can use this watch method. This looks for changes within a variable, so we can say function(data), just like before, and here we’re going to modify rootScope, so it’s going to be sort of just like this, actually. And update the length once this information changes.

So let’s go ahead and save this. And notice that when we reload it’ll say that there is a meeting right now, which is great, which means that we have gone to the database, we got the information back once the page reloaded, and we understand that there is one meeting. So let’s go ahead and add another meeting. So we’ll do “Roux”… Let’s just do “Monthly Meeting” here. “Monthly Meeting”… And then I’ll hit plus. Notice that we added the meeting, and then at the same time this badge right here automatically updated to two, and that’s the beauty of these two different methods.

The watch method lets you look for changes in a specific element, and of course, loaded lets you know when the database is finished loading. If you want to learn more about all the different methods that are available, make sure you check out the GitHub page for AngularFire. There is a section here called Documentation, and then from here you want to go to the API Reference, and you can see a list of all these different methods that are available to you. So here’s all the Firebase array methods.

Here’s the different Firebase authentication methods. And you can use those in your application to detect things like events.

Leave a Reply

Notify of