Angularjs 1, Building a Data-Driven App, Adding a form to check in users

So the purpose of the application is to allow users to check into meetings, so let’s go ahead and create the form that lets users do just that. So first, we’re going to need to go to app.js, and let’s make this window bigger here so we can see more. And I’m going to need to create a new route, so let’s go ahead and make a copy of this one, and this route is going to be the checkins route, but I’m also going to use Angular commands to pass along a couple of variables. So the variables that I need to pass are going to be uId as well as mId.

And uId stands for user ID, and mId stands for meeting ID. If you remember the database has users, and it uses a hashtag to identify each user that is logged in a registered, and then each user can have a series of meetings, and each one of those meetings has a meeting ID, so we need to pass that along through the URL and that’s what we’re doing right here. Of course, the view is going to be a different view called checkins that we’ll have to create, and then the controller is going to be CheckInsController.

We’ll have to create both of these files, a Javascript file for the controller, and this checkins.html document. So let’s go ahead and save this, and before we create these pages, I need to create the button that is going to send people from this Add Meeting page or route to that checkins page. So, I need to go into my meetings.html file and right underneath this button, I’m going to add another button-looking element, but it’s going to be actually an anchor tag, and this anchor tag is going to have a class of btn btn-checkin, as well as tooltip, so those are styles that I’ve created before.

Go ahead and put this on the next line, and of course we need to ng-href, and that is going to send people to checkins… And then it’s going to pass along two items, so the currentUser and something called regUser, in other words, the registered user that is logged into this page, and then a slash, and let’s go ahead and make this window bigger again.

Something called meeting and then… $id. So if you’re wondering where there are coming from, this one’s pretty easy, the meeting is what we pass when we create this ng-repeat command, each meeting is going to be stored into this temporary variable called meeting, and with the ID method of Angularfire, we can get the ID for each meeting. Again, the ID is going to be one of these hashes that Firebase creates for us. Registered user is coming from the current user and we get this from authentication, so if you go to authentication.js, you remember that we store the information about the current user into this current user parameter that is available through Root Scope.

That means it’s available in every page, so although our meeting’s controller doesn’t have this variable, we set it right here into the Root Scope. That means that it’s also available in meetings.html and we can call it, and so the second regUser part, if you go to the database and you remember that when we created a user’s hashtag right here, we also stored a variable or a parameter here called regUser that is a duplicate of this hashtag, and that’s what we’re getting right now, the registered user, and so we’re passing that along as the clickable element that is in a button.

All right? So the only thing I need to do here is create my tool tip, so I’ll use this span tag… All right so, we should be able to see the button as soon as the page refreshes. Let’s make this window bigger now. So when we roll over this button, and you can see that it’s showing the hash for the user as well as the hash for the meeting, and it’s going to pass that along. We need to get ahead and create this checkins.html page that is being referenced by our route, and that page is going to be very similar to our register.html.

It’s pretty much going to be the same form except that we’re not going to have a password field. So I’m going to copy all this stuff right here, and I’m going to make a new page here in this views folder called checkins.html, and I’m just going to paste that and modify it just a little bit. As I mentioned, I’m not going to need a password. Users are only going to need to type in first name, last name, and email in order to log into our meetings.

I’m going to change this class to checkins, and that’s just a class that I’ve created, there’s nothing special about that one. When you submit this form, it’s going to need to go to a method that we’ll need to create called addCheckin. We’ll need to create that, and we’ll do that in another video. But we’ll sort of set the reference to it right there, and instead of register, it’s going to say Check-in, and then this paragraph will just say something like Fill out this form to check-in to this meeting.

Of course, I’ll need to say Check-in instead of Register. And I’m not going to use this login item right here, because it doesn’t make sense for users that are just checking into a meeting. All right, so, that’s pretty good. Let’s go ahead and save this, and now we need to create our CheckInsController, which will be in a checkins.js file. And I’m going to copy this meetings.js file.

It’s pretty much what I need for my CheckInsController. So let’s go ahead and just grab the whole thing and create a new file, call it checkins.js, and I’ll paste that in here, and I’m not going to need any of this stuff for right now, so I’m going to delete everything that’s inside that controller and just rename the controller CheckIns.

Be careful here ’cause I did put in a capital Ins in the name of the controller in app.js, so watch out, easy mistake to make. In addition to the firebaseArray, I’m also going to need the firebase object. I don’t need authentication again because users do not need to be authenticated in order to check in to our meeting. So right now, our CheckInsController is not really going to be doing anything. We’ll leave it like this for now, but we do need to call this checkins.js file because app.js is calling the controller already, which means that it’s assuming that it exists.

So we’ll go into our index.html document and we’ll call the CheckInsController. Here are the checkins.js file that we created. We’ll save that. And if we did everything correctly, when we come back here, we should be able to click onto our meeting, and we should see a form that looks like this. It’s not really going to do anything yet, but we’ve set everything up for people to be able to check into our meeting.

Adding this form was pretty easy. It was just a copy of what we did in the register page. The important thing here was learning how to wire everything as well as how to pass parameters through the routes.

LEAVE A REPLY

Please enter your comment!
Please enter your name here