Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 960 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Services, Factories, and Providers: Creating a Service

3:45 Angular 1.x lesson by

Creating your own services in AngularJS can be confusing. What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's service function is just a constructor function.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Creating your own services in AngularJS can be confusing. What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's service function is just a constructor function.

Avatar
Tim

In this video we call the .service as chained method, is this the best way to do this for this controller? This method over creating the service in separate service file and injecting it into the controller, which would be best for decoupling, performance, etc. ?

In reply to egghead.io
Avatar
Craig

Thanks for your question Tim. In a production application the module code, service code, and controller code would each be in their own file. I put them together here so that all the code could be seen together on one screen with the thought that it would be easier to understand the code. Note that the code in this example is still being injected in the controller and is decoupled it just is a good practice to keep things in separate files which I am not doing here.

In reply to Tim

There are lots of ways to create objects in JavaScript. One popular way is a constructor function. I'll create one here right now, called a Droid service. I'll give it a name, and initialize the name to an empty string. We can add behavior to that service then, by adding to its prototype. In this case I'll add a speak function.

The implementation of the function will simply be to return, "Hi. I am," and then concatenate on the name of the Droid. Now that we have our service, we can create an instance of it by creating a local variable. We'll say Droid in this case, and calling new on the Droid service.

When we do this, it's important to understand what's happening under the hood. JavaScript when you use the new keyword on a function, will create a variable called, "This," and assign it an empty object. It will then augment that variable with the name Property, and any other properties, as well as any other methods that you assign to the prototype.

The last thing it will do is return This out of the function. This returning of the object and the creating of the This object, happened automatically in JavaScript, so we won't need those lines of code. Once we have an instance of the Droid created from the Droid service function, we can work with the Droid, assign it a name, let's say R2D2 in this case, and we can log out the Droid speaking.

When I say that, we'll get, "Hi. I'm R2D2," down here in the console, because I'm just in an empty page. If I were to switch from the empty page over to an Angular application that I have ready, we can look at how we can take this constructor function, and make it work inside of an Angular application.

If we paste it in here first, we need to tell Angular about our constructor function. We do that by calling the .service method. The first argument to the service method is the service name. We'll just call it Droid. The second argument is the implementation, which is the constructor function itself, so we'll pass in the Droid service.

If we ask for an instance of the Droid service here in our controller, because we registered this function as a service with Angular, Angular will effectively run this line of code for us. It will apply the new operator to the Droid service function that we passed it, thus giving us back an instance of a Droid.

We can then work with that instance the Droid, assign a name as we did before to R2D2, and we can use our Droid controller's message property which outputs the page to logout the Droid speaking. If I save it here in the middle of the page we see, "Hi. I'm R2D2."

To quickly recap, if you want to use a constructor function inside your Angular application to create an object as we have done here, you'll need to tell Angular that the function is a constructor function, by registering it with the .service method off of the module.

This tells Angular that it needs to effectively run this line of code, that is create a new instance of your Droid service. Once Angular has an instance of the service, it will dependency inject it wherever you ask for it.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?