All language subtitles for 3. A Few Questions Answered

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic Download
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
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
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
hmn Hmong
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
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
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 Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
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,800 --> 00:00:03,890 Now that we've wrapped up this first application we're going to take a look at a couple of different 2 00:00:03,890 --> 00:00:08,770 diagrams to understand some liquor that we just wrote out inside of here and the overall project structure. 3 00:00:08,840 --> 00:00:10,200 Let's get to it. 4 00:00:10,250 --> 00:00:15,540 The first question I want to answer that you might have is what is up with all of those different files. 5 00:00:15,590 --> 00:00:18,410 Remember I generated this project for us ahead of time. 6 00:00:18,570 --> 00:00:24,030 But there are a lot of different files inside of here to get just some very simple content on the screen. 7 00:00:24,240 --> 00:00:29,100 Right now we're going to focus on some the different files that were placed inside the source app directory. 8 00:00:29,100 --> 00:00:33,480 So what are these different files inside of here and why did it take like essentially five files to 9 00:00:33,480 --> 00:00:35,330 get some very simple content to show up. 10 00:00:35,990 --> 00:00:41,680 Well in the world of angular we place one simple thing inside of each single file. 11 00:00:41,820 --> 00:00:48,420 In other words every file creates or defines one single thing for our application. 12 00:00:48,430 --> 00:00:52,770 There are four different file types that we're going to be very concerned with throughout this course. 13 00:00:52,850 --> 00:00:58,410 Those different types of files are going to be a component template files component class files Service 14 00:00:58,420 --> 00:01:01,230 files in module files. 15 00:01:01,250 --> 00:01:04,780 There is an example of each of those four inside of our app directory. 16 00:01:04,790 --> 00:01:10,760 Right now we worked on the first to the app component dot e-mail file and the component dot yes file 17 00:01:10,760 --> 00:01:11,670 as well. 18 00:01:11,780 --> 00:01:16,700 We did not open or work on the translate dot servers dot t s file or the module dot t s file but I won't 19 00:01:16,700 --> 00:01:19,320 have a quick word about those really quickly. 20 00:01:19,520 --> 00:01:23,280 The first file we worked on created something called a component template. 21 00:01:23,390 --> 00:01:29,240 That is the HMO file right here as you would guess that each small file is responsible for writing out 22 00:01:29,240 --> 00:01:34,560 some mail that is going to eventually be displayed to the user on the screen I do want to note that 23 00:01:34,560 --> 00:01:39,830 the HMO that we wrote out here had some kind of special syntax specifically on the input element and 24 00:01:39,830 --> 00:01:41,870 a button element as well. 25 00:01:41,880 --> 00:01:46,260 We'll discuss what the special syntax is in just a moment but for right now all we really need to understand 26 00:01:46,350 --> 00:01:51,240 is that this component thought h t mail file contains some H smell that we wanted to display to our 27 00:01:51,240 --> 00:01:56,940 user the next file we worked on created a component class. 28 00:01:56,990 --> 00:02:03,020 So that was the app component dot t s file a component class is all about defining some code that is 29 00:02:03,020 --> 00:02:08,870 going to run whenever some important event occurs such as whenever a user clicks on a button or enter 30 00:02:08,870 --> 00:02:15,980 some text into an input or so on our component class contains some code to handle a submission of the 31 00:02:15,980 --> 00:02:23,060 form so if I open backup app dot component dot yes here it is right here inside of here we defined a 32 00:02:23,060 --> 00:02:24,530 submit function. 33 00:02:24,530 --> 00:02:25,870 This function right here was invoked. 34 00:02:25,890 --> 00:02:31,070 Anytime a user clicked on that little translate button right there though the code inside this app component 35 00:02:31,070 --> 00:02:36,710 class was responsible for responding to a user event and somehow updating our application on the screen 36 00:02:39,040 --> 00:02:39,230 now. 37 00:02:39,230 --> 00:02:43,400 Like I said just a moment ago these last two files we didn't work on but I just want you to be aware 38 00:02:43,430 --> 00:02:46,940 them because they're going to be very important types of files that we're going to work on quite a bit 39 00:02:46,940 --> 00:02:48,760 throughout this course. 40 00:02:48,810 --> 00:02:53,350 The first one was a service file that's translate dot service dot to yes. 41 00:02:53,360 --> 00:02:55,600 Now I created this file ahead of time. 42 00:02:55,680 --> 00:02:56,930 Here it is right here. 43 00:02:57,000 --> 00:03:01,290 The goal of this file was to take in some amount of text we wanted to translate. 44 00:03:01,530 --> 00:03:05,600 If you open up the file right now you'll see if there is a class defined inside of here. 45 00:03:05,790 --> 00:03:11,010 I put together this class in the code inside of it this translate method that is defined right here 46 00:03:11,100 --> 00:03:17,150 was gonna take in some text and then make use of a Google API to translate that text into another language 47 00:03:19,380 --> 00:03:24,930 services in general are all about containing some code that is going to fetch data store data update 48 00:03:24,930 --> 00:03:29,350 data or any other kind of business logic related to our application. 49 00:03:29,490 --> 00:03:34,980 We can really think of the component template as showing content to the user the component class response 50 00:03:34,980 --> 00:03:40,950 to events and also works with services and a service gets data or updates data or just somehow works 51 00:03:40,950 --> 00:03:43,690 with data inside our application. 52 00:03:43,840 --> 00:03:47,070 The last important type of file that we're going to work with quite a bit throughout this course is 53 00:03:47,070 --> 00:03:52,050 a module file a module file such as the AP module dot test file. 54 00:03:52,110 --> 00:03:54,020 Here it is right here. 55 00:03:54,210 --> 00:04:01,010 It finds a set of services and components that are going to exist inside of our application in a typical 56 00:04:01,010 --> 00:04:06,600 application like a serious production angular application we will usually have multiple different modules. 57 00:04:06,800 --> 00:04:12,210 We'll usually have one module for each major feature inside of our application OK. 58 00:04:12,240 --> 00:04:16,890 So again or very important types of files that we're going to see quite a bit inside of our angular 59 00:04:16,890 --> 00:04:19,440 career. 60 00:04:19,440 --> 00:04:25,600 Next up I want to give you a quick idea of how these or different things kind of work together we contain 61 00:04:26,110 --> 00:04:28,940 one component template for each component class. 62 00:04:28,960 --> 00:04:32,770 So we're always going to have kind of a one to one mapping between component template files and component 63 00:04:32,770 --> 00:04:34,230 class files. 64 00:04:34,390 --> 00:04:41,230 However we might have 0 1 2 3 or however many different services as well just depends on what different 65 00:04:41,230 --> 00:04:46,680 types of data we're trying to work with inside of a given application a component template the class 66 00:04:46,790 --> 00:04:50,860 in services are all contained inside of a module. 67 00:04:50,930 --> 00:04:55,370 Just a moment ago I mentioned that a single app might have multiple different modules one for each major 68 00:04:55,370 --> 00:04:56,430 feature. 69 00:04:56,500 --> 00:05:00,920 I want you to imagine for a second that we were trying to build an e-commerce application where maybe 70 00:05:00,920 --> 00:05:06,440 we're trying to sell some products to users maybe our application needs to have some ability to list 71 00:05:06,440 --> 00:05:10,850 out products to a user and also the ability to implement some kind of like shopping cart feature as 72 00:05:10,850 --> 00:05:11,270 well. 73 00:05:12,020 --> 00:05:17,780 And that type of application we would have one module related to all the product listing code the inside 74 00:05:17,780 --> 00:05:24,080 of this module you would have some templates related to showing lists of products to a user then component 75 00:05:24,080 --> 00:05:29,680 classes related to handling events triggered from that list and some services related to fetching lists 76 00:05:29,720 --> 00:05:35,470 of items we might also have a shopping cart module where all these similar things are related to dealing 77 00:05:35,470 --> 00:05:38,800 with a shopping cart implementation okay. 78 00:05:38,840 --> 00:05:42,660 So that's just a little bit more about what is going on inside this app directory. 79 00:05:42,680 --> 00:05:46,850 Right now again there are those four different types of files that we really care about. 80 00:05:46,880 --> 00:05:49,310 You'll notice that there's one file that didn't talk about at all. 81 00:05:49,340 --> 00:05:55,330 It is the app component CSR s file as you guessed this just apply some styling to our component. 82 00:05:55,340 --> 00:05:57,560 We'll go into more detail on it more time. 83 00:05:57,590 --> 00:06:00,140 But right now we're not going to worry about styling too much. 84 00:06:00,140 --> 00:06:05,060 We're going to be much more concerned with how we actually show content to the user batch data and overall 85 00:06:05,060 --> 00:06:07,550 structure our application. 86 00:06:07,580 --> 00:06:07,950 All right. 87 00:06:07,980 --> 00:06:09,670 Onto our next major question. 88 00:06:09,820 --> 00:06:12,260 What was with all that weird syntax. 89 00:06:12,430 --> 00:06:17,860 We saw some really weird syntax inside of the apt component to yes file this thing right here and also 90 00:06:17,860 --> 00:06:19,160 inside of the template file. 91 00:06:19,180 --> 00:06:26,100 This right here well inside of the component class file we wrote out some code using typescript script 92 00:06:26,130 --> 00:06:31,920 is a dialect or kind of a flavor of javascript if you're not familiar with typescript at all that is 93 00:06:31,920 --> 00:06:36,450 totally ok in this course I'm going to assume that you have zero knowledge of TypeScript and we're going 94 00:06:36,450 --> 00:06:38,940 to be covering it from scratch. 95 00:06:38,980 --> 00:06:42,760 Next up inside that template that we worked on there was definitely a lot of strange syntax in there 96 00:06:42,760 --> 00:06:43,450 as well. 97 00:06:43,700 --> 00:06:48,610 But when we work on a template we're not just writing out playing each team out we can write plain HMO 98 00:06:48,610 --> 00:06:53,470 if we want to but usually we make use of something called the angular template syntax. 99 00:06:53,470 --> 00:06:55,950 There's just a couple of additional rules that we need to be aware of. 100 00:06:56,000 --> 00:07:00,150 We're working on a England template file okay. 101 00:07:00,190 --> 00:07:04,360 So that's kind of a quick overview on some big questions you might have had around this project. 102 00:07:04,360 --> 00:07:07,200 We just worked on we're gonna take a quick pause right here. 103 00:07:07,240 --> 00:07:10,930 When we come back the next video we're gonna start to work on another project after doing a little bit 104 00:07:10,930 --> 00:07:11,660 of setup. 105 00:07:11,680 --> 00:07:17,230 We're going to do a deep dive on exactly what is going on with the angular template syntax and get a 106 00:07:17,230 --> 00:07:21,310 better understanding of all this weird stuff that we just typed out inside of here. 107 00:07:21,370 --> 00:07:23,200 Quick pause and I'll see you in just a minute. 12092

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.