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.

Services, Factories, and Providers: Creating a Service

[00:01] 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.

[00:25] 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.

[00:44] 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.

[01:08] 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.

[01:37] 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.

[02:01] 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.

[02:23] 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.

[02:46] 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."

[03:12] 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.

[03:29] 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.

Services, Factories, and Providers: Creating a Service

Share this video with your friends