115. Injecting Services into Services

Jul 15, 2026 04:42 · 5:13 · English · Whisper Turbo · 1 Ομιλητές

Αυτό το αντίγραφο λήγει σήμερα. Αναβάθμιση για μόνιμη αποθήκευση →

Δείκτης διάλεξης

0:02

S… Speaker 1 (115. Injecting Services into Services)

In the last lecture,

0:03

S… Speaker 1 (115. Injecting Services into Services)

we learned about this hierarchical injector and that we can choose

0:08

S… Speaker 1 (115. Injecting Services into Services)

between one instance or multiple instances of the same service class.

0:12

S… Speaker 1 (115. Injecting Services into Services)

I mentioned that the highest possible level is

0:16

S… Speaker 1 (115. Injecting Services into Services)

actually not the app component.

0:18

S… Speaker 1 (115. Injecting Services into Services)

So let's remove it here,

0:19

S… Speaker 1 (115. Injecting Services into Services)

this providers array,

0:21

S… Speaker 1 (115. Injecting Services into Services)

leave it in the constructor and leave the import.

0:23

S… Speaker 1 (115. Injecting Services into Services)

But the highest possible level is in the app module.

0:27

S… Speaker 1 (115. Injecting Services into Services)

Here,

0:28

S… Speaker 1 (115. Injecting Services into Services)

we also have a providers array added if you don't have it.

0:32

S… Speaker 1 (115. Injecting Services into Services)

And here we can also provide the accounts service.

0:36

S… Speaker 1 (115. Injecting Services into Services)

Make sure to also add the import at the top here then.

0:39

S… Speaker 1 (115. Injecting Services into Services)

With that little addition here,

0:43

S… Speaker 1 (115. Injecting Services into Services)

we're making sure that our whole application,

0:46

S… Speaker 1 (115. Injecting Services into Services)

everything in our application,

0:47

S… Speaker 1 (115. Injecting Services into Services)

receives the same instance of the service unless it overrides it

0:52

S… Speaker 1 (115. Injecting Services into Services)

as we did before.

0:53

S… Speaker 1 (115. Injecting Services into Services)

Now with that,

0:54

S… Speaker 1 (115. Injecting Services into Services)

we can now even inject a service into another service

0:59

S… Speaker 1 (115. Injecting Services into Services)

because that's not possible by providing it on a component level.

1:02

S… Speaker 1 (115. Injecting Services into Services)

For that,

1:03

S… Speaker 1 (115. Injecting Services into Services)

we need to provide it in the app module.

1:05

S… Speaker 1 (115. Injecting Services into Services)

So let's say we want to log something if

1:09

S… Speaker 1 (115. Injecting Services into Services)

we call an action in the account service.

1:12

S… Speaker 1 (115. Injecting Services into Services)

So I would have to provide the logging service in

1:16

S… Speaker 1 (115. Injecting Services into Services)

my app module now.

1:18

S… Speaker 1 (115. Injecting Services into Services)

And therefore,

1:19

S… Speaker 1 (115. Injecting Services into Services)

I will simply comment out providers here in my add

1:23

S… Speaker 1 (115. Injecting Services into Services)

component decorators.

1:25

S… Speaker 1 (115. Injecting Services into Services)

And I don't want to call logging

1:29

S… Speaker 1 (115. Injecting Services into Services)

service here anymore.

1:30

S… Speaker 1 (115. Injecting Services into Services)

So we'll comment this out.

1:32

S… Speaker 1 (115. Injecting Services into Services)

And I will actually leave the injection here so that you have it for reference if

1:36

S… Speaker 1 (115. Injecting Services into Services)

you download the code.

1:37

S… Speaker 1 (115. Injecting Services into Services)

I'll also comment it out here in new account component.

1:40

S… Speaker 1 (115. Injecting Services into Services)

Instead,

1:41

S… Speaker 1 (115. Injecting Services into Services)

let's say I want to use this logging service in the account service.

1:45

S… Speaker 1 (115. Injecting Services into Services)

And I might want to call the log status change method there.

1:49

S… Speaker 1 (115. Injecting Services into Services)

Because this is in the end the place where the status changes.

1:51

S… Speaker 1 (115. Injecting Services into Services)

Either because we added a new account or because we called update status.

1:55

S… Speaker 1 (115. Injecting Services into Services)

So to use the service there.

1:59

S… Speaker 1 (115. Injecting Services into Services)

Generally, we start in the same way.

2:01

S… Speaker 1 (115. Injecting Services into Services)

We add a constructor and we inject our logging service in

2:05

S… Speaker 1 (115. Injecting Services into Services)

this case.

2:06

S… Speaker 1 (115. Injecting Services into Services)

Set the type.

2:07

S… Speaker 1 (115. Injecting Services into Services)

Import this type at the top.

2:10

S… Speaker 1 (115. Injecting Services into Services)

Make sure to add the import.

2:12

S… Speaker 1 (115. Injecting Services into Services)

And we provided it an app module.

2:15

S… Speaker 1 (115. Injecting Services into Services)

So you could think that we are set to go.

2:17

S… Speaker 1 (115. Injecting Services into Services)

That we can now go to add account,

2:19

S… Speaker 1 (115. Injecting Services into Services)

call logging service,

2:21

S… Speaker 1 (115. Injecting Services into Services)

log the status change,

2:23

S… Speaker 1 (115. Injecting Services into Services)

pass the status here.

2:25

S… Speaker 1 (115. Injecting Services into Services)

and do the same here for update status.

2:28

S… Speaker 1 (115. Injecting Services into Services)

You could think this is how we do it,

2:29

S… Speaker 1 (115. Injecting Services into Services)

and it's not unlogical to think so,

2:32

S… Speaker 1 (115. Injecting Services into Services)

but let's see if this works.

2:33

S… Speaker 1 (115. Injecting Services into Services)

If we load our app,

2:36

S… Speaker 1 (115. Injecting Services into Services)

we already get an error.

2:38

S… Speaker 1 (115. Injecting Services into Services)

Can't resolve all parameters for account service.

2:42

S… Speaker 1 (115. Injecting Services into Services)

Something's not working.

2:44

S… Speaker 1 (115. Injecting Services into Services)

The reason is if you inject a service into something,

2:48

S… Speaker 1 (115. Injecting Services into Services)

this something needs to have some metadata attached

2:53

S… Speaker 1 (115. Injecting Services into Services)

to it.

2:53

S… Speaker 1 (115. Injecting Services into Services)

Now a component has some metadata because we have add component.

2:57

S… Speaker 1 (115. Injecting Services into Services)

A directive has some metadata because we have add directive.

3:01

S… Speaker 1 (115. Injecting Services into Services)

A service doesn't have

3:05

S… Speaker 1 (115. Injecting Services into Services)

any metadata.

3:07

S… Speaker 1 (115. Injecting Services into Services)

It's just how Angular works that we need to attach some metadata,

3:10

S… Speaker 1 (115. Injecting Services into Services)

and of course not any metadata.

3:12

S… Speaker 1 (115. Injecting Services into Services)

You shouldn't attach addComponent here.

3:14

S… Speaker 1 (115. Injecting Services into Services)

There is a specific metadata you should attach in such cases.

3:18

S… Speaker 1 (115. Injecting Services into Services)

It's addInjectable,

3:20

S… Speaker 1 (115. Injecting Services into Services)

which needs to be imported from addAngularCore.

3:24

S… Speaker 1 (115. Injecting Services into Services)

This tells Angular that now this service is

3:28

S… Speaker 1 (115. Injecting Services into Services)

injectable or that something can be injected in there to be precise.

3:32

S… Speaker 1 (115. Injecting Services into Services)

So that's important.

3:34

S… Speaker 1 (115. Injecting Services into Services)

You don't add add injectable to the service you want to

3:38

S… Speaker 1 (115. Injecting Services into Services)

inject, but to the service where you want to inject something.

3:42

S… Speaker 1 (115. Injecting Services into Services)

So the receiving service,

3:44

S… Speaker 1 (115. Injecting Services into Services)

you could say, that to be injected in service.

3:47

S… Speaker 1 (115. Injecting Services into Services)

And you don't need to add it to any other service.

3:50

S… Speaker 1 (115. Injecting Services into Services)

If you don't want to inject anything in a service,

3:52

S… Speaker 1 (115. Injecting Services into Services)

Like here for the logging service.

3:54

S… Speaker 1 (115. Injecting Services into Services)

You don't need to add add injectable.

3:56

S… Speaker 1 (115. Injecting Services into Services)

Only add it if you expect to get something injected.

4:01

S… Speaker 1 (115. Injecting Services into Services)

Now, one important note here,

4:02

S… Speaker 1 (115. Injecting Services into Services)

as I explained,

4:04

S… Speaker 1 (115. Injecting Services into Services)

we don't need to add injectable,

4:06

S… Speaker 1 (115. Injecting Services into Services)

the injectable decorator here to this class,

4:08

S… Speaker 1 (115. Injecting Services into Services)

because this is a service which we only inject somewhere else,

4:12

S… Speaker 1 (115. Injecting Services into Services)

but where we don't inject anything into this service.

4:15

S… Speaker 1 (115. Injecting Services into Services)

And you technically really only need injectable if you inject something into this

4:20

S… Speaker 1 (115. Injecting Services into Services)

service, not if you just inject this service somewhere else.

4:23

S… Speaker 1 (115. Injecting Services into Services)

In newer versions of Angular,

4:26

S… Speaker 1 (115. Injecting Services into Services)

however, it is recommended that you always add

4:29

S… Speaker 1 (115. Injecting Services into Services)

at injectable it technically makes no difference right now in the future

4:33

S… Speaker 1 (115. Injecting Services into Services)

it might though so it's already a habit you might get into that you add

4:38

S… Speaker 1 (115. Injecting Services into Services)

it here i do omit it but you could consider adding it also to ensure

4:42

S… Speaker 1 (115. Injecting Services into Services)

that in the future it doesn't unexpectedly break what i explained about

4:46

S… Speaker 1 (115. Injecting Services into Services)

why you need it and that you don't need it here technically still holds though with

4:51

S… Speaker 1 (115. Injecting Services into Services)

this if i now save this and we let the app reload

4:54

S… Speaker 1 (115. Injecting Services into Services)

Now it works.

4:55

S… Speaker 1 (115. Injecting Services into Services)

And now you see that if I save this,

4:58

S… Speaker 1 (115. Injecting Services into Services)

we still log it to the console with the correct status.

5:01

S… Speaker 1 (115. Injecting Services into Services)

The same happens if I click here.

5:03

S… Speaker 1 (115. Injecting Services into Services)

But now everything is centralized into our service.

5:07

S… Speaker 1 (115. Injecting Services into Services)

And now we're also injecting a service into a service.

Αυτό το αντίγραφο δημιουργήθηκε από τον AI (αυτόματη αναγνώριση ομιλίας). Μπορεί να περιέχει σφάλματα Πολιτική AI

❤️ Σου αρέσει το STT.ai; Πες το στους φίλους σου!

Περίληψη

Κάντε κλικ στο Summarize για να δημιουργήσετε μια περίληψη AI αυτής της μεταγραφής.

Ρωτήστε τον Αλ γι' αυτό το σενάριο.

Ρωτήστε οτιδήποτε σχετικά με αυτό το αντίγραφο, το AI θα βρει σχετικές ενότητες και θα απαντήσει.

Τρανσέιντερ άλλος ένας...