Angularjs 1, Building a Data-Driven App, What we’re starting with

Now, the only difference for now is that this project does require some additional image assets. So, they’ve been added to this project. If you’re coming from the previous course, make sure that you go through the Working with the Exercises video so that you know how to clone the new repo.

So, let’s dig into the code that we already have. Now, if you are coming from the Angular JS Registration course, you can probably skip through the rest of this movie, but it might be a good review. So, I’m starting with this index.html file and you can see that we have declared an ng-app directive, calling this myApp. Then we call a series of script tags in addition to all of our CSS, we call in the Angular JS files right here, and then we have this next section that imports the firebase library as well as initializes the application.

Now, this is pointing to an angularregistration07.firebase.io.com that we’re going to need to update for this application. We’re of course also importing angularfire right here, and then we import our different scripts. So, these are the things that we wrote in the previous course. Now, the only thing you see here in terms of html is a section for the navigation which has an ng-include, and that calls this nav.html file which is in the views folder, so this is calling this nav right here at the top.

And then we have a section for the page, we add in some user information just to let the user know that they’ve logged into this app, so if I come in here and I log in, you can see this section right here is what this is for. Now, the main part of the application is going to display in this ng-view section, and most of what we’ll be working on in this course will go right here. Now, you can tell that we have a few views and those of course correspond to the different sections of this app, and the route for registering a user, as well as login in a user right here, and that’s what all these files are.

We have the navigation, which is pretty simple. We have a couple of ng directives right here that allow you to see the links only if the user hasn’t logged in, and then on the register section we have essentially what is a form for registering on the website, and then when you log in, of course, we have that form, but for just logging in, which is what you see here on the right-hand side. And then we have a success page, which is what we see whenever we log in a user properly.

And this is where most of our application is going to go in the future, we’re going to be renaming these things a little bit, just so that it makes sense as a continuation of the work that we did in the previous video. So, if we take a look at the code, we essentially have a number of files, we have of course, the main app.js file, and let’s go ahead and make this a lot bigger. Here of course, we’re creating the main module called myApp, which corresponds to the application that we’re calling right here, and then as dependencies to that, we’re calling ngRoute, which lets you use the routing features that you see right here.

We can route to different pages by using this component. And then, we add firebase as a dependency because this is going to be reading and handling authentication from firebase service. We have an myApp.run method here and this will allow us to make sure we checked whether or not a user has been authenticated in order to allow them to see a certain page. If they’re not authenticated, then it’s going to kick them back to the login page, that’s what this section does.

Then we have, of course, the routes. We’re using the routeProvider service to display different routes when you have different items in the url. So, if the app goes to the login section, then we load up the login view, which is what allows people to login, and that’s being controlled by the registration controller. Same thing for register, it displays the register form and it’s being managed by the same controller. In a similar way success is being managed by the SuccessController, and it displays what is in our success view right here.

Notice that this one also has an additional resolve method here, and this essentially makes sure that the users are authenticated before they can see the success page. So, it’s not going to allow anybody to go to that success page unless they have been logged in. So, otherwise this is going to kick people to the login page and this is sort of our main app file. If we take a look, we have a couple of things happening here as well. We have this folder called controllers and right now there’s only two controllers, RegistrationController, which you can see referenced here and here, and this handles what happens in terms of registration or logging in.

And although you think it might be complicated, all it does is handle the methods for logging in and logging out and also registering a user. Notice that it handles that by passing along what this component needs to do to an authentication service. So, most of the functionality’s actually done on this authentication service, which you can see as a dependency here, and that is actually in this services folder.

So, before I go to that, let me just show you that the success page is actually super simple. We’re going to be doing some work in here. And because the previous course was primarily an authentication course, this authentication.js is where most of the work from the previous course was handled in. So you can see that it comes in a factory, which is angular’s way of allowing you to create services is called authentication, which is what we referred to in the different files where we need it.

So, if you registration.js calls this service Authentication and it’s essentially calling this file right here, and here of course we need to import a few things, the location service which allows you to send a user to a different path from an existing path and that’s what allows us to send people to the login page if they’re not logged in. And then, of course, I need a couple of services from firebase, firebaseObject which allows us to dig into the data that is stored in firebase.

And then firebase authentication which handles most of the authentication functionality. So the way that you work with firebase is by creating a reference to the database, which is what this line does and then also creating a reference to the firebase authentication. That allows you to have access to the different methods and properties for this specific course. Then, right here I’m creating an object because I want to have proper access to the this variable so I can get to different methods from other methods and you’ll see that I use this a little bit later on to actually call one of these methods from another one.

And the first thing that I do here is detect what happens when the state of authentication changes for a user. That’s what this method does right here, it says on off state changed. So if a user decides to log off, you can tell that what I’m doing is I’m just resetting this variable, this accessible throughout the application, that’s why it’s on rootScope. If they’re logged in we are passing the data from firebase into this current user variable, if the user is not logged in, then we are passing an empty sort of piece of text into this current user, and that allows you to do things like show the proper navigation, depending on what’s happening with the app.

So, here, this is where we sort of create all the methods for this thing called myObject, which has all of the functionality of this component here. And here is, for example, the login method, you can see there’s logout here, and register here, and there’s another one called require authentication. And in login, of course, we are using a firebase method called signInWithEmailAndPassword, passing along the data from the form that people fill out, and then once that data is passed, we get a promise and then we use the location service to send people to our success page.

If there’s an error, of course, we display the error, there is a variable called message that I’m passing on to rootScope, and if you go to one of the views, so if we take a look at, say the login view, you can see that if the message is available, I actually display it at the top of either the login or the register route, just so that we can give people feedback if there’s an error logging in, or if there’s an error registering a user.

So, let’s go back into authentication and keep on going. So, login looks like it’s pretty straightforward, logout is even easier because you don’t really need much to logout a user, it essentially gets passed to the authentication variable here, we just pass it a firebase method called signout, it already knows which user is signed in, so it just signs the user out. You don’t really have to do a ton in this section. Then, we of course have this register, I’m going to skip this one for a second and just talk about register ’cause it’s very similar to login.

And in here if you are registering a user for the first time, we actually create the user in firebase, this is the method that does that. We again pass along the email and password, so if you go to the register page, you’ll notice that in addition to putting in the first name and last name, we pass the email and password. So, we are creating a user in firebase only using the email and password, that’s all that firebase needs.

And then once that’s completed at firebase, then we take the information and we post it in our own database, so there’s a certain bit of information that we want to pass along to firebase so that it can handle the registration, and then there is some information that we actually want to store in our database. And that’s what this method right here does. So, it places that at the register users ID, so whenever you create a record, firebase creates a hash for you, and we can use that hash to add things inside that hash, and what we want to put in there is stuff like the date, registered user, first name, last name, email, et cetera.

So, to get the date, we don’t sort of, create our own javascript date, we’re using a firebase value here that we can grab from the database directly and this is just a timestamp of when this user was created. And then we pass along things like the user ID, we’re storing the same hash that we’re referring to, just so that we can get back into this record whenever we want. And then of course, the user first name, last name, and the email from the registration form.

Notice that I don’t store the password, you really don’t want to have anything to do with users’ passwords. So we don’t store that anywhere in our database, that is all managed by firebase. And then, this is the part where I mentioned that I created an object so that within any of these methods we could refer to that object itself and that what we’re doing here. We’re saying, hey, once you register a user, go ahead and log them in. I’m really annoyed when you go to a website and you like register and then you have to log in.

Like, I just registered, why do I have to type in you know, the email and password again, if I just did it. So, this is sort of a simple flow. So, we’re logging in the users after they register, and then of course, if there’s an error, then you can display the error message. Error messages up here, right underneath this paragraph right here. And that’s register and notice that there’s also a require authentication function. And this essentially allows you to make sure that somebody is signed in, so we actually call a firebase method called requireSignIn that makes sure that in order for a user to use a page that they are registered and signed in to the application.

So, this right here is being called by app.js and this is what happens if somebody tries to go to the success page. So, right here, if you try to go to the success page, go ahead and show success using the SuccessController, but only if that user, using this require authentication method that I just showed you in authentication.js returns as true, so if they’re registered and logged in, then go ahead and show that page.

And that’s what this resolve method does.

Leave a Reply

avatar
1000
  Subscribe  
Notify of