55. Creating a Recipe Model

Jul 14, 2026 04:28 · 4:33 · English · Whisper Turbo · 1 Выступающие
Этот протокол истекает сегодня. Модернизация для постоянного хранения →
Указатель лекций
Только показываю
0:02
S… Speaker 1 (55. Creating a Recipe Model)
We added the header in the last lecture.
0:04
S… Speaker 1 (55. Creating a Recipe Model)
Now I want to work on my recipes.
0:06
S… Speaker 1 (55. Creating a Recipe Model)
So we got the recipes component,
0:08
S… Speaker 1 (55. Creating a Recipe Model)
which holds the recipe list.
0:11
S… Speaker 1 (55. Creating a Recipe Model)
Now I also want to fill the list with some life.
0:15
S… Speaker 1 (55. Creating a Recipe Model)
For this,
0:16
S… Speaker 1 (55. Creating a Recipe Model)
I'll go into my recipe list component,
0:18
S… Speaker 1 (55. Creating a Recipe Model)
and we'll learn more about ngOnInit later in the next module,
0:22
S… Speaker 1 (55. Creating a Recipe Model)
in the components module.
0:24
S… Speaker 1 (55. Creating a Recipe Model)
For now, what I want to do here is I want to add my recipes array,
0:28
S… Speaker 1 (55. Creating a Recipe Model)
my array of recipes,
0:29
S… Speaker 1 (55. Creating a Recipe Model)
which for now is an empty array.
0:31
S… Speaker 1 (55. Creating a Recipe Model)
And here,
0:32
S… Speaker 1 (55. Creating a Recipe Model)
let's go back to that slide from the beginning.
0:35
S… Speaker 1 (55. Creating a Recipe Model)
I want to define how a recipe should look like.
0:39
S… Speaker 1 (55. Creating a Recipe Model)
We're going to use a recipe a lot throughout this app,
0:42
S… Speaker 1 (55. Creating a Recipe Model)
and therefore we should definitely clearly define how a recipe looks
0:46
S… Speaker 1 (55. Creating a Recipe Model)
like so that whenever we use it in any component,
0:49
S… Speaker 1 (55. Creating a Recipe Model)
we're always talking about the same structure,
0:51
S… Speaker 1 (55. Creating a Recipe Model)
about the same kind of object.
0:54
S… Speaker 1 (55. Creating a Recipe Model)
So for this,
0:55
S… Speaker 1 (55. Creating a Recipe Model)
I will create a model.
0:56
S… Speaker 1 (55. Creating a Recipe Model)
What is a model then?
0:58
S… Speaker 1 (55. Creating a Recipe Model)
A model simply is a TypeScript file.
1:00
S… Speaker 1 (55. Creating a Recipe Model)
So in the recipes folder,
1:01
S… Speaker 1 (55. Creating a Recipe Model)
because it's going to be the recipe model,
1:03
S… Speaker 1 (55. Creating a Recipe Model)
I'll add another file.
1:05
S… Speaker 1 (55. Creating a Recipe Model)
It's called recipe .model .ts.
1:11
S… Speaker 1 (55. Creating a Recipe Model)
Now .model is optional,
1:12
S… Speaker 1 (55. Creating a Recipe Model)
but again, you should be descriptive about what's inside a file.
1:15
S… Speaker 1 (55. Creating a Recipe Model)
And with that,
1:16
S… Speaker 1 (55. Creating a Recipe Model)
it's pretty clear what will be inside.
1:18
S… Speaker 1 (55. Creating a Recipe Model)
So I'll add this file.
1:19
S… Speaker 1 (55. Creating a Recipe Model)
Again, it's now just in the recipes folder.
1:22
S… Speaker 1 (55. Creating a Recipe Model)
And how should this file look like?
1:25
S… Speaker 1 (55. Creating a Recipe Model)
First of all,
1:26
S… Speaker 1 (55. Creating a Recipe Model)
I'm going to export a TS class,
1:28
S… Speaker 1 (55. Creating a Recipe Model)
a TypeScript class,
1:29
S… Speaker 1 (55. Creating a Recipe Model)
which is simply named recipe.
1:31
S… Speaker 1 (55. Creating a Recipe Model)
Because we define how a single recipe looks
1:35
S… Speaker 1 (55. Creating a Recipe Model)
like here.
1:36
S… Speaker 1 (55. Creating a Recipe Model)
Now you could think that we're going to add something like add model here.
1:39
S… Speaker 1 (55. Creating a Recipe Model)
And we're not going to do this.
1:41
S… Speaker 1 (55. Creating a Recipe Model)
There is no decorator like this.
1:43
S… Speaker 1 (55. Creating a Recipe Model)
And we don't need to do this because we can use vanilla TypeScript for this.
1:48
S… Speaker 1 (55. Creating a Recipe Model)
A model in the end should just be a blueprint for
1:52
S… Speaker 1 (55. Creating a Recipe Model)
objects we create.
1:53
S… Speaker 1 (55. Creating a Recipe Model)
And a TypeScript class does just this job.
1:56
S… Speaker 1 (55. Creating a Recipe Model)
A class can be instantiated so we can create new
2:00
S… Speaker 1 (55. Creating a Recipe Model)
objects based on the setup we provide here in this class.
2:05
S… Speaker 1 (55. Creating a Recipe Model)
So we can define how a recipe should look like in this
2:09
S… Speaker 1 (55. Creating a Recipe Model)
class.
2:09
S… Speaker 1 (55. Creating a Recipe Model)
So let's do this.
2:11
S… Speaker 1 (55. Creating a Recipe Model)
A recipe should have a name and
2:15
S… Speaker 1 (55. Creating a Recipe Model)
I'll add an accessor to be really clear about that this is publicly available so
2:19
S… Speaker 1 (55. Creating a Recipe Model)
that this can be accessed from outside if using this as an instantiated
2:23
S… Speaker 1 (55. Creating a Recipe Model)
object.
2:24
S… Speaker 1 (55. Creating a Recipe Model)
So I'll add public in front of it and then name as the property
2:28
S… Speaker 1 (55. Creating a Recipe Model)
name.
2:28
S… Speaker 1 (55. Creating a Recipe Model)
I'll also assign the type of this by adding a colon and the
2:32
S… Speaker 1 (55. Creating a Recipe Model)
type will be string.
2:34
S… Speaker 1 (55. Creating a Recipe Model)
And that is just how you assign types in TypeScript.
2:37
S… Speaker 1 (55. Creating a Recipe Model)
You add a colon after the property name and then the type you want to assign.
2:41
S… Speaker 1 (55. Creating a Recipe Model)
So string in this case.
2:42
S… Speaker 1 (55. Creating a Recipe Model)
I also want to have a description in each
2:46
S… Speaker 1 (55. Creating a Recipe Model)
recipe.
2:47
S… Speaker 1 (55. Creating a Recipe Model)
So I'll add my description property,
2:51
S… Speaker 1 (55. Creating a Recipe Model)
which also is a string because a description is just a text,
2:54
S… Speaker 1 (55. Creating a Recipe Model)
of course.
2:55
S… Speaker 1 (55. Creating a Recipe Model)
Now,
2:56
S… Speaker 1 (55. Creating a Recipe Model)
maybe...
2:58
S… Speaker 1 (55. Creating a Recipe Model)
We also want to store an image for each recipe.
3:02
S… Speaker 1 (55. Creating a Recipe Model)
So we should have an image path since we won't
3:06
S… Speaker 1 (55. Creating a Recipe Model)
store the image itself here,
3:07
S… Speaker 1 (55. Creating a Recipe Model)
of course. That wouldn't work.
3:08
S… Speaker 1 (55. Creating a Recipe Model)
We can't store files in our code.
3:11
S… Speaker 1 (55. Creating a Recipe Model)
But we want to store the path pointing to the image.
3:14
S… Speaker 1 (55. Creating a Recipe Model)
And we will simply use images from the web here.
3:17
S… Speaker 1 (55. Creating a Recipe Model)
So this will hold a URL in the end.
3:19
S… Speaker 1 (55. Creating a Recipe Model)
So that is also a string,
3:20
S… Speaker 1 (55. Creating a Recipe Model)
a text in the end.
3:22
S… Speaker 1 (55. Creating a Recipe Model)
That is the basic model for now,
3:25
S… Speaker 1 (55. Creating a Recipe Model)
the basic blueprint.
3:27
S… Speaker 1 (55. Creating a Recipe Model)
I'll also add a constructor to it so that we can instantiate this
3:31
S… Speaker 1 (55. Creating a Recipe Model)
with the new keyword and pass the arguments right to the constructor.
3:34
S… Speaker 1 (55. Creating a Recipe Model)
So here I expect to receive the name,
3:38
S… Speaker 1 (55. Creating a Recipe Model)
which will be of type string,
3:39
S… Speaker 1 (55. Creating a Recipe Model)
the description,
3:40
S… Speaker 1 (55. Creating a Recipe Model)
I'll just write it a bit shorter here,
3:42
S… Speaker 1 (55. Creating a Recipe Model)
which will be of type string,
3:44
S… Speaker 1 (55. Creating a Recipe Model)
and the image.
3:45
S… Speaker 1 (55. Creating a Recipe Model)
path which will be of type string in the constructor body and if
3:50
S… Speaker 1 (55. Creating a Recipe Model)
that's brand new to you the constructor is simply a built -in function every class has
3:54
S… Speaker 1 (55. Creating a Recipe Model)
and which will be executed once to once you create a new instance of
3:58
S… Speaker 1 (55. Creating a Recipe Model)
this class i will show you how this works in a second
4:01
S… Speaker 1 (55. Creating a Recipe Model)
So inside of the body of this constructor,
4:03
S… Speaker 1 (55. Creating a Recipe Model)
we have to assign the arguments we receive here to the properties
4:07
S… Speaker 1 (55. Creating a Recipe Model)
of our object now,
4:08
S… Speaker 1 (55. Creating a Recipe Model)
to the properties of our class.
4:10
S… Speaker 1 (55. Creating a Recipe Model)
So this name,
4:11
S… Speaker 1 (55. Creating a Recipe Model)
referring to the name up here,
4:13
S… Speaker 1 (55. Creating a Recipe Model)
to our property,
4:14
S… Speaker 1 (55. Creating a Recipe Model)
should be equal to name.
4:16
S… Speaker 1 (55. Creating a Recipe Model)
And now the same for description.
4:18
S… Speaker 1 (55. Creating a Recipe Model)
This description should be equal to desk.
4:20
S… Speaker 1 (55. Creating a Recipe Model)
And this image path should be equal to image path.
4:24
S… Speaker 1 (55. Creating a Recipe Model)
So with that,
4:25
S… Speaker 1 (55. Creating a Recipe Model)
we got a recipe model we can use.
4:27
S… Speaker 1 (55. Creating a Recipe Model)
Now let's use it.
4:29
S… Speaker 1 (55. Creating a Recipe Model)
in the next lecture.

Эта запись была составлена АИ (автоматическое распознавание речи). Политика МА

❤️ Любите STT.ai? Расскажите друзьям!
Резюме
Нажмите Нажмите Обобщение для составления резюме этой стенограммы.
Резюмируя...
Спросите AI об этом писце
Спросите что - нибудь об этой стенограмме — МА найдет соответствующие разделы и ответ.
Переписать другое