Injection Tokens & Factories

[00:00:00]
>> Alex Okrushko: Our service right now is stateless, right? We don't really keep any state. Anything we do, we either return the resource, get the resource directly, or we just send events down to a CD player and do something, right? We don't have any state within this service. That's not really the state, that's just some constant.

[00:00:31]
So let's do some more advanced stuff with dependency injection. Oh, that's the wrong day. That's the right one. And we'll open it as a preview so we can see it a little bit nicely. There you go, perfect. So now in the module 5. By the way, if you're falling behind, or you're trying just to get up to speed to make sure that you can implement with us as well, you can always stop whatever you have, revert any of the changes that you have done, and you can get checkout.

[00:01:22]
Checkout. So right now we're starting module 5, so you can get checkout D1M. 5, I think so that'll bring you up to speed, all the way from through from 1 to 4 completed, so you can always do that. Or I'm 4, so I think I'm 5 anyhow. This gives you an opportunity to catch up and continue along as we implement these things.

[00:02:03]
All right, so let's see what we have to do here. Um, right now, we have events, but we want to tie a little bit this tickets information as well. So if we here in the event and it's not found because our server is not running, so let's make sure it is running. Our back end and front-end are running, here it is running, boom, we have those service back.

[00:02:32]
Right now, if we try to buy tickets, nothing's happening. So we'll need to have a ticket service, or we'll call it a cart service, ticket cart service. And we're going to do a few things, but before we're going to do that, I want to show the concept of injection tokens. They're pretty powerful, so we're going to create a file here in the core, and we're going to call it tokens.

[00:03:10]
Yes. All right. Move them over. We're going to create the tokens. So what is the injection token? Injection token, we typically, when we inject things in Angular, right, we can inject class, right? Class is a runtime concept that's still available at runtime, we can inject any class, no problem, any place, right?

[00:03:37]
But what if we want to inject a string? String is not a runtime concept. I mean, it is a runtime concept, but how do we know whether it's a particular one? How can we inject that string? Well, for that, we have things like injection token. For example, let's say that I want to provide my API URL, right, as an injection token.

[00:04:09]
I can create the injection token with new injection tokens coming from Angular core itself. And I can tell it what is going to be the type, so in this case, it's a string. And here, I just provide some kind of unique string here for just distinguishing it, what it is. So I can say, hey, this is the API URL.

[00:04:44]
Now this injection token, I now can inject anywhere in the application, but this value is not really wired up yet. It's not wired up, and we can wire it up in two ways. One of the ways, and I think this is probably less preferred way, but I'm going to show you anyway, just how powerful certain things are.

[00:05:10]
When we provide the config for the entire application, we can also provide the specific values for specific injection tokens. So in this case, I can provide and say, um, I'm going to provide this injection token, which is API URL. And so they will know provide, but what I'm going to be providing it, I'm going to say is use.

[00:05:43]
I can have use class, I can use existing, I can use factory, which I'm going to use in a second, or I can use use value, this is just a constant. So I can just do the use value and provide the value for this injection token. And say, hey, any APIs you go to localhost 3000. In production, I can swap it for something else, right?

[00:06:20]
So, beauty of a dependency injection, I can swap things if I need for different environments, this is exactly like one of them. All right, so this is how I provide the value. That's one way of providing the value, because here, that is not the value, this is just some unique string, and we're saying that, hey, this injection token exists.

[00:07:00]
Now, I can go into my event servers, for example, and I can say, private, for example. Um. This was URL for example, and we can say inject API URL and then here. It will be basically our API URL. Pasted. Right, so now it knows about this. This is how we consume it. This is how we would specify the value for this, so it's provided.

[00:07:47]
And here we just declared that, hey, such a thing exists and it can be used. So that's one way. Um, one more interesting way that I think is more interesting. We can have this. And another injection token that will have a factory immediately for it. So, for example, we can have the tickets, tickets URL and this URL will also have the injection token.

[00:08:23]
Again, whatever we have here is less relevant now, so let's say I just have to get URL. But what is cool is we can do more things with it. First thing we can do is we can say, hey, where is this provided? Right now, we can say, declare that this is provided in root. So whenever I inject this. It'll be a singleton, so, mind you, it's still a string, right?

[00:09:11]
And then we can have a factory, how can we create this thing. So we can have a factory method here. And we'll say that we have the constant. This API URL. We can inject this API URL constant. Const API URL inject, that's good factory. I need to close it here, OK. And then I'll return my new string, which would be this API tickets.

[00:09:45]
For example. Like this is pretty cool. Now, I don't need to provide this in the provided modules whenever I inject it. The first time I'll create it, the other times I'll just be reusing this factory over and over again. The cool and interesting fact, and I think I'm correct about this, I'm just trying to remember it.

[00:10:14]
The thing is, before inject function was available, you had to specify the deps here as well, and then it'll be basically an array, right, you could do the dependencies here, for example, like my API URL would be a dependency, and then in factory, I have to call it with my API URL here. Right, and then I can use it in if, and it was basically mapping.

[00:10:45]
Um, first item to array, to the first argument, that type of thing. Then Angular team was trying to use this inject function and then they created it here, that was working with an injection token. And then somebody filed a bug that hey, I kind of wanted to just have this inject function in in component or something, they almost by accident invented this inject function that could be used within components, because at that time, all the injections were done through constructor.

[00:11:20]
And by fixing that small little bug, the inject function became available in the inside components and almost like community took it for the first, noticed this, and then it became quite an interesting pattern to the point where constructor-based injections are basically now going away. I don't know, I don't think they're still deprecated, but I know that's not recommended way to do things now.

[00:11:44]
So, here's a little story with this inject function. All right, um. Yes. So now this ticket's URL can be imported wherever we want.