Currently which is not showing anything because
no user is logged in and the contact page, just like before.
So to log in, let me log in as a user and then I will be typing
in my username and a password here,
and then once I log in then you'll be able to see that when I go to My Favorites,
the Favorites of this particular user will be displayed here.
Just like before, we can type comments and then submit comments,
and then also add items to the favorites and so on.
All the functionality that you have seen with the earlier versions of
the Angular application are also supported in this version of the Angular application.
Also for your LoopBack server to be able to serve up images,
all this data will be stored in your server code in the client folder of the server code.
So, in the client folder of my LoopBack server,
notice that I have created this sub folder
named images and then stored all the images into the subfolder.
Now, in order for these images to be served and also for
the client folder to be used as the public folder for my LoopBack server,
then in a couple of changes that I need to make to my LoopBack server.
Now, the first thing that you need to do is,
go into the boot folder and in the boot folder,
you would see this root.js file here,
which contains this information here.
Now, you can either delete the root.js file
or simply rename the root.js file to something else.
So here, you see that I have renamed this file to root.jsold with the extension jsold.
Now, this file should not contain the.js extension anymore.
So, anything other than the.js extension is fine.
So, what this means is that in this case,
my LoopBack server, when it starts up will not execute the code in this folder.
Now, when you look at the code in the root.js file which was configured earlier,
you saw that the router was configured such that,
when you access the slash which is the root folder of your servers,
then it will simply serve up the servers LoopBack status and indeed,
that is what we saw our LoopBack server serving up
the uptime and the last restarted time for our server.
We don't want it to do that,
instead we want our LoopBack server to be able to use whatever we
put in the client folder as the public folder and so
any client application can be deployed to
the client folder of my LoopBack server and should be
accessed when we access the LoopBack server at its standard slash end points.
So, that is the root of the server folder.
So, to do that, first thing that you need to do is to
change this root.js files name to root.
for example, you can just simply rename that to
root.jsold or you can just delete that file.
That file will not be needed in this version of my LoopBack server.
Now, not only that,
the second part that you need to reconfigure is to go into the middleware.json file here.
The middleware.json file.
In the middleware.json file,
if you scroll down,
you will see that in here,
originally this will just simply contain files: and then an empty a brace here.
Now, into that empty brace here,
just add this code here,
which says loopback#static and it says params$!../client.
So, this will indicate to my LoopBack server
that the client folder that is available here
should be used as the static public folder for my LoopBack server.
So, anything put in the client folder can be accessed from my server.
So, this is the additional change that you need to do to the middleware.json file.
So, once you do these two changes,
then your LoopBack server will be all configured to serve up the data including
the images which you're going to put into
the images subfolder under the client folder here.
So, make sure to copy the images into the client folder here and the second one is to
go to the middleware.json file in the server folder,
and then update this part.
Once we do that, then these images can be accessed by simply accessing
the /images/ the image file name to access
these images because our dishes,
leaders, and the promotions will require this image files and
so that will be available for us from
the LoopBack server and also whatever you put in the client folder.
So for example, you can prepare the distribution folder
for your Angular application and simply copy
the entire distribution folder contents into the client folder here,
and then if you access the LoopBack server at
its standard root endpoint
then your Angular application will be automatically served up by your LoopBack server.
So, these are the two changes that you need to make to your LoopBack server.
Of course, you must be curious about how exactly is this SDK built,
where exactly is this SDK and how am I actually
going to make use of it within my Angular application.
So, to do that, let's go to our Angular application and in the source folder,
under source app folder,
now when you open the shared folder,
you would see that there is a subfolder here named SDK and inside this SDK subfolder,
you'll find a whole bunch of files here,
lb.config.ts, index.ts and within the storage sockets,
the services, and inside the service,
you have custom services and core services here,
and the various models that are deployed here.
The models actually contain the model structures
for our various models that we're implementing.
Now, this is the LoopBack SDK.
This code is automatically built for you and if you want to,
you can simply go in and then
pass through these files to just see what is available there.
Make sure not to modify any of the files in
this SDK subfolder because this is
automatically built for you by the Loopback SDK Builder,
and this will contain everything configured so that
your LoopBack server can be accessed from your Angular application.
The services that I'm going to make use are all available in here.
Now, how do we make use of this?
So, to help you understand how we make use of this,
let's visit our home component and then see how the home component is now update.
So, when you go to the home component,
you will notice that I am now importing dishes from../shared/sdk/models.
So, this is the models that is automatically exported into
the SDK by my Loopback SDK Builder.
So, this is where my dishes model will be defined there.
So, I'm just going to leverage the dishes model.
Similarly, the service itself is available as this DishesAPI,
as you can see here and this DishesAPI is in the../shared/sdk/services folder here.
Similarly, the promotions and the promotions API,
and leaders and leaders API.
So, these are all built automatically for me by the Loopback SDK Builder.
Now, then you go into the code,
you will now notice that I will declare the dish as dishes,
promotion as promotions, and leader as /leaders.
These three are the models that are exported by the Loopback SDK Builder.
Also notice how I have reconfigured the three services here.
Now, my dish service is referring to dishes API,
promotion services referring to promotions API,
and leader service to API leaders API,
and also notice how I access the dish service here.
So, I'll say this dish service find one and where featured equal to true.
So, this is where you recall that in my LoopBack rest API Explorer,
I had typed this into the filter there,
then I tried to find the dishes there.
So, that is exactly what I'm doing here also in my code here.
So, this findOne, then supplied with this,
will find one item and then return that here,
and then that I am assigning each to this dish here and
the rest of my Angular application works exactly the same way as before.
Now, also notice that in the constructor,
note how I have configured this called the LoopBack config.
Now, to do the LoopBack config in every component that you are making use of,
you need to import this LoopBack config from this shared SDK folder here and also,
this API version that I declare.