266. Services & Components Working Together

Jul 21, 2026 05:59 · 3:28 · English · Whisper Turbo · 1 Speaker
Transkrip ini berakhir dalam 7 hari. Tingkatkan untuk penyimpanan permanen →
Indeks Kuliah
Tampilkan saja
0:02
S… Speaker 1 (266. Services & Components Working Together)
Now to fix that we have two possible ways of doing that.
0:06
S… Speaker 1 (266. Services & Components Working Together)
The first alternative is that we use a subject
0:10
S… Speaker 1 (266. Services & Components Working Together)
in the posts service where we next our
0:14
S… Speaker 1 (266. Services & Components Working Together)
posts when we got them and we subscribe to that subject in the app component.
0:18
S… Speaker 1 (266. Services & Components Working Together)
And this would be a fine pattern,
0:20
S… Speaker 1 (266. Services & Components Working Together)
nothing wrong with that.
0:22
S… Speaker 1 (266. Services & Components Working Together)
The alternative and maybe a bit more suited here because the
0:26
S… Speaker 1 (266. Services & Components Working Together)
subject would be perfect if we have multiple components interested in the posts.
0:30
S… Speaker 1 (266. Services & Components Working Together)
That's not the case here.
0:31
S… Speaker 1 (266. Services & Components Working Together)
So a simpler and for this scenario better solution would
0:35
S… Speaker 1 (266. Services & Components Working Together)
be to simply return the result of our get
0:40
S… Speaker 1 (266. Services & Components Working Together)
method and of the pipe method thereafter.
0:44
S… Speaker 1 (266. Services & Components Working Together)
And that would be our observable.
0:46
S… Speaker 1 (266. Services & Components Working Together)
So I don't want to subscribe here.
0:48
S… Speaker 1 (266. Services & Components Working Together)
Instead,
0:49
S… Speaker 1 (266. Services & Components Working Together)
I only return the prepared observable here in fetch posts.
0:53
S… Speaker 1 (266. Services & Components Working Together)
And therefore right now,
0:54
S… Speaker 1 (266. Services & Components Working Together)
no HTTP request gets sent because as you learned,
0:57
S… Speaker 1 (266. Services & Components Working Together)
requests are only sent when someone is interested.
1:00
S… Speaker 1 (266. Services & Components Working Together)
So here I'm not subscribing,
1:02
S… Speaker 1 (266. Services & Components Working Together)
but now that I return this here,
1:05
S… Speaker 1 (266. Services & Components Working Together)
I can and I have to subscribe in the app component.
1:09
S… Speaker 1 (266. Services & Components Working Together)
So here where I call fetch posts,
1:12
S… Speaker 1 (266. Services & Components Working Together)
I can now subscribe again and I get my posts.
1:15
S… Speaker 1 (266. Services & Components Working Together)
And now here we can set this is fetching
1:19
S… Speaker 1 (266. Services & Components Working Together)
to false.
1:20
S… Speaker 1 (266. Services & Components Working Together)
And I want to set this is fetching to true here right
1:24
S… Speaker 1 (266. Services & Components Working Together)
before I start sending the request.
1:26
S… Speaker 1 (266. Services & Components Working Together)
And even more importantly,
1:28
S… Speaker 1 (266. Services & Components Working Together)
we can set this loaded posts equal to the posts we get back.
1:33
S… Speaker 1 (266. Services & Components Working Together)
And this is now the code snippet I can also copy to on fetch posts.
1:37
S… Speaker 1 (266. Services & Components Working Together)
And yes,
1:38
S… Speaker 1 (266. Services & Components Working Together)
you could of course also outsource this into a separate private method again to
1:42
S… Speaker 1 (266. Services & Components Working Together)
avoid this code duplication here if you want to.
1:45
S… Speaker 1 (266. Services & Components Working Together)
So now we moved the result handling,
1:49
S… Speaker 1 (266. Services & Components Working Together)
so to say,
1:50
S… Speaker 1 (266. Services & Components Working Together)
into the component,
1:51
S… Speaker 1 (266. Services & Components Working Together)
but the more heavy lifting,
1:54
S… Speaker 1 (266. Services & Components Working Together)
the part detached from the template and from the UI,
1:57
S… Speaker 1 (266. Services & Components Working Together)
which is the sending of the request and the transformation of the data,
2:01
S… Speaker 1 (266. Services & Components Working Together)
that now lives in the service.
2:03
S… Speaker 1 (266. Services & Components Working Together)
And this is a best practice when working with Angular and HTTP
2:07
S… Speaker 1 (266. Services & Components Working Together)
requests.
2:08
S… Speaker 1 (266. Services & Components Working Together)
Move the part that is related to your template
2:11
S… Speaker 1 (266. Services & Components Working Together)
which in my case here is managing the loading status and managing the loaded
2:15
S… Speaker 1 (266. Services & Components Working Together)
data, move that into the component and be informed about
2:20
S… Speaker 1 (266. Services & Components Working Together)
the result of your HTTP request by subscribing in the component,
2:24
S… Speaker 1 (266. Services & Components Working Together)
but move the rest into the service and simply return
2:28
S… Speaker 1 (266. Services & Components Working Together)
the observable there so that you set up everything in the service,
2:32
S… Speaker 1 (266. Services & Components Working Together)
but you can subscribe in the component.
2:35
S… Speaker 1 (266. Services & Components Working Together)
Now, of course,
2:36
S… Speaker 1 (266. Services & Components Working Together)
I'm using a different pattern for creating a post.
2:38
S… Speaker 1 (266. Services & Components Working Together)
There I am subscribing in the service and this can be fine too.
2:42
S… Speaker 1 (266. Services & Components Working Together)
If your component doesn't care about the response
2:47
S… Speaker 1 (266. Services & Components Working Together)
and about whether the request is done or not,
2:49
S… Speaker 1 (266. Services & Components Working Together)
as it is the case here in our application,
2:51
S… Speaker 1 (266. Services & Components Working Together)
if the component doesn't care about it,
2:54
S… Speaker 1 (266. Services & Components Working Together)
then there is no reason to subscribe in the component.
2:57
S… Speaker 1 (266. Services & Components Working Together)
Then you can just subscribe in the service as we're doing it here.
3:00
S… Speaker 1 (266. Services & Components Working Together)
But if it does care about the response and the response status,
3:04
S… Speaker 1 (266. Services & Components Working Together)
as it does for fetching posts,
3:06
S… Speaker 1 (266. Services & Components Working Together)
then having that service component split is great.
3:09
S… Speaker 1 (266. Services & Components Working Together)
And now with that,
3:11
S… Speaker 1 (266. Services & Components Working Together)
if this reloads,
3:12
S… Speaker 1 (266. Services & Components Working Together)
you see the loading indicator again,
3:14
S… Speaker 1 (266. Services & Components Working Together)
you see the posts again,
3:16
S… Speaker 1 (266. Services & Components Working Together)
and now we have the best of both worlds and then we have a setup which you will
3:21
S… Speaker 1 (266. Services & Components Working Together)
see a lot and which you will work with a lot when you're working with
3:25
S… Speaker 1 (266. Services & Components Working Together)
Angular.

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