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 1055 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 Value Object

2:30 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, Factory, and Value functions? This lesson shows how Angular's value function allows you to use register a plain JavaScript object as an AngularJS service.

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, Factory, and Value functions? This lesson shows how Angular's value function allows you to use register a plain JavaScript object as an AngularJS service.

There are lots of ways to create objects in JavaScript. Sometimes, you need inheritance. Sometimes, you need privacy and reuse. Sometimes, you just need a plain old JavaScript object literal.

I'll create one here called "droidValue." I'll give it a name property and initialize that to an empty string. We'll create a speak function and implement that to return, "Hi I am," and then concatenate on the name.

To use this object, we'll create a droid variable and, then, give that a reference to the droidValue. You notice we don't have to do anything special, here. We don't need to invoke the droidValue object. It's already an object.

We don't need to use the new keyword, here. We just simply need to make a reference to the object. Then, we can use the object. We can say, droid.name = 'bb-8,' and we can logout the droid speaking to the console. If I save this, I get, "Hi I am bb-8" over here.

If I wanted to use this value object inside of an Angular application, I can switch over to my blank Angular application and paste the code into my app JS, here. To register this object with Angular, we call that value off of the Angular module, we give it a name, and we point at our object droidValue.

We can simply ask for an instance of droid, here, and we'll get a reference to that droidValue object. We can work with the object. We can say droid.name and assign it bb-8, as we did outside of Angular.

We also have a message property off of our DroidController. I can set that message property equal to the droid speak method. If I save that, we should see, "Hi I am bb-8," inside of the Angular page.

To recap, there are a lot of fancy ways to create objects in JavaScript. Sometimes, you just need a plain object literal, as we have here.

If that is the case, all you need is to call .value and give a reference to your object. Angular will know to dependency inject a reference to that object when you ask for it.


Featured course:

Building apps with Ionic 2

Building apps with Ionic 2

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