1 00:00:00,330 --> 00:00:05,880 In this video, let's try to understand what exactly present inside this up project and what kind of 2 00:00:05,880 --> 00:00:12,750 features of Anglet that we're using so that we are establishing a connection from you were to back in 3 00:00:12,750 --> 00:00:15,070 the services that we have built further. 4 00:00:15,480 --> 00:00:20,940 So this is a structure of the project that you can see inside your visual studio. 5 00:00:21,240 --> 00:00:28,500 And there is a components folder where we have created components for each and every functionality, 6 00:00:28,500 --> 00:00:34,950 like one is for accountability and balance related cards, contact dashboard header loans. 7 00:00:35,100 --> 00:00:41,730 So all the possible functionalities that we have inside our application, we build the components associated 8 00:00:41,730 --> 00:00:46,590 to them and we maintain that modularity inside our project. 9 00:00:46,740 --> 00:00:54,880 The beauty of the angler is maintaining the modularity of your other application in terms of components. 10 00:00:55,110 --> 00:00:59,420 That's where we have greater components for each and every functionality. 11 00:00:59,670 --> 00:01:05,340 And at the same time we have a model which is like indicating the data that we are trying to transfer 12 00:01:05,340 --> 00:01:07,400 between us to back in. 13 00:01:07,860 --> 00:01:09,630 And we also have services. 14 00:01:09,780 --> 00:01:18,150 Services is a layer where we will make an historically P request to the backend and take the response 15 00:01:18,570 --> 00:01:25,830 which will be passed on to the components from components that will be binde to your estimate pages 16 00:01:26,040 --> 00:01:30,840 so far that so to understand at a high level, what is this application about? 17 00:01:30,960 --> 00:01:36,660 I would always recommend you to go to the first the constant page about constant Artigas. 18 00:01:36,810 --> 00:01:41,800 So if you see here, these are the services that we have built in the backend application. 19 00:01:41,820 --> 00:01:48,060 So obviously if you want to understand how this communication is happening, you have to backtrace using 20 00:01:48,060 --> 00:01:54,300 this constant very first thing that user will try to do inside my application is to login so far that 21 00:01:54,450 --> 00:02:01,910 I had to call this user, which will perform my authentication and authorization of the user. 22 00:02:02,070 --> 00:02:06,090 So I will take this and I will touch my workspace. 23 00:02:06,270 --> 00:02:13,200 And you can see what and is being called from the login service Dorothea's. 24 00:02:13,380 --> 00:02:20,430 So as I was saying, services are used to make a call to your back and services here. 25 00:02:20,790 --> 00:02:28,290 I'm trying to make a get request, which is environment that Ruparel is something where our backend 26 00:02:28,290 --> 00:02:30,030 application has been hoster. 27 00:02:30,210 --> 00:02:36,410 So in this scenario by backend application is hosted at eight zero eight zero four and posts that we 28 00:02:36,420 --> 00:02:39,910 are also pending the airport specific to login. 29 00:02:40,200 --> 00:02:47,310 So here you can see we are passing the user details that we received from the UI login page, which 30 00:02:47,310 --> 00:02:56,460 will how all those email and password using this email and password, my back end will validate and 31 00:02:56,460 --> 00:02:57,890 will return the response. 32 00:02:58,290 --> 00:03:06,980 So as you can see, this is just a invocation to the back and Apapa, but this function will be called 33 00:03:07,140 --> 00:03:12,060 inside from our component sorting function and search again. 34 00:03:12,360 --> 00:03:19,200 We will go to the login component and you can see here from the service, we are calling this function 35 00:03:19,380 --> 00:03:25,220 with the model that we have received from the UI and we are subscribing to that. 36 00:03:25,350 --> 00:03:30,540 So, as you know, in ANGULAR, we can make our calls as asynchronous. 37 00:03:30,750 --> 00:03:36,690 That's where we have to subscribe to them in order to get execute those services invocation. 38 00:03:36,720 --> 00:03:44,340 So once we have that response, we take the response and we are saving the user details inside of storage 39 00:03:44,490 --> 00:03:46,830 and local storage, whatever we call. 40 00:03:47,010 --> 00:03:53,970 And this user details can be used anywhere inside our application by getting from the station storage 41 00:03:54,240 --> 00:04:00,810 wars that we are navigating that of the successful authentication to the dashboard, which otherwise 42 00:04:00,810 --> 00:04:01,830 will throw an error. 43 00:04:02,070 --> 00:04:05,160 So this is how log in of the application is working. 44 00:04:05,160 --> 00:04:10,690 And you can also ask me, like from where this valid user function inside the company is being invoked. 45 00:04:10,950 --> 00:04:13,250 You can always search for that function also. 46 00:04:13,440 --> 00:04:18,450 And it will take us to the admin page inside this page. 47 00:04:18,450 --> 00:04:26,640 You can see on submit of the form, this function will be called along with the form that you want is 48 00:04:26,640 --> 00:04:27,820 associated with it. 49 00:04:28,020 --> 00:04:34,020 So now we are clear how the login of the application is open and once the user is on the dashboard, 50 00:04:34,170 --> 00:04:40,940 he can click on various buttons like one needs to get his account detailed, balance details, known 51 00:04:40,950 --> 00:04:42,510 details, card details. 52 00:04:42,810 --> 00:04:47,490 And we also have nonsecular parts like contact and notices. 53 00:04:47,640 --> 00:04:50,540 So what we can do is we can backtrace these things. 54 00:04:50,550 --> 00:04:57,570 Also, I'm trying to search these and you can see is a dashboard service that exists, which I have 55 00:04:57,570 --> 00:04:58,620 written here. 56 00:04:58,630 --> 00:04:59,880 We have all kind of. 57 00:04:59,990 --> 00:05:05,640 Methods associated that user can be performed apart from the logging of the page. 58 00:05:06,020 --> 00:05:10,700 So here you can see get account details, will the user details. 59 00:05:10,830 --> 00:05:14,540 And this is a post which is happening to the backend service. 60 00:05:14,840 --> 00:05:18,410 And we are seeing whenever and getting a response. 61 00:05:18,420 --> 00:05:22,130 I needed to respond to not only the body or not only the header. 62 00:05:22,400 --> 00:05:28,610 I just need the entire response that why we are mentioning these absol response and with credentials, 63 00:05:28,610 --> 00:05:31,190 Trumans with the logging has already happened. 64 00:05:31,310 --> 00:05:35,770 So I'm just saying my angler application should send that key. 65 00:05:35,930 --> 00:05:44,420 What key are data blue token key that is written from my back and so that my subsequent operations in 66 00:05:44,420 --> 00:05:48,920 the application doesn't need the username and password of the logged in. 67 00:05:48,920 --> 00:05:56,050 Use it and we can see that account details will be called from the component of the account. 68 00:05:56,300 --> 00:05:57,980 That component appears. 69 00:05:58,190 --> 00:06:06,680 And here, as soon as a user click on the button on the UI, this method will be invoked and we are 70 00:06:06,680 --> 00:06:14,510 passing the already stored user details to this back and the EPA and the backend EPA will return all 71 00:06:14,510 --> 00:06:16,200 the account details of the user. 72 00:06:16,340 --> 00:06:23,450 So this is how all the services will be invoked inside this application apart from these. 73 00:06:23,570 --> 00:06:31,670 I also want to show you a of the application, how it happened so you can see here by default, if nobody's 74 00:06:31,670 --> 00:06:33,710 given it will be related to login. 75 00:06:34,190 --> 00:06:36,800 Login is associated with this component. 76 00:06:36,800 --> 00:06:42,980 Contact is with this component like that we have created for each and every part what is the corresponding 77 00:06:42,980 --> 00:06:47,360 component and wherever the parts needs to be secured. 78 00:06:47,510 --> 00:06:55,850 We also provided by having a route God so route Gordon Angular JS will protect those parts based upon 79 00:06:55,850 --> 00:06:56,980 a certain condition. 80 00:06:57,170 --> 00:07:05,450 You can see users can't access my account because it's a secured spot and if someone tried to access 81 00:07:05,450 --> 00:07:09,120 that account without logging in, it will go unchecked. 82 00:07:09,120 --> 00:07:17,020 The logic inside it here is trying to search the user details inside out, sharing stories. 83 00:07:17,180 --> 00:07:23,510 That means if the user is not authenticator or trying to log in, this user details will never be present 84 00:07:23,510 --> 00:07:24,590 in the storage. 85 00:07:24,770 --> 00:07:31,070 And in that case, this will be a null value and it will redirect you to the login page. 86 00:07:31,070 --> 00:07:33,770 So that's the purpose of rule cuts here. 87 00:07:33,920 --> 00:07:40,520 And all the secured parts like dashboard, my account, my balance, my loans, my cards, all these 88 00:07:40,520 --> 00:07:41,210 are protected. 89 00:07:41,210 --> 00:07:43,340 Using this are root cards. 90 00:07:43,700 --> 00:07:52,460 But whereas routes like login contact notices which are doesn't need any protection, they are free 91 00:07:52,460 --> 00:07:56,850 to call these services pages without logging. 92 00:07:56,850 --> 00:08:00,580 And so that's where we have done that routing configuration also. 93 00:08:00,800 --> 00:08:04,320 And one last important that I want to show you is The Intercept. 94 00:08:04,550 --> 00:08:06,890 So this is the intercept that I have written. 95 00:08:07,190 --> 00:08:13,190 This interceptor will be called for each and every request and response that is going to the back end 96 00:08:13,190 --> 00:08:13,690 servers. 97 00:08:14,000 --> 00:08:20,120 So that request will be intercepted and the logic inside this will be executed. 98 00:08:20,330 --> 00:08:26,770 But in the scenario where the user is already logged in and is trying to perform other operations inside 99 00:08:26,780 --> 00:08:33,860 your application, in that scenario, the password will be empty because your backend will clear your 100 00:08:33,860 --> 00:08:35,030 password details. 101 00:08:35,179 --> 00:08:43,010 And for all the further request, it will ask you to pass it token so that when your this code will 102 00:08:43,010 --> 00:08:49,340 not be executed and your ANGULAR is smart enough to pass those token details every time to you are back 103 00:08:49,340 --> 00:08:52,430 in the configurations that we have done inside. 104 00:08:52,430 --> 00:08:55,040 You are all the API invocations. 105 00:08:55,100 --> 00:09:02,450 We said here credentials is equal to true, which means as all the credentials details that we have 106 00:09:02,660 --> 00:09:08,780 received from back and after the successful authentication, this is how are you? 107 00:09:08,850 --> 00:09:10,160 A project works. 108 00:09:10,460 --> 00:09:18,920 And now you also know how the UI and backend has been integrated using services, components and one 109 00:09:18,920 --> 00:09:19,430 step back. 110 00:09:19,430 --> 00:09:26,540 And since the data, all that information will be shown to the user on the Hesterman pages by using 111 00:09:26,540 --> 00:09:33,950 the data binding mechanism in the angular, let's try to start our back and so in the next video and 112 00:09:34,220 --> 00:09:41,300 try to invoke the apples involved inside the application and see what is happening on to you in the 113 00:09:41,300 --> 00:09:42,110 next room by.