WEBVTT 00:03.670 --> 00:05.170 Hey, did everyone had their share? 00:05.170 --> 00:09.280 And in this video we're going to learn that how we can actually break our application into different 00:09.280 --> 00:13.210 components, routers, controllers and a whole bunch of other things. 00:13.210 --> 00:17.110 We have seen kind of a basics of it, but now I'm going to introduce you to the router, which is one 00:17.110 --> 00:19.960 of the most easiest concept throughout the course itself. 00:19.960 --> 00:21.820 So let me first walk you through now. 00:21.820 --> 00:25.900 First, we are going to go into the controller itself and we're going to create a new file into controller. 00:25.900 --> 00:28.510 I'm going to call this one as home controller. 00:28.510 --> 00:31.270 DOT Geez, feel free to name it whatever you like. 00:31.510 --> 00:36.610 Usually I tend to use the controller at the end of the name of it, not really compulsory and feel free 00:36.610 --> 00:38.710 to just change however you like to that. 00:38.980 --> 00:42.730 Now one thing that is pretty common in that is directly use the export statement. 00:42.730 --> 00:46.150 You want to export all of the data that is coming up into the controller. 00:46.150 --> 00:51.610 So every single method is being returned like export this, export that so that you can directly import 00:51.610 --> 00:52.030 that. 00:52.030 --> 00:55.180 Some people prefer to actually not export like this way. 00:55.180 --> 00:59.980 Some people like to create an index file into controller and export all of that, all of these methods 00:59.980 --> 01:03.850 from there, again, different strategies, but everything works here. 01:03.850 --> 01:08.380 So I'm going to call this one as exports dot and I'm going to call this one as simply home. 01:08.380 --> 01:10.960 This method can be named as anything, whatever you like. 01:11.110 --> 01:13.150 And further down the road, it's really simple. 01:13.150 --> 01:17.860 We're going to go ahead and say, hey, it accepts a request and response and further down the road 01:17.860 --> 01:19.240 it just goes like that. 01:19.840 --> 01:23.470 And what else do you want to do here, however you want to handle the response? 01:23.470 --> 01:26.590 In my case, I'm going to go ahead and say, hey, resort JSON. 01:26.590 --> 01:28.510 Let's also raise a status. 01:28.660 --> 01:32.260 So resident status, there we go. 01:32.260 --> 01:36.640 And I'm going to go ahead and say, hey, this is a 200 status and I'm going to go ahead and say JSON 01:36.640 --> 01:44.230 just like this, let's pass on a success message of true and let's also pass on a greeting as well. 01:45.540 --> 01:49.890 And that would be a simple greeting. 01:50.700 --> 01:51.690 That is going to be. 01:51.960 --> 01:53.670 Hello from API. 01:53.880 --> 01:54.600 That's it. 01:54.690 --> 01:55.140 Okay. 01:55.350 --> 01:56.980 Can we add more of this stuff here? 01:57.000 --> 01:58.850 Like, can we import models and all of that? 01:58.860 --> 01:59.430 Yes, of course. 01:59.430 --> 02:00.840 In fact, we will be doing it. 02:00.840 --> 02:06.000 But usually the exports looks like this really compact, really easy, and usually a trend to keep them 02:06.000 --> 02:08.130 short here so that I just know the name of it. 02:08.130 --> 02:11.490 And when I need to see the internal functionality, I can go ahead and do that. 02:11.490 --> 02:14.580 So that's basic your controller itself. 02:14.610 --> 02:16.560 The next come up is the root. 02:16.560 --> 02:18.930 So we're going to create a simple new route. 02:19.080 --> 02:20.790 This one is going to be right for home. 02:20.790 --> 02:25.080 So I'm going to go ahead and right click a new file into this one and I'm going to be calling this one 02:25.080 --> 02:26.760 as home JS. 02:26.820 --> 02:32.880 Now this home to us is going to be responsible for handling all of the routes that come at a home page, 02:32.880 --> 02:33.870 which will be slash. 02:33.870 --> 02:36.660 So again, it's up to you how you want to handle that. 02:36.660 --> 02:38.370 This is my way of handling this. 02:38.520 --> 02:42.660 What we are going to need this one we need actually express to have in this route. 02:42.660 --> 02:48.840 So we're going to go ahead and say, hey, I need Express and that Express is going to come up from 02:48.870 --> 02:51.600 require and express. 02:52.140 --> 02:55.200 Now, the good news is for the router, you don't need to install any other package. 02:55.200 --> 03:00.360 Router is actually a default package from the express itself, not package, but a functionality. 03:00.360 --> 03:04.560 So we're going to go ahead and say, hey, I want to have a router and this router will be given to 03:04.560 --> 03:07.490 me by express dot router. 03:07.500 --> 03:08.280 There we go. 03:08.610 --> 03:09.640 Just like that. 03:09.660 --> 03:14.310 Now, once you have this router up and running, the very first thing that you should do always is export 03:14.310 --> 03:14.490 that. 03:14.490 --> 03:19.380 So we're going to go ahead and say module exports and we want to export this router. 03:19.380 --> 03:21.510 Now, whatever you do in between, that's up to you. 03:21.540 --> 03:27.030 Now, in my case, I want to go ahead and say, hey, router, you will be having a route being defined. 03:27.030 --> 03:28.170 So what is this route? 03:28.170 --> 03:33.750 The first parameter is that that will be slash and again, it can be many of these routes like slash, 03:33.750 --> 03:34.860 log in and all of that. 03:34.860 --> 03:35.790 We will be doing that. 03:35.790 --> 03:39.270 But this is a route which will be handled on to just the slash itself. 03:40.560 --> 03:43.830 Now, further down the road, I'm going to go ahead and put up a dot. 03:43.830 --> 03:48.270 Now, in this dot, you can add whatever the method that you want to chain on. 03:48.360 --> 03:51.150 We saw that earlier, get, post, delete. 03:51.150 --> 03:52.320 All of them are available. 03:52.320 --> 03:54.690 In our case, we'll be working on just the get. 03:54.690 --> 03:58.470 But the question is what happens when somebody visits this home route? 03:58.470 --> 04:00.960 Why are the get verb or get method itself? 04:00.990 --> 04:03.180 Now this is where you bring in your controller. 04:03.180 --> 04:06.570 So I'm going to go ahead and say, Hey, I want to bring some methods from the controller. 04:06.570 --> 04:12.870 So I go ahead and say, Hey, I want to bring something that will be coming up from one directory back 04:13.830 --> 04:16.440 and it's, it's not really looking like happy. 04:16.440 --> 04:16.740 Yep. 04:16.740 --> 04:18.060 Not from my bad. 04:18.480 --> 04:25.530 We're going to go ahead and say require just like that one directory back I want to go into controllers 04:25.530 --> 04:28.440 and in the controller there is just one file which is home controller. 04:28.440 --> 04:30.900 What is the name of the method in the home controller? 04:30.900 --> 04:32.130 We just call it as home. 04:32.130 --> 04:34.830 So let's go ahead and bring the method which is home. 04:34.830 --> 04:38.850 That's how we do it and that's how we will be doing all ways further down the road. 04:38.850 --> 04:40.620 You just pass on this method up here. 04:41.160 --> 04:45.210 So I hope you can understand a little bit sense of how we are breaking down the application. 04:45.210 --> 04:50.640 The functionality part goes into home controller itself or anything that you name that controller. 04:50.640 --> 04:54.330 This home JS is inside the root, which is responsible for that. 04:54.330 --> 04:57.900 Okay, if somebody visits this slash, it will get on. 04:58.080 --> 04:59.880 This will be executed on the home. 04:59.880 --> 05:02.010 So this will be handled by the home method itself. 05:02.100 --> 05:07.140 But this is not all this is not all since we have broken down the application. 05:07.140 --> 05:12.120 Now the functionality says that if you want to use that, you need to use this as a middleware. 05:12.120 --> 05:15.180 So let me walk you through with the documentation of Express as well. 05:15.180 --> 05:22.170 So we're going to go ahead and say, hey, express, let's go to documentation and let me search for 05:22.200 --> 05:22.500 that. 05:22.500 --> 05:26.280 And we're going to go ahead and say, hey, I want to get information on the router itself. 05:27.600 --> 05:29.150 And this is how we use it. 05:29.160 --> 05:33.750 So once we have done all of this breakage part and all of that, they actually mentioned this quite 05:33.750 --> 05:34.770 in detail, in depth. 05:34.770 --> 05:39.660 But what they mentioned further down the road is now you have to use this router to use functionality 05:39.660 --> 05:42.000 and the next part and router, dot get and all of that. 05:42.300 --> 05:46.560 Again, this can be a little bit tricky, but let me actually make it easier for you. 05:47.040 --> 05:48.810 This is the one that you should be reading up. 05:48.810 --> 05:52.830 So come up here into router use and try to read that in case you want to use that. 05:53.070 --> 05:59.670 Okay, let's come back on to app dogs because this is exactly where things are going to be really, 05:59.670 --> 06:01.340 really in control for us. 06:01.380 --> 06:05.010 So what we need to do is first we need to bring up the roots and only roots. 06:05.010 --> 06:09.360 We don't bring in controllers here because controllers need to go into the roots. 06:09.900 --> 06:11.850 So we bring in just the roots here. 06:11.880 --> 06:15.930 So I'm going to go ahead and say import all routes here. 06:16.320 --> 06:16.790 Okay. 06:16.800 --> 06:19.260 Let's go ahead and say I want to bring in the roots. 06:19.260 --> 06:21.870 So let's call this one as a home. 06:22.680 --> 06:27.110 And that will be coming up from require. 06:27.930 --> 06:35.790 Let's go ahead and say I want to go I directly want to go inside the directory, which is roots and 06:35.790 --> 06:37.290 inside that we have home. 06:37.590 --> 06:37.840 Okay. 06:37.860 --> 06:41.880 So you can call this one whatever you like, but this is how we are going to be doing this. 06:42.210 --> 06:44.380 Now, I'll add another comment for you. 06:44.400 --> 06:46.890 Router middleware. 06:47.910 --> 06:48.300 Yes. 06:48.300 --> 06:51.360 This is how exactly router actually goes on work with you. 06:51.570 --> 06:57.930 So for any middleware, we use app use majorly and we're going to go ahead and say that whatever the 06:57.930 --> 06:59.010 route you are going in. 06:59.010 --> 07:01.380 So I'm not notice this very carefully. 07:01.380 --> 07:09.420 I'm going to go ahead and say that you should be going on to slash API, slash V one and then. 07:10.230 --> 07:13.110 We go ahead and inject this home. 07:13.500 --> 07:16.140 So what this means, listen very carefully. 07:16.140 --> 07:23.460 When you go on to slash API, slash V one, then just move into this home root and he will take care 07:23.460 --> 07:24.860 of whatever happens next. 07:24.870 --> 07:30.030 So as soon as I save this, as soon as somebody reaches to this one, then the home will take the control. 07:30.060 --> 07:34.500 Now, home will tell you that you have different routes to work on, that you have a slash, maybe you 07:34.500 --> 07:37.140 can have a slash login, you can have a slash register. 07:37.140 --> 07:41.700 And on these different routes this function will execute, which is home. 07:41.700 --> 07:43.170 Now what will home say? 07:43.170 --> 07:45.240 We need to go back into the home controller. 07:45.240 --> 07:49.710 So home controller will say that success is true and greeting is hello from API. 07:49.740 --> 07:52.590 So this supposed to work in the theory itself? 07:52.590 --> 07:56.340 Let's go ahead and test it out as well because we might have made some mistake up here. 07:56.460 --> 07:58.980 So this is API slash, v1 slash. 07:58.980 --> 08:00.270 So this is the home root. 08:00.300 --> 08:07.200 Let's go into local host 4000 remember slash API slash v one slash. 08:07.200 --> 08:07.860 That's it. 08:07.860 --> 08:11.310 That's all the root we have and we are able to see this success. 08:11.310 --> 08:14.160 True greeting and hello from API very carefully. 08:14.160 --> 08:16.860 Notice one thing why we are doing all of this. 08:17.370 --> 08:21.960 First, let just say in this home root itself, I want to get more control of this. 08:21.960 --> 08:25.080 So I want to say slash login so I can go ahead and say slash login. 08:25.080 --> 08:30.840 So now my obviously my root will change up here instead of somebody saying slash API, slash V1, he 08:30.840 --> 08:33.480 cannot actually now he will see nothing here actually. 08:33.480 --> 08:36.870 Now he needs to go into slash log in and then he'll say this. 08:37.230 --> 08:38.550 That is very understandable. 08:38.550 --> 08:43.710 Let's go back onto the slash and also go back up here a little bit there. 08:43.720 --> 08:49.320 Hit, reload and we are getting this now the reason why actually a lot of big application like to do 08:49.320 --> 08:51.300 this because it gives you a lot of control. 08:51.330 --> 08:57.060 Instead of doing all that thing and changing the entire application, every single place you can right 08:57.060 --> 08:59.940 your controller by one team, you can write your routes as well. 08:59.940 --> 09:05.310 And one guy who is integrating all these API or packaging them up together, he can just import all 09:05.310 --> 09:10.680 the routes and then change that that this is now not V1, this is actually now version two of the API. 09:10.680 --> 09:15.870 So you can immediately define and you have so much of control that you will see nothing on this version 09:15.870 --> 09:20.190 one and just with at a single place you have changed the entirety of the application. 09:20.190 --> 09:24.600 Now everything is available on the root, which is version two, and that is the reason. 09:24.600 --> 09:28.710 Having more control is the idea that we want to break our application. 09:28.710 --> 09:32.910 I'll switch it back to version one because that's exactly what we are doing and that's exactly what 09:32.910 --> 09:33.750 we wanted to do. 09:33.750 --> 09:35.430 So I hope you are able to do this. 09:35.430 --> 09:40.320 I will create just one more root to so to see that, yeah, this is how it actually works and this is 09:40.320 --> 09:41.670 how it's going to make sense. 09:41.760 --> 09:42.300 Okay. 09:42.930 --> 09:47.820 So I'm going to go into home controller again just one more time and we'll be doing this so many times. 09:47.820 --> 09:50.940 You go ahead, copy this controller, paste it up here. 09:50.940 --> 09:55.560 And this time you go ahead and say that home are dummy. 09:55.560 --> 09:59.040 This is really a dummy root that we're going to create. 09:59.040 --> 10:00.210 Success is true. 10:00.210 --> 10:08.430 And this time we're going to say that this is another dummy root notice here. 10:08.700 --> 10:10.350 First time it took us a lot of time. 10:10.350 --> 10:12.090 Now this time we just changed this one. 10:12.090 --> 10:14.160 Whatever we wanted to write, we did that. 10:14.250 --> 10:18.240 After that we go into home and we say, Hey, we got another method up here. 10:18.240 --> 10:19.860 We call this as home dummy. 10:19.860 --> 10:20.910 You imported that. 10:20.910 --> 10:25.680 You simply go ahead and duplicate this line and you go ahead and say, Hey, now this time, if somebody 10:25.680 --> 10:29.640 says slash dummy, this will be handled by home dummy. 10:29.670 --> 10:30.480 There we go. 10:30.510 --> 10:33.330 That's how crazy fast this actually becomes. 10:33.330 --> 10:36.000 Do we need to do anything here in the edges? 10:36.570 --> 10:37.170 Probably. 10:37.170 --> 10:39.270 We need to make all of this. 10:39.360 --> 10:40.830 Here is something interesting. 10:40.830 --> 10:42.510 Now, we don't need to change anything. 10:42.570 --> 10:47.460 The reason why I'm saying you, because notice here, this is not a controller, this is a root. 10:47.460 --> 10:54.570 So anybody who visits this API slash V one, then further down the road, some of these routes are being 10:54.570 --> 10:56.130 controlled by the home itself. 10:56.130 --> 11:00.120 And this will get much more clear as we move on and have a little bit more complexity. 11:00.120 --> 11:01.530 But this is the basics of it. 11:01.530 --> 11:03.240 You can break it as much as you like. 11:03.240 --> 11:05.040 You can just keep it as it is here. 11:05.040 --> 11:06.300 I don't have to change anything. 11:06.300 --> 11:09.210 I just have to bring the entirety of the home and that's it. 11:09.330 --> 11:11.280 Now let's go ahead and see this in action. 11:11.280 --> 11:16.200 So we're going to go ahead and see this as the V one and we get hello. 11:16.200 --> 11:19.050 And if I go ahead and hit a slash, the same thing. 11:19.050 --> 11:26.280 If I go ahead and say that this root was I forgot my bad this throughout we were calling it slash dummy. 11:26.310 --> 11:26.880 My bad. 11:27.730 --> 11:33.850 So let's go here and we're going to go ahead and say dummy and notice here we get this is a dummy route. 11:33.940 --> 11:39.130 Again, obviously, we will not be checking all of these routes directly from the web application or 11:39.130 --> 11:39.670 the browser. 11:39.670 --> 11:42.730 We will be checking them through the postman and we'll be creating all of that. 11:42.730 --> 11:46.680 But before moving that, we need to provide some of the configuration here in the app. 11:46.870 --> 11:52.360 Just remember, we will be having files cloud, ordinary body parser, cookie parser, even. 11:52.360 --> 11:55.030 Morgan So we need to do a lot of configuration up here. 11:55.030 --> 11:57.580 So let's go ahead and do that in the next video.