7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 Controller and `myAuth` Service

Hello everyone. This is Reggie Dawson. Welcome to the Use Firebase as Your Back End Course for Tuts+. In this video, we're going to set up our main HTML page, our authentication service, and our first controller. First, we need to configure the index.html page. In our foundations for apps project we load HTML templates into the index.HTML page. As a result we don't have to do much to set up this page. The first thing we need to change is the name in G app. We're going to change it from application the social app, which is the name we use in our app.js file. Then we can change the title to social app. After that we need to add our references to our JavaScript files. Underneath routes.js we will add Firebase an angular fire. Then underneath app.js will add references for services.js and controllers.js. The last thing we need to do is remove everything from the body except for the div with the UI view attached to it. Even though I use foundation for apps for the UI elements it includes this time I don't want the formatting that the extra HTML will bring to my templates. All we need is the UI view, which is where our templates will be loaded. After that our index.html page is done. Next, open up services.js. In angular, services allow us to inject data into our controllers. We'll create two services for this app. The first service will be nothing complicated just something to allow us to authenticate in firebase. The first thing we are going to add is a variable to hold our Angular module. After that we will create our service, which we are going to create as an Angular factory. Here we are creating a service called MyAuth. In the constructor function, we are using dependency injection to pull in the Firebase auth service. This is the service offered by AngularFire that handles authentication. Next, we were at our Firebase reference. Then we will use the Firebase off services against the Firebase reference. Once we have captured Firebase off, we can use that with the getOff method which returns the logged in user credentials. This of course is the Angular Fire version of the getOff method we saw in the JavaScript example. After that we're going to add to myAuth object. Inside we will auth our grabAuth which is the getAuth call, and authRef which will be the Firebase auth call. After that we will return the object. This will make grabAuth and authRef available to our controllers. After that our service is complete now open controllers that JS first will set up a controller named Star controller this controller has dependencies of scope of state in a firebase scope allows us to use our data in our controller as well as on our page. It is a required dependency if you want to do anything with your app My authors are injected service. State is an Angular Service which allows us to change state. Essentially this will allow us to navigate to desired pages and finally we inject Firebase off as we will need one of its methods inside of our controller. Then we use the My All service to grab the currently logged in user if any. Notice how we use scope to tie it into our controller. If there is a logged in user we won't do anything just yet. What we want to do, however, is require any visitor to this site to be a registered user. If the user isn't logged in it will navigate to the login state, which corresponds to login.html. We will get into how to set up states in the next video when we create our first template page. The last thing we need to do in our controller is configure the log out function. I could have added the log out functionality to our service, but I will just use the firebase method in the controller. Here we use the My all service with the firebase on off method to log the user out. After that we will navigate to the log in page. That's all we need to set up the star controller, make sure you save your project. In the next video, we will set up our pace to register user as well as getting started with our next service.

Back to the top