Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Services, Factories, and Providers: Creating a Value Object

    Craig McKeachieCraig McKeachie

    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.

    angularjsAngularJS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss