WEBVTT 00:02.430 --> 00:08.850 In this lesson we're going to use the API service that we've just created to modify the home component 00:09.210 --> 00:11.340 in order to get and show. 00:11.410 --> 00:14.100 At least we have the questions in our database. 00:14.100 --> 00:17.040 But before doing that let's clean up our code a little bit. 00:17.040 --> 00:25.110 So I'm going to delete these code and as a consequence I'm also going to delete the L word dot view 00:25.120 --> 00:26.500 component. 00:26.500 --> 00:27.320 Let's also delete. 00:27.340 --> 00:37.270 Example In that view and from inside the router dot sure yes file we need to delete also this path and 00:37.270 --> 00:41.500 of course we also need to delete this import statement. 00:41.650 --> 00:48.850 One more thing that we don't need is the public folder which contains an icon and the index dot HMO 00:48.850 --> 00:51.440 file that is normally used by GSL. 00:51.520 --> 00:55.390 So I'm just going to delete the folder altogether 00:58.920 --> 01:05.820 let's have a look at the server so we see that we have an error here and that's because we are still 01:05.820 --> 01:11.300 importing these components in the home component. 01:11.400 --> 01:20.660 Let's also delete this line and this line and as you see now everything works perfectly. 01:20.970 --> 01:27.620 And if you take a look at that application we see that we can move to about how the home is empty. 01:28.190 --> 01:32.240 Well let's also delete the about component because in fact we do need it. 01:32.240 --> 01:40.120 So first of all the router the G Yes I'm going to delete the input statement and the path 01:43.110 --> 01:51.660 that I'm just going to delete about that view and also very important enough about the view we need 01:51.660 --> 01:55.470 to actually delete or anyway modify this through the link. 01:55.470 --> 02:03.870 So let's just point back to home just to keep the button alive and we can call this that question and 02:03.870 --> 02:06.840 if you never look at it it's changed. 02:07.440 --> 02:17.850 So in our own those view component first of all let's import API service so important API service from 02:18.860 --> 02:26.910 the Common folder and then API that sort of is there is no need to declare the extension of the module. 02:27.180 --> 02:28.380 There's no defined data. 02:29.100 --> 02:34.810 So data which clearly is a function is going to return. 02:35.100 --> 02:38.610 In this case the rate of questions. 02:38.850 --> 02:42.620 So we have these empty array of questions that we can't populate. 02:42.660 --> 02:43.470 Using a method. 02:43.500 --> 02:56.450 So methods we can just call it get questions and yeah first of all let declared a variable let and find 02:56.570 --> 03:03.400 equals API slash questions with his lesson at the end. 03:03.680 --> 03:07.170 This is set in the point to get a list of questions. 03:07.210 --> 03:12.830 Yeah we can now use API service on this endpoint. 03:12.860 --> 03:16.750 No need to pass a method because by default is getcha. 03:17.120 --> 03:26.920 Yeah we can do DNA and we are going to get some data right and we can push it to these questions using 03:27.020 --> 03:38.020 the spread operator so data both results and in case you're wondering why my endpoint looks like these 03:38.250 --> 03:41.410 without any age TTP domain name and so on. 03:41.430 --> 03:44.300 The reason is that using. 03:44.810 --> 03:50.410 That's part of data point it's populated automatically which is very very convenient. 03:50.450 --> 03:52.640 So now we have our question Saturday. 03:52.640 --> 03:57.530 We ever get questions mattered and of course we have our API set of his function. 03:57.530 --> 04:03.200 So the question is how can we make it so that once the home component is requested. 04:03.290 --> 04:08.510 Meaning once the home page is requested questions are loaded at the same time. 04:08.540 --> 04:15.540 So basically how can we call the get questions method as soon as this component is requested. 04:15.740 --> 04:16.780 And yes what is that. 04:16.790 --> 04:20.390 We can do that using lifecycle looks. 04:20.690 --> 04:26.550 We can read that each view is this goes through a series so initialization steps when it's created. 04:26.630 --> 04:34.220 For example it needs to set up date observation compile the template mount the instance to the DOM and 04:34.490 --> 04:38.690 update the DOM when data changes along the way. 04:38.690 --> 04:49.040 It also runs functions called life cycle hooks which allows users to add our own code at specific stages. 04:49.040 --> 04:55.400 For example the created will curve which is the one that you are now going to use it can be used to 04:55.400 --> 04:58.400 rank code after an instance is created. 04:58.400 --> 05:04.820 Considering that we are talking about view instances let's be clear components are reusable. 05:04.820 --> 05:05.960 Viewing instances. 05:05.960 --> 05:12.890 We have a name then we know that if your application consists of a root is this created with a new view 05:13.310 --> 05:18.470 that is optionally organized into a tree of nested reusable components. 05:18.470 --> 05:24.320 So yeah where the documentation suggests that each view easiness goes through a series of initialization 05:24.320 --> 05:24.900 steps. 05:25.190 --> 05:30.380 That's something that is valid for every component of the application and that's the reason why you 05:30.380 --> 05:35.800 can access all these lifecycle looks for each component over application. 05:35.840 --> 05:42.200 We're going to use the several lifecycle looks during this part of the course and I really suggest you 05:42.200 --> 05:47.750 take a look at these life cycle diagram as the documentation suggests there is no need to understand 05:47.840 --> 05:49.640 everything right now. 05:49.740 --> 05:53.570 Maybe you can surely be a very useful reference while developing. 05:53.570 --> 05:59.860 So let's see how we can use the created life cycle look. 06:00.050 --> 06:02.600 It's actually pretty simple. 06:02.930 --> 06:09.440 We can define it as a property of the options object and so inside of these we can just call these dot 06:09.860 --> 06:12.500 get questions. 06:12.540 --> 06:19.490 We can also console log the new value of questions. 06:19.490 --> 06:21.770 We can actually also remove these semicolon. 06:22.130 --> 06:24.310 So let's go back to the browser. 06:26.270 --> 06:37.390 Let's go to inspect console and you'll see did we get an error because you're should have been get as 06:37.590 --> 06:40.510 a stranger and actually yeah. 06:40.650 --> 06:43.950 We also need to use these questions. 06:44.700 --> 06:49.850 So let's go back to Chrome Let's just clean the console and make another request. 06:51.520 --> 06:58.300 You see that we get these observer object and inside of it we get an array with all the details. 06:59.640 --> 07:07.980 Oh the single questions and in case you're wondering what these observer objects use it that's a spatial 07:08.000 --> 07:09.720 property added by a viewer. 07:09.720 --> 07:10.400 Yes. 07:10.580 --> 07:18.710 That is part of the activity system of the framework that allows you to track data changes and react 07:18.830 --> 07:21.690 to them showing us the updates in the page. 07:21.830 --> 07:29.150 Let's now go back to the editor so I can just delete this console log statement and instead eat inside 07:29.150 --> 07:31.100 of the DB glass container. 07:31.220 --> 07:32.870 Let's define another diva. 07:34.010 --> 07:39.850 And yeah we can add the paragraph with class margin both to zero. 07:40.170 --> 07:53.810 We've posted by and yet we can add a span with question that author Daniel below we can add in each. 07:54.140 --> 08:05.720 We have question lots content and then below another paragraph we've asked what's in your question that 08:05.840 --> 08:12.070 answers count and below that we can also add an H.R. tag. 08:12.200 --> 08:17.780 Considering that you were referencing question as a single question about a way and considering that 08:17.810 --> 08:29.480 we have a lot of questions we need to use a V for directive and in this case question in questions and 08:29.480 --> 08:36.620 considering that we are using question subjects that have a primary key we can pass it as a value for 08:36.620 --> 08:37.450 the Keep it up. 08:37.460 --> 08:40.000 So question not okay. 08:40.310 --> 08:47.090 So if we now go back to Chrome you can see that we have the questions of the first page of results. 08:47.090 --> 08:50.030 And so for each event we have the authority. 08:50.150 --> 08:53.270 The question itself and the number of answers. 08:53.480 --> 08:57.800 One more thing that we can do is to change the color of the question so far. 08:58.130 --> 09:06.410 So going back to home and those few here I can add a class to the Spanish author names so let's define 09:06.590 --> 09:11.260 this colossal side of a style tag. 09:12.390 --> 09:22.520 And so here you can add font weight balls and then as a color we can add the bootstrap like it add once 09:22.520 --> 09:28.190 again and going back to the application one more time we see the taco a lot now is red.