Services, Factories, and Providers: Creating a Value Object
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.
[00:01] 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.
[00:11] 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.
[00:31] 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.
[00:50] 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.
[01:11] 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.
[01:33] 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.
[01:49] 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.
[02:08] 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.
[02:16] 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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!