266. Services & Components Working Together
Jul 21, 2026 05:59
· 3:28
· English
· Whisper Turbo
· 1 ਸਪੀਕਰ
ਇਹ ਟਰਾਂਸਕਰੀਪਟ ਦੀ ਮਿਆਦ ਖਤਮ ਹੁੰਦੀ ਹੈ 7 ਦਿਨ
ਸਥਾਈ ਸਟੋਰੇਜ਼ ਲਈ ਅੱਪਗਰੇਡ →
ਕੇਵਲ ਵੇਖਾਓ
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.
ਇਹ ਟਰਾਂਸਕਰੀਪਟ AI (ਆਟੋਮੈਟਿਕ ਬੋਲੀ ਪਛਾਣ) ਵਲੋਂ ਬਣਾਈ ਗਈ ਹੈ । ਇਸ ਵਿੱਚ ਗਲਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ - ਗੰਭੀਰ ਵਰਤੋਂ ਲਈ ਅਸਲੀ ਆਡੀਓ ਨਾਲ ਜਾਂਚ ਕਰੋ । AI ਪਾਲਸੀ
ਸੰਖੇਪ
ਇਸ ਟਰਾਂਸਕਰੀਪਟ ਦਾ AI ਸੰਖੇਪ ਬਣਾਉਣ ਲਈ ਸੰਖੇਪ ਕਲਿੱਕ ਕਰੋ ।
ਸੰਖੇਪ...
ਇਹ ਟਰਾਂਸਕਰੀਪਟ ਬਾਰੇ AI ਨੂੰ ਪੁੱਛੋ
ਇਸ ਟਰਾਂਸਕਰੀਪਟ ਬਾਰੇ ਕੁਝ ਪੁੱਛੋ — AI ਸਬੰਧਤ ਭਾਗ ਲੱਭੇਗਾ ਅਤੇ ਜਵਾਬ ਦੇਵੇਗਾ।