In this lecture, we are going to talk about one of the more bizarre features of angular a called dependency
injection.
First, let's talk about what we need.
We have a service called modal.
Open it in your editor.
Services or objects that can be made available to any component of our app.
In most cases, developers like to store global data in a service.
The mobile service will be responsible for managing our models inside this class.
Let's define our property called visible with an initial value of false.
The property we've created will tell other components of the model should be shown or hidden.
There's only one problem.
We don't know how to expose this property to other components.
Angular has a feature called dependency injection for addressing this problem.
Dependency injection is a programming practice for creating objects.
It's not specific to angular.
If you have experience with object oriented programming, you may have run across this practice.
It's a prevalent technique among languages.
Angular implements dependency injection into a system automated for us.
Dependency injection has two jobs.
The first job is to create an object out of our classes.
The second job is to pass on these objects to our components or classes that need them.
Let me give you an analogy.
One day you might want to go fishing before heading out to the lake.
You will need some equipment, you will need a boat fishing rod and some bait.
We would need to take the time to do research by the equipment and catch some bait.
It's a lot of work.
We need to do a lot of things before we can go fishing.
This is life without dependency injection.
On the other hand, we can rent this equipment from a local shop.
It's a hassle free experience.
We can go fishing right away after we're done fishing.
Other people can use the same equipment.
It's not our responsibility to obtain the equipment.
We simply asked for it, and we're good to go.
This is life with dependency injection.
We can apply this analogy to the programming world.
Whenever we're writing code, we will need dependencies.
Typically, dependencies are defined as classes.
What if we need an instance from a class in JavaScript?
We must constantly create new objects in our components by writing the new keyword.
If the object we're creating has some configuration options, we would need to add them in angular supports
dependency injection.
Therefore, we don't need to create objects ourselves.
They will automatically be created for us.
Angular will manage our dependencies.
If we need a dependency, we can ask angular.
It'll inject B dependency wherever we ask for it.
Enough theory.
Let's see dependency injection in action.
We will be working inside the modal component class.
Inside the constructor function, we will add an argument called modal.
We will annotate this argument with the mobile service class as we type, this class visual studio code
will help the class for us.
I always recommend letting VSC complete our code because it'll automatically import the class.
If it doesn't, that's perfectly fine.
You can always manually import this service after adding this argument.
We will long be visible property.
Believe it or not, this line of code will work.
Let's refresh the browser.
In the developer tools, we will open the console panel, the visible property is being logged at no
point in our code did we create an instance of the mobile service.
Angular created this instance for us and even knew to pass on the instance to our components.
Angular is able to understand our app during compilation, our code runs through the TypeScript compiler
to transform our code into JavaScript.
It's not the only compiler our code runs through.
Angular has its own compiler.
During this process, it's going to look at the constructor functions of our classes.
Angular uses the argument list to scan for dependencies.
The most important part of the constructor function is the type annotations of our arguments.
These annotations give insight into the type of dependencies our class needs.
Based on the annotation, Angular will supply us with the correct instance for our arguments.
In this example, Angular will give us an instance of the modal service.
This entire process happens during compilation after our code is compiled.
The app will be able to run in the browser.
Dependency injection keeps our code clean.
Instead of creating the service, we can ask for it.
Our components never have to worry about creating classes.
They can be supplied with everything they'll need in the following lecture.
We are going to begin talking about how to make a class injectable.