All language subtitles for 4. Adding Pages into Our App

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French Download
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.