1
00:00:00,031 --> 00:00:04,477
[MUSIC]

2
00:00:04,477 --> 00:00:09,184
Now that we have had a quick
introduction to the MVM and

3
00:00:09,184 --> 00:00:15,564
MVVM frameworks, Angular services,
and also dependency injection,

4
00:00:15,564 --> 00:00:21,003
let's now move onto our next
exercise where we will create our

5
00:00:21,003 --> 00:00:26,442
first Angular service nd then
inject it into our component and

6
00:00:26,442 --> 00:00:29,710
make use of it within our component.

7
00:00:29,710 --> 00:00:34,370
To get started, go to your application in

8
00:00:34,370 --> 00:00:38,629
the editor pad within the App folder,

9
00:00:38,629 --> 00:00:44,237
create a new sub-folder and
name it as Services.

10
00:00:44,237 --> 00:00:52,918
Now we will make use of Angular CLI to add
a new service to our Angular application.

11
00:00:52,918 --> 00:00:57,953
To do that, at the prompt type ng

12
00:00:57,953 --> 00:01:04,673
generate service, and services/dish.

13
00:01:04,673 --> 00:01:11,480
So this will create a new service in
the Services folder named dish service.

14
00:01:11,480 --> 00:01:16,815
So, once this is created,
you see that two files get created

15
00:01:16,815 --> 00:01:23,837
by the Angular CLI called dishService.ts
and dish.service.specter.ts.

16
00:01:23,837 --> 00:01:30,010
This one is used for testing our Angular
service while we'll talk about later on.

17
00:01:30,010 --> 00:01:35,361
The second one is where we will
create our dish service and

18
00:01:35,361 --> 00:01:42,516
then inject that into our app module and
make use of it in our menu component.

19
00:01:42,516 --> 00:01:47,550
Going to the editor,
let's open the dish.service.ts file.

20
00:01:47,550 --> 00:01:52,618
Now, when you open this file,
you immediately notice here the very first

21
00:01:52,618 --> 00:01:58,108
statement there saying,
import {Injectable} from '@angular/core'.

22
00:01:58,108 --> 00:02:02,791
So this injectable allows us
to define this injectable

23
00:02:02,791 --> 00:02:06,674
decorator to any class
that we defined here.

24
00:02:06,674 --> 00:02:10,730
So you can see that we are defining
a class here called a DishService.

25
00:02:10,730 --> 00:02:15,532
By using this injectable
decorator to this dish service,

26
00:02:15,532 --> 00:02:21,030
we are making this object now
injectable within our application.

27
00:02:21,030 --> 00:02:25,481
So this is what enables the dependency
injection to be used within our

28
00:02:25,481 --> 00:02:26,490
application.

29
00:02:26,490 --> 00:02:30,345
So once you declare
the class as injectable,

30
00:02:30,345 --> 00:02:36,746
let's now configure our DishService
to provide some information for us.

31
00:02:36,746 --> 00:02:39,119
So in here, I'm going to import,

32
00:02:42,757 --> 00:02:51,413
The Dish class from the shared folder,

33
00:02:51,413 --> 00:02:55,354
and also import,

34
00:02:58,307 --> 00:03:01,887
The DISHES constant from,

35
00:03:08,402 --> 00:03:11,574
Shared folder here.

36
00:03:11,574 --> 00:03:14,353
So once I have imported this two,

37
00:03:14,353 --> 00:03:19,432
now my service can be configured
to provide the value for us.

38
00:03:19,432 --> 00:03:24,246
So inside the service, I'm going to

39
00:03:24,246 --> 00:03:29,370
add in a new method call getDishes, and

40
00:03:29,370 --> 00:03:35,753
this method will return
in array of dishes here.

41
00:03:35,753 --> 00:03:41,098
And, so this method will
return the DISHES constant

42
00:03:41,098 --> 00:03:45,722
that we have imported
into our DishService.

43
00:03:45,722 --> 00:03:50,239
With this,
our DishService is now configured to

44
00:03:50,239 --> 00:03:54,866
supply that DISHES JavaScript
object array to any

45
00:03:54,866 --> 00:03:59,398
other part of our application
that requires it.

46
00:03:59,398 --> 00:04:03,862
Now before that happens,
we need to take this service and

47
00:04:03,862 --> 00:04:06,660
then inject into our application.

48
00:04:06,660 --> 00:04:11,652
To do that,
we will open the app module .ts file.

49
00:04:11,652 --> 00:04:17,214
So inside the app module .ts file,
right after importing

50
00:04:17,214 --> 00:04:22,333
the components right there,
I'm going to import the,

51
00:04:25,974 --> 00:04:34,950
DishService right there.

52
00:04:34,950 --> 00:04:36,618
And this is imported from,

53
00:04:42,730 --> 00:04:46,466
Services DishService here.

54
00:04:46,466 --> 00:04:53,885
So once we import that, then we will
declare this DishService as a provider.

55
00:04:53,885 --> 00:04:58,121
So if you go into the ng module decorator,
so

56
00:04:58,121 --> 00:05:03,170
you see this third property
here called providers.

57
00:05:03,170 --> 00:05:05,960
So we have declarations,
imports, and providers.

58
00:05:05,960 --> 00:05:11,176
So whenever you have a service that
you want to make available for

59
00:05:11,176 --> 00:05:14,860
all the components from
part of this module.

60
00:05:14,860 --> 00:05:21,170
Then you will specify that as
a provider within the module here.

61
00:05:21,170 --> 00:05:25,618
So right there, I'm going to say,
DishService, here.

62
00:05:25,618 --> 00:05:31,036
So with this, my DishService now becomes
available for the rest of the application.

63
00:05:31,036 --> 00:05:32,186
Now, how does this happen?

64
00:05:32,186 --> 00:05:36,948
The Angular's dependency injectable
looks at this information that we

65
00:05:36,948 --> 00:05:41,944
have declared here and then decides that
it needs to create a DishService and

66
00:05:41,944 --> 00:05:44,382
injects it wherever it is required.

67
00:05:44,382 --> 00:05:47,092
Now, how do we make use of that service?

68
00:05:47,092 --> 00:05:52,674
We see that in the menu component
we were earlier getting

69
00:05:52,674 --> 00:06:00,180
the DISHES constant direct by importing
from the shared dishes file here.

70
00:06:00,180 --> 00:06:04,681
Now this is not the ideal way
of obtaining the information,

71
00:06:04,681 --> 00:06:09,812
instead of tying in the information
directly into your component,

72
00:06:09,812 --> 00:06:14,685
you should rather let a service
fetch that information for you.

73
00:06:14,685 --> 00:06:19,065
Later on, we can redesign our
service to be able to go and

74
00:06:19,065 --> 00:06:24,579
fetch the same information from
a back-end server if you so require.

75
00:06:24,579 --> 00:06:28,396
Indeed, that is what we'll be doing
in some of the later exercises.

76
00:06:28,396 --> 00:06:33,384
So you will delegate the responsibility of
fetching the information to the service

77
00:06:33,384 --> 00:06:37,814
and then you'll just make use of
the service within this menu component.

78
00:06:37,814 --> 00:06:43,627
So we will delete this dishes
component from there and

79
00:06:43,627 --> 00:06:48,806
instead we will import
that DishService here.

80
00:06:48,806 --> 00:06:52,105
And this DishService is imported from,

81
00:06:57,492 --> 00:07:04,140
services/dish.service file here.

82
00:07:04,140 --> 00:07:09,744
So after adding this now we
have done one part of the job.

83
00:07:09,744 --> 00:07:14,774
Now we need to make this service
available for our component to make use.

84
00:07:14,774 --> 00:07:18,107
So that is where we will come
down to this constructor here.

85
00:07:18,107 --> 00:07:19,769
In this constructor, so

86
00:07:19,769 --> 00:07:23,813
now you see the use of the constructor
within our class here.

87
00:07:23,813 --> 00:07:28,814
So in this constructor we will see

88
00:07:28,814 --> 00:07:35,609
private dishService and DishService here.

89
00:07:35,609 --> 00:07:38,377
So this is of the DishService type, so

90
00:07:38,377 --> 00:07:43,914
when you declare this in the constructor,
when this component is created,

91
00:07:43,914 --> 00:07:48,771
then this DishService that you
have injected into the app module.

92
00:07:48,771 --> 00:07:52,222
When you inject that into the app module,

93
00:07:52,222 --> 00:07:56,177
it'll create one single
dishService object.

94
00:07:56,177 --> 00:08:00,956
And that dishService object will be
made available to you within your menu

95
00:08:00,956 --> 00:08:02,123
component here.

96
00:08:02,123 --> 00:08:09,606
So now you can then call upon the methods
that this DishService provides for

97
00:08:09,606 --> 00:08:13,780
you in order to do
the work on your behalf.

98
00:08:13,780 --> 00:08:15,847
So once you put that in there,

99
00:08:15,847 --> 00:08:20,333
now we realize that we no longer
have this DISHES constant here.

100
00:08:20,333 --> 00:08:24,311
So I need to somehow
fetch this information.

101
00:08:24,311 --> 00:08:29,138
Now this is where I'm going to leverage
the service that I have available to me to

102
00:08:29,138 --> 00:08:31,023
fetch the information for us.

103
00:08:31,023 --> 00:08:33,257
Where do we fetch this information?

104
00:08:33,257 --> 00:08:38,058
So, this is where we're going to take
the help of this life cycle method called

105
00:08:38,058 --> 00:08:38,801
ngOnInit.

106
00:08:38,801 --> 00:08:43,861
So, when you declare this life cycle
method called ngOnInit in your

107
00:08:43,861 --> 00:08:49,561
application, so you see that in the class,
you say implements the OnInit.

108
00:08:49,561 --> 00:08:54,239
So the implementation of
this OnInit requires you to

109
00:08:54,239 --> 00:08:59,570
implement this ngOnInit method
as part of your class here.

110
00:08:59,570 --> 00:09:02,461
So inside this ngOnInit method,

111
00:09:02,461 --> 00:09:07,450
you can now ask the service
to fetch this information.

112
00:09:07,450 --> 00:09:08,690
Why is that so?

113
00:09:08,690 --> 00:09:13,560
This life cycle method will be executed

114
00:09:13,560 --> 00:09:19,040
by the Angular framework whenever
this component is instantiated.

115
00:09:19,040 --> 00:09:23,770
So whenever this component gets created,
this method is going to be executed.

116
00:09:23,770 --> 00:09:30,324
So when that method is executed,
then at that point I can go and

117
00:09:30,324 --> 00:09:34,623
fetch the dishes from the dishService.

118
00:09:34,623 --> 00:09:36,839
So I can say dishService, and

119
00:09:36,839 --> 00:09:42,700
then you'll know that you have the
getDishes method inside the dishService.

120
00:09:42,700 --> 00:09:48,105
You can invoke upon the method
to fetch the dishes for you.

121
00:09:48,105 --> 00:09:52,511
Now when we do this,
then the dishes object will be supplied by

122
00:09:52,511 --> 00:09:56,090
the service to us through
this getDishes method.

123
00:09:56,090 --> 00:10:03,829
And that can be put into our dishes local
variable that we have defined here.

124
00:10:03,829 --> 00:10:08,563
So with this, we complete the update

125
00:10:08,563 --> 00:10:12,847
to all of our application files.

126
00:10:12,847 --> 00:10:18,993
Let's go and take a quick look at
the resulting Angular application.

127
00:10:18,993 --> 00:10:23,507
Switching to the browser, you can now
see that in the browser the Angular

128
00:10:23,507 --> 00:10:26,030
application renders just like before.

129
00:10:26,030 --> 00:10:30,342
In this version as you have seen,
the information about the dishes

130
00:10:30,342 --> 00:10:34,967
is going to be fetched into your
component by making use of the service.

131
00:10:34,967 --> 00:10:38,847
The service in turn is going to
fetch in this information for you.

132
00:10:38,847 --> 00:10:41,945
Now at this moment we are keeping
the service very basic.

133
00:10:41,945 --> 00:10:46,105
The service simply returns this constant
value that we have defined here.

134
00:10:46,105 --> 00:10:50,738
Later on, you can imagine that you would
be extending the service to go and

135
00:10:50,738 --> 00:10:54,042
fetch this information
from the back-end server.

136
00:10:54,042 --> 00:10:55,428
When that happens,

137
00:10:55,428 --> 00:11:00,489
the fetching of information is not
going to be instantaneously any more.

138
00:11:00,489 --> 00:11:04,911
That is where we would need
the help of promises and

139
00:11:04,911 --> 00:11:11,022
also the reactive JavaScript approach for
supporting this delay and

140
00:11:11,022 --> 00:11:17,881
dealing with the delay in fetching
the information within our application.

141
00:11:17,881 --> 00:11:21,699
We'll talk about that in more
detail in the next module.

142
00:11:21,699 --> 00:11:26,683
For now, our application will run just
fine, so you can select any one of

143
00:11:26,683 --> 00:11:32,370
those dishes and the information
will be displayed just like before.

144
00:11:32,370 --> 00:11:38,250
With this, we compete this exercise where
we learn the basics of Angular services.

145
00:11:38,250 --> 00:11:41,700
And we also saw how we can make
use of the Angular service,

146
00:11:41,700 --> 00:11:46,118
within our applications component.

147
00:11:46,118 --> 00:11:51,682
This is a good time for you to do a git
commit with the message basic services.

148
00:11:51,682 --> 00:11:57,797
[MUSIC].