This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Service Definition" Lesson
[00:00:03]
>> Scott Moss: So now what we're gonna be doing is we're gonna do something a little more complicated but if you've used Angular, this should be familiar. You're just gonna probably go do this in a different way. So we have right now some static data for like those, those blog posts just like static data that we made.
[00:00:20] We're gonna replace that with real data from a server that's in the repo right now. Sweet. So before we do that, let's talk about services. Who here wants to give me their definition of a service in Angular?
>> Scott Moss: Yep?
>> Student 1: A single threaded request.
>> Scott Moss: Single threaded, I think it of a, you think of a HTTP column.
[00:00:45] I'm just talking about the actual services in the Angular like-
>> Student 2: You quit the dollar HTTP or the dollar research or what?
>> Scott Moss: Right, it’s the part of the research that, yeah.
>> Student 1: Yeah. So a service is, if you think of essentially, a factory. But a service is, it uses the this keyword and it's newable.
[00:01:11] But the factory isn't?
>> Scott Moss: Right, so you actually gave me the definition of the exact method called service. So, this is where it gets confusing. This is were I ask people because this is really confusing. In fact, there was a talk at Indie conf. About how confusing this was, because it was so confusing.
[00:01:28] So, the term service is used is loosely used in Angular one X, very loosely used. Because technically, all the stuff I'm about show you is a service but there exists a method with the name of service as well, which is also service. So, all these methods that you can call on angular.module, they are all technically called services.
[00:01:55] But again, there is one whose name is actually called service. That's why the term service and Angular one X is loosely used because of if somewhere is yeah, I write a service for that. What do they really mean? Do they actually write a service for that or they mean write a service for that, right?
[00:02:14] I don't know. So yes, very loosely used I think they could call it a better term but the differences are in this bill there. A service and a factory they're pretty much synonymous, the differences are pretty simple a service is a newable function that uses this. That's pretty much it, so when you pass in the second callback function here for the finished injection, the function's gonna be called new on, right?
[00:02:37] But it's also a singleton. So, it's not gonna be a new instance every time you use the service. So remember that, it's a singleton. And then a factory is a function that's not newable. It will return whatever you want it to return. You can return a number. You can return a boolean.
[00:02:56] You can return an object. You can return another function, that is newable. You can do whatever you want with a factory. So, those are two differences between those two, cuz a lot of people get those two confused. So you can use either or, to get the same thing.
[00:03:08] Unless, you were trying to return something that wasn't an object because a service can only return an object because it's to instantiable factory function which only returns instances which are objects. So, that's why I usually just use factories. So I can return whatever I want, I'm not a big service person.
[00:03:24] And then constants and values are just like a way to store constants and values. But you can make constances in ES2015 now, so it's like yay, whatever. So yeah, all these are services, but this is a service. So if you hear me say, just make a service for that.
[00:03:40] That really means pick one of these and make one, all right? I'm not really saying go make a service, all right? So, just remember that. It's really confusing. So here's what the code looks like for that, a little difference. So you have your module, and then you have your dot service here.
[00:03:56] This is an actual service. This function right here is called a function is a newable function. So, I think I've touched on this yesterday. You can't and should not use arrow functions here as if there were no why you should.
>> Student 3: This context is bound to declaration or where it's declared.
[00:04:15]
>> Scott Moss: Exactly. The context is gonna be bound to whatever outside scope and this is sitting like on the global store that will be the window. So when you say this.action, you have to say window.action which is not what you want, right? So, that the error functions are not meant to replace constructor functions.
[00:04:33] Just remember that and if you're making a service, the actual method service then this is a constructor function. So, they are not for arrow functions for constructor function on a factory. Yes.
>> Student 1: Just a quick question. So with that kind of ES6 NIM Conventions here, could we instead of saying function there, say like my service?
[00:04:54] Double prints or is that just objects constructed?
>> Scott Moss: I see what you mean.
>> Student 1: Yeah.
>> Scott Moss: You can only do it on object literals.
>> Student 1: Object literals, okay.
>> Scott Moss: Yeah, object literals and classes.
>> Student 1: Cool.
>> Scott Moss: Yeah, so-
>> Student 1: But if you could like created named function below and it hosts up into there if you reference it?
[00:05:12]
>> Scott Moss: If you create a name function over the functional expression and hoisted up here?
>> Student 1: Like if I said function not service.
>> Scott Moss: You could do that
>> Student 1: And just put my service there.
>> Scott Moss: Yeah, you can totally do that, that'll work. As long as you do the expression and not a declaration.
[00:05:29]
>> Student 1: Cool.
>> Scott Moss: Or is it the other way around? I don't know, one of those two. But a factory is not a newable function. I mean this, this function is still dependency injection and you still might have some problems with trying to figure out how to handle minification but as far as like scoping, you should be fine as long as you don't use this.
[00:05:49] But maybe just to protect yourself, you should probably still not use arrow functions here. I just do it because I know I'm never gonna use this inside of here, unless I'm creating a new scope so. But a factory can't return anything, it has to return something though. If you don't put the return key word in a factory return something, angular will not it will not run, it will break like you didn't return something.
[00:06:11] You need to return something this factory, so long as you return anything which could also be a newable function, so you can return a constructor function here which is great. Any questions on those two?
>> Student 1: There's a clarification from Daniel and may be worth asking. So, would you be able to use a class as a service since that's a newable thing as well, right?
[00:06:34]
>> Scott Moss: Yeah, you would be able to use a class as a service. You could totally do that long as a class is made. So technically, classes in ES2015 is spec, they're not supposed to hoist. But I think, Babel allows them to hoist. But if you're ready to classes make sure you have a defined before you make a service.
[00:06:57] Although, I think Babel will allow you to hoist up, so you can define it down here from the top. But I'm pretty sure according to the ES 2015 spec, they're not supposed to hoist like that for reasons as far as extending them. You have problems with that, so they don't allow that.