Hello, everyone, and welcome back.
In this lesson, we are going to cover a more advanced dependency injection case where we'll see how
to inject something that is not plain TypeScript Glass.
So, so far, the services that we have been injecting are instances of a class service.
But there could be situations where we would like to inject something such as, for example, a plain
JavaScript object containing, for example, some application with configuration.
Let's then see how could we implement this use case first, let's create here a new file.
We are going to call it configured.
Yes.
And this is going to contain our application with configuration.
Let's start first by defining here an object type, and it's going to define what the application configuration
contains.
Let's say that we have here an epidural property, which is a string.
These would contain the Eurail of our back in Epper.
That would point either to a test environment or to the production environment.
Let's say also that our application has some caching involved.
Let's say that we get here a certain amount of courses we're going to define here the size of the cache.
We are going to create the property called course cache size, and we are going to make it a number.
So now we have here the definition of our application with configuration.
Let's create an instance of this type.
We are going to create here a constant that we are going to call AB config and we are going to assign
it here.
The application config type.
We are going to define here the values of these properties.
Let's start with the EPA, Eurail.
We are going to point these to localhost 9000.
And let's define also here the second property course cache says we are going to assign it the value
of ten.
Now, let's take this plain JavaScript objects and let's make it injectable in our application.
We are going to define for that an injection token.
So as we know, everything that gets injected anywhere on an angular application has an associative
injection token.
So we are going to define here our token.
We are going to define it as a constant and we are going to call it the config token.
We are going to instantiate the class injection token and we are going to pass it a parametric type.
So the parametric type is the type of the thing that is getting injected.
So it's our application config object.
Let's also add here a unique string that uniquely identifies this token.
We are simply going to call it config tokin as well.
Now, let's add this token to the dependency injection system.
Let's, for example, use here our application route component and let's have here our dependency injection
provider.
We are going to use here a configuration object.
We are going to see that we are providing this particular config token and we are going to provide here
the value that is getting injected.
We could use a factory method in order to create a function that would return the config value immediately.
So this would look something like this is a function with no dependencies that simply returns the value
of our application config object.
And with this, we have configured our provider.
Let's try this out.
Let's first remove here a couple of logging statements that would otherwise pollute the console log.
And let's inject here our global configuration object.
So we are going to define here a private variable.
It's going to be a variable named config with this type here app config.
Let's have here some logging to see if this is working correctly.
We are going to print to the console the configuration object.
Now, if we try this out without further modifications, we are going to see that we are going to get
an error and our application is going to crash reinspect here to the console.
We are going to see that we cannot resolve all the parameters for this constructor here.
So somehow the dependency injection system can't find what token to associate to this app config type.
And that is because we have defined here our token as being of type, config, token.
In this case, because Akinfeev is an object type and not a typescript class, we cannot use it as a
dependency injection token.
These interface type cannot be used as the unique GI of a given injectable in our dependency injection
system.
That's because the interface does not actually exist at runtime.
It's a compile time construct only.
So in order to specify the token that we need, we are going to need the inject the character that we
have used before.
So if we now try this out, we are going to see that this time around our configuration object gets
correctly injected.
The application is up and running again.
And we have here on the console the global configuration object correctly printed out to the screen.
As we can see, the object decorator is.
Useful in these cases where we cannot use a class as a dependency injection token, in those cases,
we need to specify the token here manually using the inject decorated.
Now, another nice feature here of our provider.
We have created here a factory method that simply returns our configuration object.
We can instead use another property that is available here, which is called use value.
So if we pass in here our application config object, this is going to be the value injected.
Whenever this token gets requested.
Let's try it out so we can see our application is still working correctly.
And if we check here the console, no errors occur in our configuration object is still being correctly
injected as expected.
Now notice the following.
This provider that we have written here, as we have learned before, is not three Shakal.
This means that if we remove here this dependency from the application and we reload the application,
these token configuration object is still getting added to the application bundle.
Let's quickly confirm that we are going to switch here to a larger window and we are going to open here
the dev tools not on the console there, but on the source system.
We are going to quickly inspect here the main Dotty's bundle, which contains our application code.
So as you can see, if we scroll down, we're going to see that our application configuration object
and the configuration token are still getting included here in the application bundle, even though
these are not being injected anywhere.
If you cannot find them here at the beginning of the bundle, you can use here defined search box,
you should search for config, underscore tokin.
The type of the configuration object, which is app config won't be found anywhere in the bundle.
This is a compile time construct only.
Now let's refactor our provider and make it three checkable.
We are going to remove here this configuration object and we're going to delete here the provider's
property in order to make this token three.
Shakiba, we are going to use here this second optional argument here.
In the token definition, we are going to start by specifying here the provided in property are going
to see that this is a global injectable.
It's a singleton.
It's the same instance in the whole application.
And we're going to specify here the factory function.
So this factory function is not going to have any elements and it's going to return directly our application
config with this in place, if we know relo of our application and we expect, again, the application
bundle, we are going to see that we have no occurrences of the application global configuration object.
This was not included in the bundle this time around, which is exactly what we wanted.
So these injectable is still available if we need it.
So if we included here, for example, let's inject here again the application configuration object
and let's add here the inject the creator and let's bring it here to the console to make sure that it's
indeed getting correctly injected.
If we try this out, we will see that the application is still working as expected.
And the respect here, the application in the console, we are going to notice the global configuration
object is being correctly injected.
So no errors occurred here in the sources there.
If we expect here our main bundle, then we are going to see that the configuration object and the configuration
token have been this time around included in the bundle.
So this is the big benefit of three Shakal providers.
These services are only included in the bundle if they are injected, otherwise they will not be included
in the bundle.
So we will have a smaller bundle and a more performance application.
Let's now continue our deep dive into angular dependency injection.
We are now going to cover certain dependency injection decorator's that are used in special cases.