services/dish.service file here.
So after adding this now we have done one part of the job.
Now we need to make this service available for our component to make use.
So that is where we will come down to this constructor here.
In this constructor, so
now you see the use of the constructor within our class here.
So in this constructor we will see
private dishService and DishService here.
So this is of the DishService type, so
when you declare this in the constructor, when this component is created,
then this DishService that you have injected into the app module.
When you inject that into the app module,
it'll create one single dishService object.
And that dishService object will be made available to you within your menu
component here.
So now you can then call upon the methods that this DishService provides for
you in order to do the work on your behalf.
So once you put that in there,
now we realize that we no longer have this DISHES constant here.
So I need to somehow fetch this information.
Now this is where I'm going to leverage the service that I have available to me to
fetch the information for us.
Where do we fetch this information?
So, this is where we're going to take the help of this life cycle method called
ngOnInit.
So, when you declare this life cycle method called ngOnInit in your
application, so you see that in the class, you say implements the OnInit.
So the implementation of this OnInit requires you to
implement this ngOnInit method as part of your class here.
So inside this ngOnInit method,
you can now ask the service to fetch this information.
Why is that so?
This life cycle method will be executed
by the Angular framework whenever this component is instantiated.
So whenever this component gets created, this method is going to be executed.
So when that method is executed, then at that point I can go and
fetch the dishes from the dishService.
So I can say dishService, and
then you'll know that you have the getDishes method inside the dishService.
You can invoke upon the method to fetch the dishes for you.
Now when we do this, then the dishes object will be supplied by
the service to us through this getDishes method.
And that can be put into our dishes local variable that we have defined here.
So with this, we complete the update
to all of our application files.
Let's go and take a quick look at the resulting Angular application.
Switching to the browser, you can now see that in the browser the Angular
application renders just like before.
In this version as you have seen, the information about the dishes
is going to be fetched into your component by making use of the service.
The service in turn is going to fetch in this information for you.
Now at this moment we are keeping the service very basic.
The service simply returns this constant value that we have defined here.
Later on, you can imagine that you would be extending the service to go and
fetch this information from the back-end server.
When that happens,
the fetching of information is not going to be instantaneously any more.
That is where we would need the help of promises and
also the reactive JavaScript approach for supporting this delay and
dealing with the delay in fetching the information within our application.
We'll talk about that in more detail in the next module.
For now, our application will run just fine, so you can select any one of
those dishes and the information will be displayed just like before.
With this, we compete this exercise where we learn the basics of Angular services.
And we also saw how we can make use of the Angular service,
within our applications component.
This is a good time for you to do a git commit with the message basic services.
[MUSIC].