112. Creating a Data Service

0:02

S… Speaker 1 (112. Creating a Data Service)

We saw how to use that logging service in the last lecture.

0:07

S… Speaker 1 (112. Creating a Data Service)

Now let me show you another typical use case for a service to

0:11

S… Speaker 1 (112. Creating a Data Service)

store and manage our data.

0:13

S… Speaker 1 (112. Creating a Data Service)

So for example,

0:15

S… Speaker 1 (112. Creating a Data Service)

our accounts.

0:16

S… Speaker 1 (112. Creating a Data Service)

Right now I store them here in the app component and then we have this

0:20

S… Speaker 1 (112. Creating a Data Service)

chain of property and event binding to get data to the app

0:24

S… Speaker 1 (112. Creating a Data Service)

component so that we there can update our accounts.

0:26

S… Speaker 1 (112. Creating a Data Service)

Let's create a service for that.

0:29

S… Speaker 1 (112. Creating a Data Service)

The account service maybe.

0:31

S… Speaker 1 (112. Creating a Data Service)

So I will create this and I will export

0:35

S… Speaker 1 (112. Creating a Data Service)

my accounts.

0:37

S… Speaker 1 (112. Creating a Data Service)

service class here,

0:38

S… Speaker 1 (112. Creating a Data Service)

just like that.

0:41

S… Speaker 2 (112. Creating a Data Service)

And here,

0:42

S… Speaker 1 (112. Creating a Data Service)

I will now copy in my accounts.

0:44

S… Speaker 1 (112. Creating a Data Service)

So I will remove them from my app component and paste them into

0:49

S… Speaker 1 (112. Creating a Data Service)

my accounts service.

0:50

S… Speaker 1 (112. Creating a Data Service)

And I will add a add account method here,

0:54

S… Speaker 1 (112. Creating a Data Service)

where I simply expect to get account name and status.

0:58

S… Speaker 2 (112. Creating a Data Service)

And I will add

1:02

S… Speaker 1 (112. Creating a Data Service)

a update

1:06

S… Speaker 1 (112. Creating a Data Service)

status method where I expect to get the ID of the account I want to update

1:10

S… Speaker 1 (112. Creating a Data Service)

and then the new status here.

1:13

S… Speaker 1 (112. Creating a Data Service)

Now the logic for these two methods is basically the same

1:17

S… Speaker 1 (112. Creating a Data Service)

as in the app component.

1:19

S… Speaker 1 (112. Creating a Data Service)

For a new account or in the add account,

1:22

S… Speaker 1 (112. Creating a Data Service)

I simply want to push a new account onto my array of

1:26

S… Speaker 1 (112. Creating a Data Service)

accounts.

1:27

S… Speaker 1 (112. Creating a Data Service)

And here I will simply quickly create a new object where I assign the

1:31

S… Speaker 1 (112. Creating a Data Service)

name and the status.

1:33

S… Speaker 1 (112. Creating a Data Service)

So the data we get passed into this method.

1:36

S… Speaker 1 (112. Creating a Data Service)

for the status changed well here I basically

1:40

S… Speaker 1 (112. Creating a Data Service)

want to also just access my

1:44

S… Speaker 1 (112. Creating a Data Service)

account with that ID here and set the status to,

1:48

S… Speaker 1 (112. Creating a Data Service)

well,

1:48

S… Speaker 1 (112. Creating a Data Service)

the new status we get passed as an argument too.

1:51

S… Speaker 2 (112. Creating a Data Service)

So with that,

1:53

S… Speaker 1 (112. Creating a Data Service)

this service looks all right.

1:55

S… Speaker 1 (112. Creating a Data Service)

We got our accounts there and we got our methods to

1:59

S… Speaker 1 (112. Creating a Data Service)

change something there.

2:00

S… Speaker 1 (112. Creating a Data Service)

Of course,

2:01

S… Speaker 1 (112. Creating a Data Service)

the app is broken though.

2:02

S… Speaker 1 (112. Creating a Data Service)

Because for one,

2:04

S… Speaker 1 (112. Creating a Data Service)

I don't need that code in the app component anymore.

2:07

S… Speaker 1 (112. Creating a Data Service)

If we have a look at the app component template,

2:09

S… Speaker 1 (112. Creating a Data Service)

we still loop through all the accounts here.

2:13

S… Speaker 1 (112. Creating a Data Service)

So I should still have my accounts here in the app component,

2:17

S… Speaker 1 (112. Creating a Data Service)

but we removed them from here.

2:18

S… Speaker 1 (112. Creating a Data Service)

They're now in the service.

2:20

S… Speaker 1 (112. Creating a Data Service)

So we should maybe re -add them here.

2:23

S… Speaker 1 (112. Creating a Data Service)

But now this should simply be an array of accounts.

2:28

S… Speaker 1 (112. Creating a Data Service)

So each account object has a name,

2:31

S… Speaker 1 (112. Creating a Data Service)

which is a string and a status,

2:34

S… Speaker 1 (112. Creating a Data Service)

which is a string.

2:34

S… Speaker 1 (112. Creating a Data Service)

So I'm just defining the type here.

2:36

S… Speaker 1 (112. Creating a Data Service)

And we want to have an array of such objects.

2:38

S… Speaker 1 (112. Creating a Data Service)

Initially,

2:39

S… Speaker 1 (112. Creating a Data Service)

it should be an empty array.

2:40

S… Speaker 1 (112. Creating a Data Service)

This is what I'm saying here.

2:42

S… Speaker 1 (112. Creating a Data Service)

Now, since we have our account service,

2:44

S… Speaker 1 (112. Creating a Data Service)

we should inject it here as we learned it.

2:46

S… Speaker 1 (112. Creating a Data Service)

So let's add our accounts service here of

2:50

S… Speaker 1 (112. Creating a Data Service)

type account service.

2:52

S… Speaker 1 (112. Creating a Data Service)

The type is super important to inform Angular about what we need here.

2:55

S… Speaker 1 (112. Creating a Data Service)

Let's close this body of the constructor and

3:00

S… Speaker 1 (112. Creating a Data Service)

make sure to add the import at the top pointing to your account service

3:04

S… Speaker 1 (112. Creating a Data Service)

file.

3:04

S… Speaker 1 (112. Creating a Data Service)

Now,

3:06

S… Speaker 1 (112. Creating a Data Service)

what did we learn?

3:07

S… Speaker 1 (112. Creating a Data Service)

We also need to add a provider.

3:09

S… Speaker 1 (112. Creating a Data Service)

So here at the providers array,

3:12

S… Speaker 1 (112. Creating a Data Service)

we should add accounts service so that Angular knows

3:16

S… Speaker 1 (112. Creating a Data Service)

how to create such an account service.

3:18

S… Speaker 2 (112. Creating a Data Service)

With that,

3:20

S… Speaker 1 (112. Creating a Data Service)

we can now add,

3:21

S… Speaker 1 (112. Creating a Data Service)

for example,

3:21

S… Speaker 1 (112. Creating a Data Service)

onInit,

3:22

S… Speaker 1 (112. Creating a Data Service)

this onInit lifecycle hook,

3:24

S… Speaker 1 (112. Creating a Data Service)

as most initialization should not be done in the constructor,

3:28

S… Speaker 1 (112. Creating a Data Service)

but instead here,

3:29

S… Speaker 1 (112. Creating a Data Service)

and simply set this accounts

3:33

S… Speaker 1 (112. Creating a Data Service)

accounts equal to this account service which is available

3:37

S… Speaker 1 (112. Creating a Data Service)

as a property because I use this shortcut with the accessor in front of

3:41

S… Speaker 1 (112. Creating a Data Service)

the argument name and here

3:44

S… Speaker 1 (112. Creating a Data Service)

I can access my accounts field.

3:46

S… Speaker 1 (112. Creating a Data Service)

Just as a little note,

3:48

S… Speaker 1 (112. Creating a Data Service)

since accounts here is an array,

3:50

S… Speaker 1 (112. Creating a Data Service)

it is a reference type.

3:51

S… Speaker 1 (112. Creating a Data Service)

This is normal JavaScript behavior.

3:54

S… Speaker 1 (112. Creating a Data Service)

So this is a reference type.

3:56

S… Speaker 1 (112. Creating a Data Service)

So by setting it equal here,

3:58

S… Speaker 1 (112. Creating a Data Service)

we're actually getting access to the exact same array as stored in

4:02

S… Speaker 1 (112. Creating a Data Service)

the service, just as a side note.

4:04

S… Speaker 2 (112. Creating a Data Service)

So with that,

4:06

S… Speaker 1 (112. Creating a Data Service)

we do have access to the accounts.

4:08

S… Speaker 1 (112. Creating a Data Service)

And if we save this and have a look at

4:12

S… Speaker 1 (112. Creating a Data Service)

our application,

4:14

S… Speaker 1 (112. Creating a Data Service)

This still seems to work.

4:15

S… Speaker 1 (112. Creating a Data Service)

These buttons will not work and will actually give us errors because I removed the event

4:19

S… Speaker 1 (112. Creating a Data Service)

listeners.

4:20

S… Speaker 1 (112. Creating a Data Service)

But in general,

4:21

S… Speaker 1 (112. Creating a Data Service)

this looks alright.

4:22

S… Speaker 1 (112. Creating a Data Service)

We can see the free accounts which are now stored in our account service.

4:27

S… Speaker 2 (112. Creating a Data Service)

So with that,

4:29

S… Speaker 1 (112. Creating a Data Service)

let's go back to our application.

4:31

S… Speaker 1 (112. Creating a Data Service)

And here I now want to update the account component and the

4:35

S… Speaker 1 (112. Creating a Data Service)

new account component.

4:36

S… Speaker 1 (112. Creating a Data Service)

Let's start with the new account.

4:38

S… Speaker 1 (112. Creating a Data Service)

Here we no longer need to emit this event here

4:42

S… Speaker 1 (112. Creating a Data Service)

because we're not listening to it anyways.

4:43

S… Speaker 1 (112. Creating a Data Service)

So we can get rid of the output here,

4:46

S… Speaker 1 (112. Creating a Data Service)

get rid of the imports up here of event emitter and output.

4:49

S… Speaker 2 (112. Creating a Data Service)

And instead,

4:50

S… Speaker 1 (112. Creating a Data Service)

we should inject our service,

4:52

S… Speaker 1 (112. Creating a Data Service)

our accounts service of type accounts

4:56

S… Speaker 1 (112. Creating a Data Service)

service.

4:57

S… Speaker 1 (112. Creating a Data Service)

And what did we learn?

4:59

S… Speaker 1 (112. Creating a Data Service)

We should provide it,

5:00

S… Speaker 1 (112. Creating a Data Service)

right? So let's add account service,

5:04

S… Speaker 1 (112. Creating a Data Service)

account service,

5:04

S… Speaker 1 (112. Creating a Data Service)

and make sure to add the import at the top.

5:07

S… Speaker 1 (112. Creating a Data Service)

Now with this in here,

5:09

S… Speaker 1 (112. Creating a Data Service)

I can call account service add account and

5:14

S… Speaker 1 (112. Creating a Data Service)

pass the account name and the account status as this is

5:18

S… Speaker 1 (112. Creating a Data Service)

what this method expects to get as arguments.

5:20

S… Speaker 2 (112. Creating a Data Service)

So with that,

5:21

S… Speaker 1 (112. Creating a Data Service)

let's go to our account component now.

5:23

S… Speaker 1 (112. Creating a Data Service)

Let's also get rid of the output here.

5:26

S… Speaker 1 (112. Creating a Data Service)

We still need the inputs because we're still receiving that data from outside.

5:30

S… Speaker 1 (112. Creating a Data Service)

And we can get rid of this event calling here.

5:33

S… Speaker 1 (112. Creating a Data Service)

We remove the output anyways.

5:34

S… Speaker 1 (112. Creating a Data Service)

Get rid of the imports we don't need anymore.

5:37

S… Speaker 1 (112. Creating a Data Service)

And now here,

5:38

S… Speaker 1 (112. Creating a Data Service)

I also want to get access to the account service.

5:41

S… Speaker 1 (112. Creating a Data Service)

So let's inject it here too.

5:43

S… Speaker 1 (112. Creating a Data Service)

Maybe in a new line to make it more readable.

5:46

S… Speaker 1 (112. Creating a Data Service)

The accounts service of type

5:50

S… Speaker 1 (112. Creating a Data Service)

accounts service like this.

5:52

S… Speaker 1 (112. Creating a Data Service)

Make sure to add the import at the top.

5:55

S… Speaker 1 (112. Creating a Data Service)

And let's add it to the providers array here.

5:59

S… Speaker 2 (112. Creating a Data Service)

With that,

5:59

S… Speaker 1 (112. Creating a Data Service)

I can now call it here,

6:01

S… Speaker 1 (112. Creating a Data Service)

account service,

6:02

S… Speaker 1 (112. Creating a Data Service)

call update status,

6:04

S… Speaker 1 (112. Creating a Data Service)

pass my ID,

6:06

S… Speaker 1 (112. Creating a Data Service)

and the new status again.

6:08

S… Speaker 1 (112. Creating a Data Service)

This is what this method expects.

6:10

S… Speaker 1 (112. Creating a Data Service)

If we now save this and go back to our application,

6:13

S… Speaker 1 (112. Creating a Data Service)

it looks all right,

6:15

S… Speaker 1 (112. Creating a Data Service)

but we quickly realized that if we click on add account,

6:20

S… Speaker 2 (112. Creating a Data Service)

We don't get an error,

6:21

S… Speaker 1 (112. Creating a Data Service)

we get the log,

6:22

S… Speaker 1 (112. Creating a Data Service)

but I don't see the account.

6:24

S… Speaker 1 (112. Creating a Data Service)

If I click these buttons,

6:26

S… Speaker 1 (112. Creating a Data Service)

I also see the log,

6:27

S… Speaker 1 (112. Creating a Data Service)

but I don't see the change here.

6:30

S… Speaker 1 (112. Creating a Data Service)

So something is not working correctly.

6:33

S… Speaker 1 (112. Creating a Data Service)

It seems like it doesn't,

6:34

S… Speaker 1 (112. Creating a Data Service)

right? Well,

6:35

S… Speaker 1 (112. Creating a Data Service)

let's have a look at what's going wrong here in the next lecture.

112. Creating a Data Service

Muhtasari

Uliza Maswali Kuhusu Mpito Huu