1 00:00:03,820 --> 00:00:05,939 Hello, everyone, and welcome back. 2 00:00:06,010 --> 00:00:12,100 So far in this angular court, of course, we have been focusing on the angular view layered. 3 00:00:12,190 --> 00:00:18,730 These so far has been all about how to build our views using tree of components with different angular 4 00:00:18,730 --> 00:00:19,390 features. 5 00:00:19,480 --> 00:00:22,670 Now, what we're going to talk about is the service layer. 6 00:00:22,810 --> 00:00:28,330 This is the layer that is going to contact the database and that it's going to interact with the view 7 00:00:28,330 --> 00:00:30,670 in order to display data on the screen. 8 00:00:30,730 --> 00:00:35,360 This is now a great time to get a new starting point for our section. 9 00:00:35,380 --> 00:00:40,830 We're going to head over here to the angular niversity repository for this cause, the angular core 10 00:00:40,840 --> 00:00:42,100 deep dive course. 11 00:00:42,100 --> 00:00:45,700 You can scroll down and confirm that you are in the correct repository. 12 00:00:45,730 --> 00:00:48,850 And we are going to head over here to the branch dropdown. 13 00:00:48,970 --> 00:00:49,780 This time around. 14 00:00:49,780 --> 00:00:53,580 We are going to grab this branch, the free services branch. 15 00:00:53,590 --> 00:00:55,030 We are going to click into it. 16 00:00:55,030 --> 00:00:58,030 And now using here the clone or download button. 17 00:00:58,030 --> 00:01:03,610 We can either download this branch as a zip file or we can head over to our idea. 18 00:01:03,640 --> 00:01:07,900 And in our terminal we can switch branches using the following commands. 19 00:01:08,020 --> 00:01:11,590 Check out minus B, let's hear the name of the local branch. 20 00:01:11,590 --> 00:01:17,710 That could be anything, but we are going to give it the same name free that services and we are going 21 00:01:17,710 --> 00:01:21,950 to clone here that free that service is a remote branch. 22 00:01:22,000 --> 00:01:27,610 So once you run these commands, you are going to get the new code for this section once you have the 23 00:01:27,610 --> 00:01:28,600 code installed. 24 00:01:28,630 --> 00:01:31,420 We are going to start here, our front end server. 25 00:01:31,420 --> 00:01:38,140 And it's very important that you started using NPM start and not the end self-command after a moment. 26 00:01:38,160 --> 00:01:40,630 You should have here your program up and running. 27 00:01:40,660 --> 00:01:46,720 Now, before starting with this section, it's important to open a second terminal window and this time 28 00:01:46,720 --> 00:01:50,630 around we are going to run a small EDP backend server. 29 00:01:50,650 --> 00:01:52,810 We are going to do so using the following commands. 30 00:01:52,810 --> 00:01:54,460 NPM run server. 31 00:01:54,460 --> 00:01:58,750 You are then going to see here a new server running on Port 9000. 32 00:01:58,900 --> 00:02:01,010 This is a small Oresteia server. 33 00:02:01,030 --> 00:02:07,690 This is going to allow us to query an actual backend and display the data on the screen using the angular 34 00:02:07,690 --> 00:02:08,919 HTP service. 35 00:02:08,949 --> 00:02:10,900 That's what we are about to do now. 36 00:02:10,900 --> 00:02:16,420 Before going any further, it's important to confirm that your server is working correctly and that 37 00:02:16,420 --> 00:02:20,470 you don't have here a block the port or something similar. 38 00:02:20,620 --> 00:02:26,950 Now, in order to confirm that, we are going to head over here to the port, localhost 9000 and don't 39 00:02:26,950 --> 00:02:31,960 access here the route of the server because there is no route configured and you're going to get the 40 00:02:31,960 --> 00:02:32,680 404. 41 00:02:32,770 --> 00:02:36,850 Instead, we're going to access Agapa courses. 42 00:02:36,880 --> 00:02:43,750 And if you do so, you should get here some Jasen on the screen displaying here a list of courses now 43 00:02:43,750 --> 00:02:48,760 I'm using here a plugin in order to pretty bring the Jasen here on the browser. 44 00:02:48,760 --> 00:02:51,550 But if you are not using it, you are going to get here. 45 00:02:51,550 --> 00:02:54,460 The raw jasen that will look something like these. 46 00:02:54,460 --> 00:03:00,430 In all cases we did not get here a photo for and we have confirmed that our server is up and running 47 00:03:00,430 --> 00:03:00,910 great. 48 00:03:00,910 --> 00:03:05,920 So the next thing that we are going to do is we are going to confirm that the application is working 49 00:03:05,920 --> 00:03:06,610 correctly. 50 00:03:06,610 --> 00:03:12,010 So we are going to refresh here the application and we see that we have here a slightly different starting 51 00:03:12,010 --> 00:03:13,810 point than what we had before. 52 00:03:13,840 --> 00:03:20,050 If we expect here our application component, we are going to see that these data here is not coming 53 00:03:20,050 --> 00:03:21,030 from the back end. 54 00:03:21,070 --> 00:03:27,610 We are still receiving it here from the courses variable, which is simply a hardcoded value here in 55 00:03:27,610 --> 00:03:34,180 our DB data that this file, what we are going to do next is instead of grabbing the data here directly 56 00:03:34,180 --> 00:03:39,730 just from a file, we are going to query this back in that we have running here on the second terminal. 57 00:03:39,730 --> 00:03:44,980 And we are going to grab that data that we saw here in the browser that Jayson and we are going to display 58 00:03:44,980 --> 00:03:46,050 it on the screen. 59 00:03:46,060 --> 00:03:52,300 So we will no longer be using here the courses hardcoded value and our application will be a little 60 00:03:52,300 --> 00:03:55,190 bit closer to what you will see in practice. 61 00:03:55,210 --> 00:04:00,910 Let's then get started with our new Engelhard Services and dependency injection section.