121. Managing Recipes in a Recipe Service

Jul 15, 2026 05:14 · 4:07 · English · Whisper Turbo · 2 Speaker
Transkrip ini kadaluarsa hari ini. Tingkatkan untuk penyimpanan permanen →
Indeks Kuliah
Tampilkan saja
0:02
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
What should our recipe service do for us?
0:05
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
I guess it makes sense if the recipe service is the
0:09
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
place in our app where we manage our recipes.
0:11
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
Therefore,
0:13
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
we should take our recipes,
0:15
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
which we currently manage in our recipe list,
0:18
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
and manage it in the recipe service.
0:21
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
That's the first thing with which I'll start,
0:24
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
so I'll simply copy it for now.
0:27
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
and add it as a property in the recipe service.
0:29
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
Of course,
0:30
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
we now have to add the import pointing to the recipe model file,
0:34
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
which sits in the same folder as the service.
0:36
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
So with that,
0:37
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
we get an array of recipes in the recipe service.
0:41
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
And I will actually make this private so that
0:45
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
you can't directly access this array from outside.
0:49
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
Now with this added,
0:51
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
I also want to add a getRecipes method,
0:54
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
which will return this array so that we can get access to it from outside.
0:58
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
If I were to return it like this,
1:01
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
I actually return the direct reference to this array,
1:05
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
and since arrays and objects are reference types in JavaScript,
1:10
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
so it has nothing to do with Angular,
1:12
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
but not JavaScript it is,
1:13
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
well,
1:15
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
if we now change something on this array,
1:17
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
we will change it on the array in this service.
1:20
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
Therefore,
1:21
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
I will call slice with no arguments.
1:23
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
This will simply return a new array,
1:26
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
which is an exact copy of the one in this service file.
1:30
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
So therefore,
1:31
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
we really can't access the recipes array stored here from outside.
1:36
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
We only get a copy.
1:37
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
So that is a way to get our recipes.
1:42
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
Now with that,
1:44
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
we can and we have to add our service,
1:48
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
actually both services.
1:50
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
to a place in our app to provide them so that we can inject them.
1:54
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
Where should we provide both services?
1:57
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
Well,
1:59
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
let's start with providing the recipe service in
2:03
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
our recipe component.
2:04
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
We can always put it somewhere else later if we recognize
2:08
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
that we want access to it from another part in our app.
2:12
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
But for now,
2:12
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
I'll add providers,
2:14
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
this array,
2:15
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
to the recipe component.
2:17
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
Therefore,
2:18
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
this component and all other recipe -related components,
2:21
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
since they are all child components to this component in the end,
2:25
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
will share the same instance of this service,
2:27
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
but you won't be able to access the service or at least not the same instance in
2:31
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
other components like the shopping list component.
2:33
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
So here in providers,
2:35
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
I will...
2:37
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
list my recipe service.
2:39
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
Of course,
2:39
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
you have to add an import at the top telling TypeScript where to find this
2:43
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
type. Now with this,
2:46
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
we can use our recipe service here.
2:50
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
Now let's use it in the recipe list component.
2:54
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
Here right now,
2:55
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
we already manage our recipe array.
2:59
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
Now,
3:00
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
I don't want to do that here anymore.
3:02
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
It will be undefined initially.
3:04
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
We will get the value here in ngOnInit.
3:07
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
And for this,
3:09
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
we need to inject our service.
3:11
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
Now, we can do this since we just provided it on the parent component.
3:14
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
So here,
3:15
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
I will provide my recipe service,
3:18
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
which is of type recipe service.
3:22
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
Of course, make sure to import recipe service from the appropriate
3:26
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
file.
3:26
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
And this should be private here to use this TypeScript shortcut of
3:31
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
instantly assigning a property with the same name.
3:34
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
In ngon init,
3:36
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
I can now say this recipes equals this recipe
3:41
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
service get recipes.
3:43
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
And we will get this copy of recipes,
3:46
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
this copy of that array.
3:47
S… Speaker 1 (121. Managing Recipes in a Recipe Service)
Well,
3:48
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
let's see this in action.
3:50
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
If we save this.
3:52
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
We should and we do see the same as before.
3:55
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
The app works just like before because the only thing we changed right now is
4:00
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
where and how we manage our array of recipes.
4:03
S… Speaker 2 (121. Managing Recipes in a Recipe Service)
An important first step.

Transkrip ini dibuat oleh AI (pengakuan bicara otomatis). Mungkin mengandung kesalahan å verifikasi terhadap audio asli untuk penggunaan kritis. Kebijakan AI

❤️ Suka STT.ai? Beri tahu teman-temanmu!
Ringkasan
Klik Summarize untuk membuat ringkasan AI dari transkrip ini.
Ringkasan...
Tanyakan AI Tentang Transcript Ini
Tanyakan apa saja tentang transkrip ini, AI akan menemukan bagian yang relevan dan jawaban.
Menandakan Yang Lain