In this video, let's try to understand what exactly present inside this up project and what kind of
features of Anglet that we're using so that we are establishing a connection from you were to back in
the services that we have built further.
So this is a structure of the project that you can see inside your visual studio.
And there is a components folder where we have created components for each and every functionality,
like one is for accountability and balance related cards, contact dashboard header loans.
So all the possible functionalities that we have inside our application, we build the components associated
to them and we maintain that modularity inside our project.
The beauty of the angler is maintaining the modularity of your other application in terms of components.
That's where we have greater components for each and every functionality.
And at the same time we have a model which is like indicating the data that we are trying to transfer
between us to back in.
And we also have services.
Services is a layer where we will make an historically P request to the backend and take the response
which will be passed on to the components from components that will be binde to your estimate pages
so far that so to understand at a high level, what is this application about?
I would always recommend you to go to the first the constant page about constant Artigas.
So if you see here, these are the services that we have built in the backend application.
So obviously if you want to understand how this communication is happening, you have to backtrace using
this constant very first thing that user will try to do inside my application is to login so far that
I had to call this user, which will perform my authentication and authorization of the user.
So I will take this and I will touch my workspace.
And you can see what and is being called from the login service Dorothea's.
So as I was saying, services are used to make a call to your back and services here.
I'm trying to make a get request, which is environment that Ruparel is something where our backend
application has been hoster.
So in this scenario by backend application is hosted at eight zero eight zero four and posts that we
are also pending the airport specific to login.
So here you can see we are passing the user details that we received from the UI login page, which
will how all those email and password using this email and password, my back end will validate and
will return the response.
So as you can see, this is just a invocation to the back and Apapa, but this function will be called
inside from our component sorting function and search again.
We will go to the login component and you can see here from the service, we are calling this function
with the model that we have received from the UI and we are subscribing to that.
So, as you know, in ANGULAR, we can make our calls as asynchronous.
That's where we have to subscribe to them in order to get execute those services invocation.
So once we have that response, we take the response and we are saving the user details inside of storage
and local storage, whatever we call.
And this user details can be used anywhere inside our application by getting from the station storage
wars that we are navigating that of the successful authentication to the dashboard, which otherwise
will throw an error.
So this is how log in of the application is working.
And you can also ask me, like from where this valid user function inside the company is being invoked.
You can always search for that function also.
And it will take us to the admin page inside this page.
You can see on submit of the form, this function will be called along with the form that you want is
associated with it.
So now we are clear how the login of the application is open and once the user is on the dashboard,
he can click on various buttons like one needs to get his account detailed, balance details, known
details, card details.
And we also have nonsecular parts like contact and notices.
So what we can do is we can backtrace these things.
Also, I'm trying to search these and you can see is a dashboard service that exists, which I have
written here.
We have all kind of.
Methods associated that user can be performed apart from the logging of the page.
So here you can see get account details, will the user details.
And this is a post which is happening to the backend service.
And we are seeing whenever and getting a response.
I needed to respond to not only the body or not only the header.
I just need the entire response that why we are mentioning these absol response and with credentials,
Trumans with the logging has already happened.
So I'm just saying my angler application should send that key.
What key are data blue token key that is written from my back and so that my subsequent operations in
the application doesn't need the username and password of the logged in.
Use it and we can see that account details will be called from the component of the account.
That component appears.
And here, as soon as a user click on the button on the UI, this method will be invoked and we are
passing the already stored user details to this back and the EPA and the backend EPA will return all
the account details of the user.
So this is how all the services will be invoked inside this application apart from these.
I also want to show you a of the application, how it happened so you can see here by default, if nobody's
given it will be related to login.
Login is associated with this component.
Contact is with this component like that we have created for each and every part what is the corresponding
component and wherever the parts needs to be secured.
We also provided by having a route God so route Gordon Angular JS will protect those parts based upon
a certain condition.
You can see users can't access my account because it's a secured spot and if someone tried to access
that account without logging in, it will go unchecked.
The logic inside it here is trying to search the user details inside out, sharing stories.
That means if the user is not authenticator or trying to log in, this user details will never be present
in the storage.
And in that case, this will be a null value and it will redirect you to the login page.
So that's the purpose of rule cuts here.
And all the secured parts like dashboard, my account, my balance, my loans, my cards, all these
are protected.
Using this are root cards.
But whereas routes like login contact notices which are doesn't need any protection, they are free
to call these services pages without logging.
And so that's where we have done that routing configuration also.
And one last important that I want to show you is The Intercept.
So this is the intercept that I have written.
This interceptor will be called for each and every request and response that is going to the back end
servers.
So that request will be intercepted and the logic inside this will be executed.
But in the scenario where the user is already logged in and is trying to perform other operations inside
your application, in that scenario, the password will be empty because your backend will clear your
password details.
And for all the further request, it will ask you to pass it token so that when your this code will
not be executed and your ANGULAR is smart enough to pass those token details every time to you are back
in the configurations that we have done inside.
You are all the API invocations.
We said here credentials is equal to true, which means as all the credentials details that we have
received from back and after the successful authentication, this is how are you?
A project works.
And now you also know how the UI and backend has been integrated using services, components and one
step back.
And since the data, all that information will be shown to the user on the Hesterman pages by using
the data binding mechanism in the angular, let's try to start our back and so in the next video and
try to invoke the apples involved inside the application and see what is happening on to you in the
next room by.