Hello, everyone, and welcome back.
So far in this angular court, of course, we have been focusing on the angular view layered.
These so far has been all about how to build our views using tree of components with different angular
features.
Now, what we're going to talk about is the service layer.
This is the layer that is going to contact the database and that it's going to interact with the view
in order to display data on the screen.
This is now a great time to get a new starting point for our section.
We're going to head over here to the angular niversity repository for this cause, the angular core
deep dive course.
You can scroll down and confirm that you are in the correct repository.
And we are going to head over here to the branch dropdown.
This time around.
We are going to grab this branch, the free services branch.
We are going to click into it.
And now using here the clone or download button.
We can either download this branch as a zip file or we can head over to our idea.
And in our terminal we can switch branches using the following commands.
Check out minus B, let's hear the name of the local branch.
That could be anything, but we are going to give it the same name free that services and we are going
to clone here that free that service is a remote branch.
So once you run these commands, you are going to get the new code for this section once you have the
code installed.
We are going to start here, our front end server.
And it's very important that you started using NPM start and not the end self-command after a moment.
You should have here your program up and running.
Now, before starting with this section, it's important to open a second terminal window and this time
around we are going to run a small EDP backend server.
We are going to do so using the following commands.
NPM run server.
You are then going to see here a new server running on Port 9000.
This is a small Oresteia server.
This is going to allow us to query an actual backend and display the data on the screen using the angular
HTP service.
That's what we are about to do now.
Before going any further, it's important to confirm that your server is working correctly and that
you don't have here a block the port or something similar.
Now, in order to confirm that, we are going to head over here to the port, localhost 9000 and don't
access here the route of the server because there is no route configured and you're going to get the
404.
Instead, we're going to access Agapa courses.
And if you do so, you should get here some Jasen on the screen displaying here a list of courses now
I'm using here a plugin in order to pretty bring the Jasen here on the browser.
But if you are not using it, you are going to get here.
The raw jasen that will look something like these.
In all cases we did not get here a photo for and we have confirmed that our server is up and running
great.
So the next thing that we are going to do is we are going to confirm that the application is working
correctly.
So we are going to refresh here the application and we see that we have here a slightly different starting
point than what we had before.
If we expect here our application component, we are going to see that these data here is not coming
from the back end.
We are still receiving it here from the courses variable, which is simply a hardcoded value here in
our DB data that this file, what we are going to do next is instead of grabbing the data here directly
just from a file, we are going to query this back in that we have running here on the second terminal.
And we are going to grab that data that we saw here in the browser that Jayson and we are going to display
it on the screen.
So we will no longer be using here the courses hardcoded value and our application will be a little
bit closer to what you will see in practice.
Let's then get started with our new Engelhard Services and dependency injection section.