3.5 Home Page
In this lesson, I'll show you how to create a home page and finish off the app.
1.Introduction2 lessons, 02:21
3.Firebase and AngularJS6 lessons, 29:17
4.Conclusion1 lesson, 00:47
3.5 Home Page
Hello everyone. This is Reggie Dawson. Welcome to the use firebases you're back in course for tots plus. In this video, we will set up our start page. We already have our star controller, which will be attached to our home page. But before we work on our start page, we need to complete our controller and add a few more methods to our user service. Open up services.js. When we set up our users, we added an online field to indicate when our users are online. We also temporarily store user data, so that we can track their profile. As a result we need to clean this up when a user logs out. As you know, we have our log out function set up on our start controller. We will use that function to clean up our user information. First we will add a method to our service called user offline. This method is the same as the user online method, except we are setting the online status to false. Meaning the user is offline. Of course, we are again using the Firebase ID to grab the correct record. Then we need to add a method to clear the current user data. Here, we are just emptying the current object of data in case another user logs on. After that, our user service is complete. Now let's go to our controllers.js file. We need to add a few things to our start controller, so it does everything we needed to do. First we will inject the user service into our controller. Then we will make use of our user service. First ,we are capturing the current user information and storing it in the user. Then we capture all of the user information and store it in all users. We will get to the current user in a moment, but let me take a second to explain what we are doing with the scope all users. As you know, the get user method returns all of the users as an array through the Firebase array service. Why this is important is that angular makes it easy to display data that is returned as an array. By doing this, we can access the array of users from the All Users variable. As a result, we can easily attach this data to our HTML page. You will better understand this when we set up our HTML page in a moment. Next we're going to add a variable. And then inside of our authorization check we will assign the Firebase ID to this variable. When there's a logged in user we will grab the Firebase ID. We will need this when our user is going to log out. Then we go to our log out function. First, we will use our clear current message. Here we are using the clearCurrent method to get rid of the current user information. Next we will set up an if statement, if there is data in the tmpID, we will run the user offline method. Remember this method sets the online status to false. After that, our controller is finished. The last thing we need to do is set up our home.html page. The first thing we need to do in home.HTML is add our Controller. Then we can remove all of the remaining HTML from this file. First we will add it in, then we will add our left menu bar. This menu bar just has our app title, also note that we are using UISF as opposed to a standard HTML link. Uisref works with state and allows us to change states when we click the link. This link will take us to the home state. Then we add our right menu bar. In this menu, we are using ngshow to display our logged in user if there is one. We are using our return object from our controller to access the user information, then finally we have our log out function attached to the log out link. Next we're going to add a div with the class of great container. Inside of this div we will add another day. Now this div is normally used for setting up a foundation for apps card, but I have added a N.G. repeat. The beauty of using angular is that we can directly access arrays with NG repeat. Remember we grabbed all of our users with scope, all users. Here we are using it with ng-repeat to list our users. User is how we will access the data on each pass of the loop. First we will display the user name, then we use ng-show to display online or offline, depending on what online is set to for a user. Since the status comes from Firebase, any user who logs on will be able to see who was online. after that our project is done. Let's save an preview our project. We must first build our app before we can preview it. We develop in the client directory, but our app will be copied to the build directory which we deploy. We can use foundation wants to build our app and continue to watch for changes. When a change is made, the app will be compiled and copied to this folder. The foundation build command will build your ad but will not watch for changes. We can also use in PM start and in PM start build, which work like foundation watch and foundation build respectively. If we have problems with the foundation scripts, we can use NPM. The watch command will also launch a browser preview our app. Now we have to make sure that we are in our project folder, and as you can see the foundation built command failed. There seems to be a bug in the new release of the foundation Command Line Interface, which they'll probably have sorted out soon. But again, if that fails to work we can always use an alternate command. NPM start build will also do the same thing as foundation build. Now let's preview our project. When we first access the project, we should not be logged on and prompted to go log in. Let's register a few accounts. Everything should be working properly on the register page again register a few accounts, so that we have a list when we log in. After that, go ahead and log in. When we log in, we should see a list of users and their online status. Log off and log on as another user. When we log back in, the logged on status should reflect that we're logged in as another user. Now we have built a small social app. It is far from complete, but the basics of using Firebase should give you enough ideas to take the app further. In the next video, we will deploy this app to Firebase hosting.