110. Injecting the Logging Service into Components

0:02

S… Speaker 1 (110. Injecting the Logging Service into Components)

In the last lecture we created our service and I told you to not instantiate

0:06

S… Speaker 1 (110. Injecting the Logging Service into Components)

it on your own.

0:07

S… Speaker 1 (110. Injecting the Logging Service into Components)

I told you that Angular offers some great tool which will give us

0:11

S… Speaker 1 (110. Injecting the Logging Service into Components)

access to our services.

0:12

S… Speaker 1 (110. Injecting the Logging Service into Components)

It's Angular's dependency injector.

0:16

S… Speaker 1 (110. Injecting the Logging Service into Components)

What is a dependency injector?

0:18

S… Speaker 1 (110. Injecting the Logging Service into Components)

Well, a dependency is something a class of ours will depend on.

0:22

S… Speaker 1 (110. Injecting the Logging Service into Components)

For example,

0:23

S… Speaker 1 (110. Injecting the Logging Service into Components)

the new account component depends on that logging service because we

0:27

S… Speaker 1 (110. Injecting the Logging Service into Components)

want to call a method in that service.

0:29

S… Speaker 1 (110. Injecting the Logging Service into Components)

And the

0:31

S… Speaker 1 (110. Injecting the Logging Service into Components)

Dependency Injector simply injects this dependency,

0:34

S… Speaker 1 (110. Injecting the Logging Service into Components)

injects an instance of this class into our component

0:39

S… Speaker 1 (110. Injecting the Logging Service into Components)

automatically.

0:39

S… Speaker 1 (110. Injecting the Logging Service into Components)

All we need to do is we need to inform Angular that we require

0:44

S… Speaker 1 (110. Injecting the Logging Service into Components)

such an instance.

0:45

S… Speaker 1 (110. Injecting the Logging Service into Components)

So how do we inform Angular that we require such an instance?

0:49

S… Speaker 1 (110. Injecting the Logging Service into Components)

We add a constructor to the class,

0:53

S… Speaker 1 (110. Injecting the Logging Service into Components)

to the component,

0:54

S… Speaker 1 (110. Injecting the Logging Service into Components)

in this case where we want to use our service.

0:56

S… Speaker 1 (110. Injecting the Logging Service into Components)

So there I can bind it to a property by using

1:01

S… Speaker 1 (110. Injecting the Logging Service into Components)

this TypeScript shortcut of adding an accessor in front of the name of the argument

1:05

S… Speaker 1 (110. Injecting the Logging Service into Components)

to instantly create a property with the same name and bind the value to

1:09

S… Speaker 1 (110. Injecting the Logging Service into Components)

it. So here I will name this logging service.

1:12

S… Speaker 1 (110. Injecting the Logging Service into Components)

This name is totally up to you.

1:14

S… Speaker 1 (110. Injecting the Logging Service into Components)

Now this is the important part here though.

1:16

S… Speaker 1 (110. Injecting the Logging Service into Components)

Add a type assignment here.

1:18

S… Speaker 1 (110. Injecting the Logging Service into Components)

This is not optional.

1:20

S… Speaker 1 (110. Injecting the Logging Service into Components)

You need to set the type and the type has to be the class you want

1:24

S… Speaker 1 (110. Injecting the Logging Service into Components)

to get injected.

1:25

S… Speaker 1 (110. Injecting the Logging Service into Components)

Logging service in this case.

1:27

S… Speaker 1 (110. Injecting the Logging Service into Components)

Make sure to also add the import at the top.

1:31

S… Speaker 1 (110. Injecting the Logging Service into Components)

Now, let me close the body of this constructor.

1:33

S… Speaker 1 (110. Injecting the Logging Service into Components)

And this simple task here informs Angular that we will

1:38

S… Speaker 1 (110. Injecting the Logging Service into Components)

need an instance of this logging service.

1:40

S… Speaker 1 (110. Injecting the Logging Service into Components)

Correctly,

1:41

S… Speaker 1 (110. Injecting the Logging Service into Components)

you might ask,

1:42

S… Speaker 1 (110. Injecting the Logging Service into Components)

well, how do we inform Angular?

1:44

S… Speaker 1 (110. Injecting the Logging Service into Components)

Why does this matter if we write this in the constructor?

1:47

S… Speaker 1 (110. Injecting the Logging Service into Components)

Think about who gives us the instance

1:51

S… Speaker 1 (110. Injecting the Logging Service into Components)

of this account component,

1:52

S… Speaker 1 (110. Injecting the Logging Service into Components)

this new account component here.

1:54

S… Speaker 1 (110. Injecting the Logging Service into Components)

This is a TypeScript class in the end,

1:56

S… Speaker 1 (110. Injecting the Logging Service into Components)

so somewhere this needs to get instantiated so that something happens in

2:00

S… Speaker 1 (110. Injecting the Logging Service into Components)

our app.

2:01

S… Speaker 1 (110. Injecting the Logging Service into Components)

Well, who is responsible for creating our components?

2:05

S… Speaker 1 (110. Injecting the Logging Service into Components)

Angular is,

2:06

S… Speaker 1 (110. Injecting the Logging Service into Components)

of course, because we're placing selectors in our templates.

2:10

S… Speaker 1 (110. Injecting the Logging Service into Components)

And when Angular comes across these selectors,

2:13

S… Speaker 1 (110. Injecting the Logging Service into Components)

it gives us instances of our components.

2:15

S… Speaker 1 (110. Injecting the Logging Service into Components)

Now,

2:16

S… Speaker 1 (110. Injecting the Logging Service into Components)

since Angular is responsible for instantiating our components,

2:20

S… Speaker 1 (110. Injecting the Logging Service into Components)

Angular will need to construct them correctly.

2:25

S… Speaker 1 (110. Injecting the Logging Service into Components)

So if we define in the constructor that we require some

2:29

S… Speaker 1 (110. Injecting the Logging Service into Components)

argument, Angular will recognize this.

2:31

S… Speaker 1 (110. Injecting the Logging Service into Components)

And now it tries to give us that argument.

2:34

S… Speaker 1 (110. Injecting the Logging Service into Components)

It tries to give us this,

2:37

S… Speaker 1 (110. Injecting the Logging Service into Components)

well,

2:38

S… Speaker 1 (110. Injecting the Logging Service into Components)

type in this case.

2:39

S… Speaker 1 (110. Injecting the Logging Service into Components)

So it knows we want an instance of the logging service

2:44

S… Speaker 1 (110. Injecting the Logging Service into Components)

class because we define the type here.

2:45

S… Speaker 1 (110. Injecting the Logging Service into Components)

This is why this is important.

2:46

S… Speaker 1 (110. Injecting the Logging Service into Components)

Now that is almost enough,

2:49

S… Speaker 1 (110. Injecting the Logging Service into Components)

but not quite.

2:50

S… Speaker 1 (110. Injecting the Logging Service into Components)

Now Angular knows what we want,

2:53

S… Speaker 1 (110. Injecting the Logging Service into Components)

but it doesn't know how to give us such an instance.

2:56

S… Speaker 1 (110. Injecting the Logging Service into Components)

We need to do one additional step.

2:59

S… Speaker 1 (110. Injecting the Logging Service into Components)

We need to provide a service.

3:02

S… Speaker 1 (110. Injecting the Logging Service into Components)

Provide simply means we tell Angular how

3:06

S… Speaker 1 (110. Injecting the Logging Service into Components)

to create it.

3:07

S… Speaker 1 (110. Injecting the Logging Service into Components)

And that sounds very complicated and it is very simple.

3:10

S… Speaker 1 (110. Injecting the Logging Service into Components)

All we have to do is add one extra property to the addComponentDecorator,

3:15

S… Speaker 1 (110. Injecting the Logging Service into Components)

the providers property here.

3:19

S… Speaker 1 (110. Injecting the Logging Service into Components)

This also takes an array like other properties we added before.

3:23

S… Speaker 1 (110. Injecting the Logging Service into Components)

And here we again just have to specify the type

3:27

S… Speaker 1 (110. Injecting the Logging Service into Components)

of what we want to be able to get provided,

3:30

S… Speaker 1 (110. Injecting the Logging Service into Components)

you could say.

3:31

S… Speaker 1 (110. Injecting the Logging Service into Components)

So logging service again.

3:33

S… Speaker 1 (110. Injecting the Logging Service into Components)

Now with that,

3:34

S… Speaker 1 (110. Injecting the Logging Service into Components)

Angular, when analyzing the component,

3:37

S… Speaker 1 (110. Injecting the Logging Service into Components)

recognizes that it should be able to give us such a logging

3:41

S… Speaker 1 (110. Injecting the Logging Service into Components)

service and it will set itself up to be able to do so.

3:44

S… Speaker 1 (110. Injecting the Logging Service into Components)

And when it then actually...

3:46

S… Speaker 1 (110. Injecting the Logging Service into Components)

builds the component,

3:47

S… Speaker 1 (110. Injecting the Logging Service into Components)

constructs it,

3:48

S… Speaker 1 (110. Injecting the Logging Service into Components)

it sees that we want to have such an instance,

3:51

S… Speaker 1 (110. Injecting the Logging Service into Components)

and it will know how to give us such an instance.

3:53

S… Speaker 1 (110. Injecting the Logging Service into Components)

And now,

3:55

S… Speaker 1 (110. Injecting the Logging Service into Components)

we can simply,

3:56

S… Speaker 1 (110. Injecting the Logging Service into Components)

in our component,

3:57

S… Speaker 1 (110. Injecting the Logging Service into Components)

anywhere in this component,

3:59

S… Speaker 1 (110. Injecting the Logging Service into Components)

access our LoggingService property,

4:02

S… Speaker 1 (110. Injecting the Logging Service into Components)

which is created automatically since I used this TypeScript shortcut here,

4:06

S… Speaker 1 (110. Injecting the Logging Service into Components)

and call LogStatusChange.

4:08

S… Speaker 1 (110. Injecting the Logging Service into Components)

So now I'm not creating that instance manually,

4:12

S… Speaker 1 (110. Injecting the Logging Service into Components)

Angular does it for us.

4:14

S… Speaker 1 (110. Injecting the Logging Service into Components)

And why is this better than creating it manually?

4:17

S… Speaker 1 (110. Injecting the Logging Service into Components)

You will see some other advantages later,

4:20

S… Speaker 1 (110. Injecting the Logging Service into Components)

but this basically lets you stay in the Angular ecosystem.

4:23

S… Speaker 1 (110. Injecting the Logging Service into Components)

And Angular knows how your app works.

4:26

S… Speaker 1 (110. Injecting the Logging Service into Components)

Again,

4:27

S… Speaker 1 (110. Injecting the Logging Service into Components)

some other advantages will come up later.

4:29

S… Speaker 1 (110. Injecting the Logging Service into Components)

So with this,

4:31

S… Speaker 1 (110. Injecting the Logging Service into Components)

we now have the same code as before.

4:35

S… Speaker 1 (110. Injecting the Logging Service into Components)

So if we have a look at our application again and create

4:39

S… Speaker 1 (110. Injecting the Logging Service into Components)

a new account,

4:41

S… Speaker 1 (110. Injecting the Logging Service into Components)

we still see the log here.

4:44

S… Speaker 1 (110. Injecting the Logging Service into Components)

depending on which status we chose here.

4:47

S… Speaker 1 (110. Injecting the Logging Service into Components)

So this still works,

4:49

S… Speaker 1 (110. Injecting the Logging Service into Components)

but now we're injecting the service.

4:51

S… Speaker 1 (110. Injecting the Logging Service into Components)

Now let's also do the same by copying that

4:55

S… Speaker 1 (110. Injecting the Logging Service into Components)

in the account component here.

4:57

S… Speaker 1 (110. Injecting the Logging Service into Components)

So here I will also add the constructor.

5:00

S… Speaker 1 (110. Injecting the Logging Service into Components)

And of course here we also need to add the import because

5:05

S… Speaker 1 (110. Injecting the Logging Service into Components)

TypeScript needs to know where this logging service comes from.

5:07

S… Speaker 1 (110. Injecting the Logging Service into Components)

Not Angular,

5:08

S… Speaker 1 (110. Injecting the Logging Service into Components)

TypeScript.

5:10

S… Speaker 1 (110. Injecting the Logging Service into Components)

And I will also add my provider,

5:13

S… Speaker 1 (110. Injecting the Logging Service into Components)

of course, because for this component too,

5:15

S… Speaker 1 (110. Injecting the Logging Service into Components)

I need to inform Angular how to create this logging service.

5:19

S… Speaker 1 (110. Injecting the Logging Service into Components)

So if we do this and then go

5:23

S… Speaker 1 (110. Injecting the Logging Service into Components)

back to the application here,

5:24

S… Speaker 1 (110. Injecting the Logging Service into Components)

let it reload,

5:26

S… Speaker 1 (110. Injecting the Logging Service into Components)

create a new service again.

5:29

S… Speaker 1 (110. Injecting the Logging Service into Components)

This works.

5:30

S… Speaker 1 (110. Injecting the Logging Service into Components)

Now let's change the status and this also still works.

5:34

S… Speaker 2 (110. Injecting the Logging Service into Components)

Now,

5:35

S… Speaker 1 (110. Injecting the Logging Service into Components)

of course, because I didn't replace this here,

5:37

S… Speaker 1 (110. Injecting the Logging Service into Components)

so let's call the logging service now and

5:41

S… Speaker 1 (110. Injecting the Logging Service into Components)

call log status change and pass the

5:45

S… Speaker 1 (110. Injecting the Logging Service into Components)

status.

5:46

S… Speaker 2 (110. Injecting the Logging Service into Components)

Now,

5:47

S… Speaker 1 (110. Injecting the Logging Service into Components)

if we save this,

5:49

S… Speaker 1 (110. Injecting the Logging Service into Components)

and try to change this,

5:51

S… Speaker 1 (110. Injecting the Logging Service into Components)

it still works.

5:52

S… Speaker 1 (110. Injecting the Logging Service into Components)

So now we got this same logging functionality outsourced

5:56

S… Speaker 1 (110. Injecting the Logging Service into Components)

centralized in a service.

5:58

S… Speaker 1 (110. Injecting the Logging Service into Components)

And therefore our code here is a bit leaner.

6:01

S… Speaker 1 (110. Injecting the Logging Service into Components)

And I guess you can imagine how in bigger applications where you have

6:05

S… Speaker 1 (110. Injecting the Logging Service into Components)

duplicate code,

6:06

S… Speaker 1 (110. Injecting the Logging Service into Components)

a service can really help you to get more dry to don't

6:10

S… Speaker 1 (110. Injecting the Logging Service into Components)

repeat yourself all the time,

6:12

S… Speaker 1 (110. Injecting the Logging Service into Components)

but instead to really cleverly outsource your code

6:16

S… Speaker 1 (110. Injecting the Logging Service into Components)

into a service and have it there.

110. Injecting the Logging Service into Components

Ringkasan

Tanyakan AI Tentang Transcript Ini