Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,360 --> 00:00:02,970
We created our home page.
2
00:00:02,970 --> 00:00:09,030
But now what we want to do is add the ability to navigate across pages.
3
00:00:09,750 --> 00:00:11,220
So what do I mean by that?
4
00:00:11,460 --> 00:00:17,490
Well, right now we are on the home page and this is the current path we are at.
5
00:00:18,030 --> 00:00:24,480
However, when I click on restaurants, as you can see, the path changes to slash restaurants.
6
00:00:24,870 --> 00:00:29,280
But right here we are not presented with a brand new page.
7
00:00:29,610 --> 00:00:35,130
Of course, now what I want to do is if we go to different paths, I want to show different pages,
8
00:00:35,130 --> 00:00:39,180
different UI elements that accord with that path.
9
00:00:39,690 --> 00:00:47,700
So why is it that no matter where we go, we're only showing this right over here, this landing page
10
00:00:48,030 --> 00:00:51,420
inside of the app dot view file?
11
00:00:52,170 --> 00:00:54,030
Well, this is intentional.
12
00:00:54,330 --> 00:01:04,530
So if we utilize the app dot view, it's going to treat our Linux application as just one page application,
13
00:01:04,530 --> 00:01:06,840
a single page application.
14
00:01:07,260 --> 00:01:13,380
And no matter what path we go to, this is the HTML that we are going to render.
15
00:01:13,830 --> 00:01:20,670
So what we need to do is we actually need to utilize a different format if we want to have different
16
00:01:20,670 --> 00:01:25,560
pages, multiple pages with multiple HTML structures.
17
00:01:26,070 --> 00:01:27,450
So what is that path?
18
00:01:27,840 --> 00:01:31,200
Well, let's actually look at a diagram in order to understand this.
19
00:01:32,040 --> 00:01:38,190
So in order to do this, well, we're going to need to do is first completely remove our app dot view
20
00:01:38,190 --> 00:01:38,670
file.
21
00:01:39,030 --> 00:01:42,930
We don't want to use that anymore because we want to have multiple pages.
22
00:01:43,380 --> 00:01:50,520
Instead, what we're going to do is we're going to create a pages directory and it has to be called
23
00:01:50,550 --> 00:01:54,170
pages and it also has to be all lowercase.
24
00:01:54,190 --> 00:01:58,380
I know the p here is capital case, but it has to be all lowercase.
25
00:01:59,100 --> 00:02:06,900
Now inside of this pages directory, we're going to have multiple view files view file similar to the
26
00:02:06,900 --> 00:02:12,070
app dot view as well as any components that we have now over here.
27
00:02:12,180 --> 00:02:15,750
Let's say we create a restaurant dot view file.
28
00:02:16,230 --> 00:02:26,460
Now any view file inside of this page's directory is going to be treated very, very in a special manner.
29
00:02:26,640 --> 00:02:31,500
I know that English wasn't probably great, but let me explain exactly what I mean here.
30
00:02:32,100 --> 00:02:40,530
So we have this restaurants dot view file and what ends up happening is when we end up going to local
31
00:02:40,530 --> 00:02:48,990
host Colon 3000 slash restaurants, which is the name of the file, it is going to take this template
32
00:02:48,990 --> 00:02:54,300
right over here, the template inside of this view file and render that.
33
00:02:54,690 --> 00:03:00,780
Now let's say we create a file called Hello Dot View inside of this pages directory.
34
00:03:01,170 --> 00:03:07,230
Then if we go to local host slash hello, then it's going to render the template in this file.
35
00:03:07,800 --> 00:03:13,740
Now you might be asking, well, what do we do in the case where we just want to render something on
36
00:03:13,740 --> 00:03:16,500
local host 3000 with no path?
37
00:03:17,070 --> 00:03:20,660
Well, in this case, what we're going to do is utilize index.
38
00:03:20,670 --> 00:03:22,830
So we're going to call our file index.
39
00:03:23,070 --> 00:03:27,960
And by default, what that's going to be is just a regular slash like so.
40
00:03:28,560 --> 00:03:36,540
So in order to essentially duplicate the app dot view, but with this pages structure, what we can
41
00:03:36,540 --> 00:03:40,440
do here is create a pages directory.
42
00:03:41,640 --> 00:03:45,120
Then in here, we're going to create an index start view file.
43
00:03:45,450 --> 00:03:47,580
I cannot believe that keeps happening.
44
00:03:48,150 --> 00:03:57,120
Index dot view like so that we can just grab everything inside of this app view file and just paste
45
00:03:57,120 --> 00:03:57,810
that in there.
46
00:03:58,020 --> 00:04:01,650
And now all we need to do is delete the app dot view file.
47
00:04:02,130 --> 00:04:04,650
So let's go ahead and remove that.
48
00:04:05,370 --> 00:04:11,880
So now what I'm going to do is I am going to go ahead and now refresh and I'm going to go to localhost
49
00:04:11,880 --> 00:04:12,870
3000.
50
00:04:13,140 --> 00:04:16,500
And right away you can see that we have our app.
51
00:04:17,130 --> 00:04:22,740
Now something interesting happens when I click on restaurants and you may have gotten a quick glimpse
52
00:04:22,740 --> 00:04:23,310
of this.
53
00:04:23,820 --> 00:04:27,680
So when I click on restaurants now we're getting a404 page.
54
00:04:27,840 --> 00:04:35,170
And that's because now that we're using this page's structure, well, we need to have a restaurant
55
00:04:35,170 --> 00:04:41,520
start view file in there to render some HTML before when we had that outdoor view, we're just going
56
00:04:41,520 --> 00:04:44,130
to render that everywhere, regardless of what it was.
57
00:04:44,370 --> 00:04:52,050
But now we need a restaurant dot view file in order to render the correct HTML template.
58
00:04:52,530 --> 00:04:59,430
So this is exactly how we are going to start creating multiple pages throughout our application.
59
00:04:59,700 --> 00:05:04,470
And this is so much easier than configuring it ourselves with view.
60
00:05:04,950 --> 00:05:07,710
This is just kind of done automatically for us.
61
00:05:08,890 --> 00:05:09,220
Okay.
62
00:05:09,220 --> 00:05:14,920
So let's actually go ahead and create a restaurant start view file in here.
63
00:05:15,490 --> 00:05:18,970
So I'm going to say restaurants dot view.
64
00:05:19,180 --> 00:05:20,310
Mind the name.
65
00:05:20,320 --> 00:05:27,100
The name is very, very important because we are going to be navigating to restaurants right over here.
66
00:05:27,160 --> 00:05:29,890
So let's remember that we're navigating to restaurants.
67
00:05:30,340 --> 00:05:34,000
So the name over here should be exactly the same as this.
68
00:05:34,600 --> 00:05:42,640
Now, right over here, let's create a template, create a div, and then let's also grab this nav bar.
69
00:05:42,880 --> 00:05:44,680
Let's put sat nav bar in there.
70
00:05:45,070 --> 00:05:54,190
And then what I'm going to do is I'm just going to have an H1 saying, hello, this is the restaurants.
71
00:05:55,060 --> 00:05:56,350
Restaurants.
72
00:05:56,380 --> 00:05:59,020
Restaurants is always such a tricky word to spell.
73
00:05:59,680 --> 00:06:03,340
Okay, so now let's go back over here and do a quick refresh.
74
00:06:04,680 --> 00:06:12,960
Now when I click on restaurants, you can see now we get redirected to this page with this HTML template.
7624
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.