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.