1
00:00:00,000 --> 00:00:04,965
[MUSIC]

2
00:00:04,965 --> 00:00:10,050
In this exercise we're going to look
at how we can leverage the Angular's

3
00:00:10,050 --> 00:00:14,397
routing module to be able to
support multiple components, and

4
00:00:14,397 --> 00:00:19,830
be able to navigate to any one of those
components in our Angular application.

5
00:00:21,690 --> 00:00:26,280
Taking a quick look at
the state of our application.

6
00:00:26,280 --> 00:00:29,647
At the end of the last exercise,

7
00:00:29,647 --> 00:00:36,135
we already noticed that in this
application, in the header,

8
00:00:36,135 --> 00:00:42,520
we have links to four different quote,
unquote pages here.

9
00:00:42,520 --> 00:00:47,334
Now in Angular terms,
this would be supported by using

10
00:00:47,334 --> 00:00:52,371
different components,
as we will see in this exercise.

11
00:00:52,371 --> 00:00:55,706
So here we see that when
we click on the Home,

12
00:00:55,706 --> 00:01:01,840
we want to be able to see the details of
what should be present in the Home page.

13
00:01:01,840 --> 00:01:07,182
And similarly, the About and the Menu of
course you already see it right there,

14
00:01:07,182 --> 00:01:12,608
and then the Contact, probably displays
some information about the content for

15
00:01:12,608 --> 00:01:15,040
this particular restaurant.

16
00:01:15,040 --> 00:01:18,450
So how do they go about
supporting something like this?

17
00:01:18,450 --> 00:01:23,490
First, by taking one quick look
at it we see that the Menu is

18
00:01:23,490 --> 00:01:28,470
already supported by displaying
the information about the menu here, and

19
00:01:28,470 --> 00:01:32,720
this is already facilitated with
the use of the Menu component.

20
00:01:32,720 --> 00:01:37,720
So we see that the Menu component is
juxtaposed between the header and

21
00:01:37,720 --> 00:01:42,270
the footer and is able to display
the information right there.

22
00:01:42,270 --> 00:01:48,270
Now, how can we leverage the use of
the Angular router module to enable

23
00:01:48,270 --> 00:01:54,270
us to support these multiple components
and be able to navigate among them.

24
00:01:54,270 --> 00:01:58,810
Now, to get started, first, of course,
we need multiple components,

25
00:01:58,810 --> 00:02:04,370
each of them showing their respective view
so that we can navigate among the views.

26
00:02:04,370 --> 00:02:09,390
So let's add in three more components
to our Angular application,

27
00:02:09,390 --> 00:02:13,300
the Home, the About and the Contact.

28
00:02:13,300 --> 00:02:17,500
You already know how to do that,
so let's go to that step next.

29
00:02:17,500 --> 00:02:22,959
At the prompt, type ng g component

30
00:02:22,959 --> 00:02:28,616
home to create the home component.

31
00:02:28,616 --> 00:02:33,094
Similarly generate

32
00:02:33,094 --> 00:02:38,362
the about component and

33
00:02:38,362 --> 00:02:43,100
also while we are at it

34
00:02:43,100 --> 00:02:48,641
the contact component.

35
00:02:48,641 --> 00:02:53,031
So now we have three components added in
together with the new component that we

36
00:02:53,031 --> 00:02:53,903
already have.

37
00:02:53,903 --> 00:02:58,445
The disk detail component is already
being used in the menu components so

38
00:02:58,445 --> 00:03:00,833
we don't consider it for the moment.

39
00:03:00,833 --> 00:03:05,652
But we now have home, about,
contact and menu components, and

40
00:03:05,652 --> 00:03:08,339
we need a way of going between them.

41
00:03:08,339 --> 00:03:09,882
So how do we go about doing that?

42
00:03:09,882 --> 00:03:14,806
So that is where me make use
of the Angular router module.

43
00:03:14,806 --> 00:03:20,618
To get started on using the router
module to enable us to navigate

44
00:03:20,618 --> 00:03:26,225
among these components,
let's add in a new Angular module.

45
00:03:26,225 --> 00:03:32,012
Now this pattern of using the router
module is something that is suggested for

46
00:03:32,012 --> 00:03:35,841
slightly more complex
Angular applications, but

47
00:03:35,841 --> 00:03:41,735
if we make that as a standard practice it
goes a long way to help us in the future.

48
00:03:41,735 --> 00:03:46,653
So I am starting off even
the simple application with

49
00:03:46,653 --> 00:03:52,032
putting the router module
into its own separate module.

50
00:03:52,032 --> 00:03:58,470
So that encompasses all of our
routing needs into a separate module.

51
00:03:58,470 --> 00:04:04,170
To get started,
we again use the Angular CLI to

52
00:04:04,170 --> 00:04:10,450
create another module, and
we will call that module as app routing.

53
00:04:10,450 --> 00:04:15,237
So this app routing module that we're
going to create is going to leverage

54
00:04:15,237 --> 00:04:20,599
the Angular slotting module to provide
routing features for our application.

55
00:04:20,599 --> 00:04:26,296
And then we going to make use of that
in our app module to enable routing.

56
00:04:26,296 --> 00:04:30,927
To create a new module called app routing,

57
00:04:30,927 --> 00:04:35,814
at the prompt type ng
g module app-routing,

58
00:04:35,814 --> 00:04:40,960
and that should create
an app routing module and

59
00:04:40,960 --> 00:04:49,211
put an app-routing.module.ts file
into that particular folder there.

60
00:04:49,211 --> 00:04:52,635
Now this app-routing
module is just left there.

61
00:04:52,635 --> 00:04:58,138
We need to explicitly include
that into our app module,

62
00:04:58,138 --> 00:05:01,662
so it has to be able to make use of it.

63
00:05:01,662 --> 00:05:06,669
Going to the editor we now see that
we now have another folder here

64
00:05:06,669 --> 00:05:12,328
called app-routing and inside that
we have an AppRoutingModule here,

65
00:05:12,328 --> 00:05:18,374
we choose a generic Angular module that
the Angular CLI has generated for us.

66
00:05:18,374 --> 00:05:22,034
This has nothing specific about
routing as such at the moment,

67
00:05:22,034 --> 00:05:24,737
but we're going to add
those features in there.

68
00:05:24,737 --> 00:05:30,633
But, before we do that, let's use this
AppRoutingModule in our app.module,

69
00:05:30,633 --> 00:05:34,028
the root module for
our Angular application.

70
00:05:34,028 --> 00:05:38,271
To do that, open the app.module, and

71
00:05:38,271 --> 00:05:44,452
while we are here,
let me do a little bit of clean up here.

72
00:05:44,452 --> 00:05:48,489
I tend not to like disorganized code, so

73
00:05:48,489 --> 00:05:52,407
I'm just going to move all this code for

74
00:05:52,407 --> 00:05:57,040
the components together
in one place there and

75
00:05:57,040 --> 00:06:02,650
then I have my services being
required down below here.

76
00:06:02,650 --> 00:06:09,180
Now we have a new module
that we are getting

77
00:06:09,180 --> 00:06:13,846
from the AppRoutingModule,

78
00:06:13,846 --> 00:06:17,764
which we just created and

79
00:06:17,764 --> 00:06:22,614
then I'm going to require that

80
00:06:22,614 --> 00:06:27,108
AppRoutingModule into my,

81
00:06:34,609 --> 00:06:37,040
Route module or the AppModule here.

82
00:06:37,040 --> 00:06:43,080
So, I include the AppRoutingModule
by importing it first there.

83
00:06:43,080 --> 00:06:47,625
And then after that,
into the imports, I go in and

84
00:06:47,625 --> 00:06:50,880
then add in the AppRoutingModule.

85
00:06:53,440 --> 00:06:56,970
Right there, AppRoutingModule.

86
00:06:56,970 --> 00:07:01,380
So with this, my app module,

87
00:07:01,380 --> 00:07:05,640
the root module, is now fixed up to
make use of the AppRoutingModule.

88
00:07:05,640 --> 00:07:11,420
Now this gives me the freedom
to develop my routing part in

89
00:07:11,420 --> 00:07:18,540
my AppRoutingModule with full confidence
that it will be used by my app module.

90
00:07:18,540 --> 00:07:21,370
So let's save the changes
to the app module, and

91
00:07:21,370 --> 00:07:25,357
then we will go back and
open the AppRoutingModule here.

92
00:07:26,400 --> 00:07:30,470
And here we're going to make use of

93
00:07:30,470 --> 00:07:34,050
the router module that
Angular provides for us.

94
00:07:34,050 --> 00:07:37,749
So here let me import the,

95
00:07:41,156 --> 00:07:46,174
RouterModule here, and also the companion

96
00:07:46,174 --> 00:07:51,608
Routes module that is
available from Angular.

97
00:07:51,608 --> 00:07:56,428
And then so
I'm going to import that from Angular,

98
00:07:56,428 --> 00:08:00,320
and then, RouterModule here.

99
00:08:00,320 --> 00:08:04,540
So from the angular router library,
I import both the RouterModule and

100
00:08:04,540 --> 00:08:06,120
the Routes module.

101
00:08:06,120 --> 00:08:14,590
So once I do that, obviously, I need to be
able to include the RouterModule in here.

102
00:08:14,590 --> 00:08:21,015
So in addition to the CommonModule
that I have imported there,

103
00:08:21,015 --> 00:08:25,330
I need to also use the RouterModule here.

104
00:08:25,330 --> 00:08:28,803
Now, I'm going to leave it at this point.

105
00:08:28,803 --> 00:08:33,835
We will develop the routes for
our Angular application and

106
00:08:33,835 --> 00:08:38,054
then come back and
fix this up a little bit later.

107
00:08:38,054 --> 00:08:44,225
So with this, let me save the changes
to the app routing module.

108
00:08:44,225 --> 00:08:49,925
And what I'm going to do is, just for
the sake of keeping my code clean and

109
00:08:49,925 --> 00:08:56,574
organized, I'm going to define all the
routes for my application in another file.

110
00:08:56,574 --> 00:09:00,673
But I will create in
the app-routing folder and

111
00:09:00,673 --> 00:09:03,863
then I will name it as routes.ts5.

112
00:09:03,863 --> 00:09:08,601
Now, inside this file,
I will create all the routes that I need.

113
00:09:08,601 --> 00:09:12,994
So in here, I'm going to import,

114
00:09:15,508 --> 00:09:23,255
The Routes from, @angular/router,

115
00:09:23,255 --> 00:09:29,570
and then use that to construct
the routes for my application.

116
00:09:29,570 --> 00:09:33,453
Now in addition,
I need to be able to import all

117
00:09:33,453 --> 00:09:37,745
the components that I have
within my application.

118
00:09:37,745 --> 00:09:41,303
Because I want to be able to
navigate to all the components.

119
00:09:41,303 --> 00:09:44,158
So where do I have the list
of all the components?

120
00:09:44,158 --> 00:09:46,780
I have them in the app_module.

121
00:09:46,780 --> 00:09:48,475
So let me go to the app_module.

122
00:09:50,917 --> 00:09:58,300
I try not to type things as far as
possible to keep things under control.

123
00:09:58,300 --> 00:10:03,720
So I will go to the app_module, and then
I copy in all the components that I have.

124
00:10:03,720 --> 00:10:08,681
I don't need the AppComponent because I
won't be directly navigating to that in my

125
00:10:08,681 --> 00:10:11,925
application, but
the remaining ones I will need.

126
00:10:11,925 --> 00:10:18,441
So I'm going to simply
copy all of those and

127
00:10:18,441 --> 00:10:25,510
then include them into my routes file,
here.

128
00:10:25,510 --> 00:10:30,080
So now I have the MenuComponent,
the Dishdetail, Header, Foot.

129
00:10:30,080 --> 00:10:33,190
Actually, I don't need the Header and
FooterComponent either.

130
00:10:33,190 --> 00:10:34,516
I wont be needing the Header and

131
00:10:34,516 --> 00:10:39,040
FooterComponent because I am not going
to navigate to them using routes.

132
00:10:39,040 --> 00:10:43,322
So let me delete the Header and
the Footer Components.

133
00:10:43,322 --> 00:10:46,842
I only need the Menu,
Home, About, Contacts.

134
00:10:46,842 --> 00:10:53,532
I included the Dishdetail, we will come
to that in one of the later exercises.

135
00:10:53,532 --> 00:10:57,949
So now that we have included all these,
the next step is for

136
00:10:57,949 --> 00:11:02,289
me to define the various routes
that are available here.

137
00:11:02,289 --> 00:11:06,884
I will define a constant here

138
00:11:06,884 --> 00:11:12,247
named routes of the type Routes.

139
00:11:12,247 --> 00:11:17,908
So now you see why I have important
routes from the Angular router there.

140
00:11:17,908 --> 00:11:23,148
So this will allow me to
define an array specifying

141
00:11:23,148 --> 00:11:28,651
the various routes that
are part of my application.

142
00:11:28,651 --> 00:11:32,940
In here,
let me specify all the routes here.

143
00:11:32,940 --> 00:11:37,854
Now when you specify
routes in your Angular

144
00:11:37,854 --> 00:11:42,776
application, you will specify the path.

145
00:11:42,776 --> 00:11:48,303
Which I will start out
with the HomeComponent,

146
00:11:48,303 --> 00:11:53,139
and then when I navigate to the home path,

147
00:11:53,139 --> 00:11:59,368
the corresponding component
is the HomeComponent.

148
00:12:00,630 --> 00:12:05,940
So when my URL includes home,

149
00:12:05,940 --> 00:12:08,930
then I will be navigating
to the HomeComponent.

150
00:12:09,930 --> 00:12:14,905
In the lecture earlier,
we have already seen how we use the HTML

151
00:12:14,905 --> 00:12:21,513
pushState() to recognize internal

152
00:12:21,513 --> 00:12:27,010
navigation, using the HTML support for
the pushState().

153
00:12:27,010 --> 00:12:33,481
So that is what I'm leveraging here in
order to define these various routes here.

154
00:12:33,481 --> 00:12:38,003
So when I say localhost:4200/home,

155
00:12:38,003 --> 00:12:43,387
then that is pointing to
the HomeComponent, here.

156
00:12:43,387 --> 00:12:48,850
So that's the way I will
navigate to the HomeComponent.

157
00:12:48,850 --> 00:12:55,909
Similarly, we can define for
the other components in our application.

158
00:12:55,909 --> 00:13:03,213
The next path that I'm going to
define is to the MenuComponent.

159
00:13:03,213 --> 00:13:09,006
For this exercise,
I'm just going to define only these two.

160
00:13:09,006 --> 00:13:14,119
The remaining ones will
be filled in as part

161
00:13:14,119 --> 00:13:21,371
of some of the later exercises and
assignment that follows.

162
00:13:21,371 --> 00:13:25,791
So we have two of them set up,
Home and Menu.

163
00:13:25,791 --> 00:13:29,400
Now, I should also provide
the default route here.

164
00:13:29,400 --> 00:13:35,379
So when the user navigates
to localhost:4200,

165
00:13:35,379 --> 00:13:40,670
then you will end up in
the default location.

166
00:13:40,670 --> 00:13:46,054
So in that case, I will simply redirect
the user to the HomeComponent,

167
00:13:46,054 --> 00:13:50,828
which is what will be displayed
into the Angular application.

168
00:13:50,828 --> 00:13:58,748
So to do that,
I will type in redirectTo property.

169
00:13:58,748 --> 00:14:03,838
And then define that to be /home.

170
00:14:03,838 --> 00:14:10,507
Meaning that when you navigate
without providing a URL path there,

171
00:14:10,507 --> 00:14:16,708
then you would automatically
navigate to the HomeComponent,

172
00:14:16,708 --> 00:14:20,490
and this should match full here.

173
00:14:20,490 --> 00:14:25,023
So these three, I will supply for
the routes here, for the moment.

174
00:14:25,023 --> 00:14:26,610
The remaining ones,

175
00:14:26,610 --> 00:14:31,580
as I said, will be added in as
part of the rest of the exercises.

176
00:14:31,580 --> 00:14:36,658
Now, obviously you see these red squiggly

177
00:14:36,658 --> 00:14:40,889
lines there because these are all in

178
00:14:40,889 --> 00:14:46,011
../ So let me fix those up.

179
00:14:46,011 --> 00:14:50,232
So now, from the routes.ts file,

180
00:14:50,232 --> 00:14:55,721
we are preparing this
Routes constant here and

181
00:14:55,721 --> 00:14:58,971
then making it available.

182
00:14:58,971 --> 00:15:04,111
So now that this is ready for us,
we will go back to the app-routing.module.

183
00:15:04,111 --> 00:15:09,282
And in the app-routing.module,

184
00:15:09,282 --> 00:15:15,141
I'm going to import the routes constant,

185
00:15:15,141 --> 00:15:17,908
Routes constant.

186
00:15:17,908 --> 00:15:24,542
If you want to say that as routes,
routes constants, and use it here.

187
00:15:24,542 --> 00:15:26,516
Now, how do I make use of it here?

188
00:15:26,516 --> 00:15:31,451
Now, the RouterModule takes as

189
00:15:31,451 --> 00:15:36,029
a parameter for the forRoot,

190
00:15:38,737 --> 00:15:42,261
The parameter is the routes configuration.

191
00:15:42,261 --> 00:15:50,154
So I'm going to supply the routes as
the parameter for that, the RouterModule.

192
00:15:50,154 --> 00:15:56,520
Okay, so that fixes up our routing
configuration for our application.

193
00:15:56,520 --> 00:16:01,480
One final change that we need to fix
up is that from the app-routing.module,

194
00:16:01,480 --> 00:16:05,360
we want to be able to export
the RouterModule to our app-module so

195
00:16:05,360 --> 00:16:07,120
that it can also make use of it.

196
00:16:07,120 --> 00:16:11,796
So this is where we make use of the export

197
00:16:11,796 --> 00:16:16,346
property in our NgModule decorator.

198
00:16:16,346 --> 00:16:22,907
And make our RouterModule available for
the AppModule.

199
00:16:22,907 --> 00:16:27,990
So let's save the changes also thus far.

200
00:16:27,990 --> 00:16:30,845
Now, when you route to one of these parts,

201
00:16:30,845 --> 00:16:36,040
whatever you display the view for
the particular component.

202
00:16:36,040 --> 00:16:40,260
We don't have anything at
the moment in our application.

203
00:16:40,260 --> 00:16:45,124
When you look at
the AppComponent.html file.

204
00:16:45,124 --> 00:16:49,961
Here, by default we only have
the app-header, app-menu,

205
00:16:49,961 --> 00:16:52,107
and the app-footer here.

206
00:16:52,107 --> 00:16:54,780
Now fortunately,

207
00:16:54,780 --> 00:17:00,127
the Angular RouterModule provides us

208
00:17:00,127 --> 00:17:06,483
with a directive called as router-outlet.

209
00:17:06,483 --> 00:17:11,635
So whenever you specify this directive as,

210
00:17:14,802 --> 00:17:18,192
The tag in your template file.

211
00:17:18,192 --> 00:17:23,355
Then your Angular application
will automatically use

212
00:17:23,355 --> 00:17:30,545
that as the place where the corresponding
view needs to be inserted in.

213
00:17:30,545 --> 00:17:36,725
So, by specifying the router-outlet
in my AppComponent's template file.

214
00:17:36,725 --> 00:17:44,537
Now I will be able to display any of those
information in that particular location.

215
00:17:44,537 --> 00:17:48,747
So we have made changes to
the app routing module,

216
00:17:48,747 --> 00:17:54,573
the AppComponent.html file,
where we added the router-outlet.

217
00:17:54,573 --> 00:17:59,416
We defined the routes in
the Routes.ts file and

218
00:17:59,416 --> 00:18:06,074
then we have the AppModule where
we added in the AppRoutingModule

219
00:18:06,074 --> 00:18:12,350
as one of the imports there,
after importing it up here.

220
00:18:12,350 --> 00:18:15,110
So after all these changes, let's go and

221
00:18:15,110 --> 00:18:21,890
take a look at what our Angular
applications is showing in the browser.

222
00:18:21,890 --> 00:18:26,710
Going to our browser,
we can now see that in our browser

223
00:18:26,710 --> 00:18:31,830
the default thing that has
been shown here is home works.

224
00:18:31,830 --> 00:18:40,060
From your knowledge of how the component
that is generated by Angular CLI works.

225
00:18:40,060 --> 00:18:46,840
You already recognize that this must be
in the template for the home component.

226
00:18:46,840 --> 00:18:53,040
Also, take a look at the URL in
the address part of the browser.

227
00:18:53,040 --> 00:18:56,860
You see that it says localhost:4200/home.

228
00:18:56,860 --> 00:18:59,682
If I simply type localhost:4200,

229
00:18:59,682 --> 00:19:04,996
this will automatically redirect
itself to localhost:4200/home.

230
00:19:04,996 --> 00:19:12,923
Because we setup that particular route
in our routes configuration here.

231
00:19:12,923 --> 00:19:16,889
Now we have no way of going
to the remaining modules, so

232
00:19:16,889 --> 00:19:22,167
how do we provide the linking so
we can navigate to the remaining module.

233
00:19:22,167 --> 00:19:26,901
So to fill that in, we need to go and
be able to add additional

234
00:19:26,901 --> 00:19:31,358
information in the header
components template files so

235
00:19:31,358 --> 00:19:36,640
that it can navigate among
these various components.

236
00:19:36,640 --> 00:19:43,350
Coming back to our editor,
let me open the HeaderComponent.html file.

237
00:19:43,350 --> 00:19:49,010
Inside this HeaderComponent file,
we see that we have these buttons

238
00:19:49,010 --> 00:19:56,110
up here that should enable us to navigate
to those particular components there.

239
00:19:56,110 --> 00:20:02,050
So here, we take the help of
another attribute directive that

240
00:20:02,050 --> 00:20:08,370
the routing module provides for
us called as routerLink.

241
00:20:08,370 --> 00:20:13,289
So to these we will supply

242
00:20:13,289 --> 00:20:17,984
routerLink as /home.

243
00:20:17,984 --> 00:20:22,968
Which means that for
this particular button,

244
00:20:22,968 --> 00:20:26,171
the home link in our tool bar.

245
00:20:26,171 --> 00:20:30,334
When we click on that, that should
automatically direct me to the home.

246
00:20:30,334 --> 00:20:36,640
So this way, my Angular application
knows where to send me at this point.

247
00:20:36,640 --> 00:20:40,090
So that is for home there.

248
00:20:40,090 --> 00:20:44,420
Now similarly, let me also add one for
the menu here.

249
00:20:45,590 --> 00:20:48,550
For the menu,
when I click on the menu link there,

250
00:20:48,550 --> 00:20:54,020
that should take me to the menu component.

251
00:20:54,020 --> 00:21:01,140
So the routerLink attribute directive
enables me to specify, as you see

252
00:21:01,140 --> 00:21:08,010
here a string where I can specify
the path that needs to be added in.

253
00:21:09,010 --> 00:21:14,900
Let's save this changes also, and then
now take a final look at our application.

254
00:21:14,900 --> 00:21:21,021
Going to our application, now we see
that a Home component is displayed here.

255
00:21:21,021 --> 00:21:25,426
When we click on the Menu component,
we are at the menu.

256
00:21:25,426 --> 00:21:30,570
So notice how my application
automatically navigated to

257
00:21:30,570 --> 00:21:35,509
the menu component to show
the view with the menu here.

258
00:21:35,509 --> 00:21:39,590
And also taking a look at the address bar,

259
00:21:39,590 --> 00:21:46,670
notice how the address bar now
shows localhost:4200/menu.

260
00:21:46,670 --> 00:21:51,670
Again, we can navigate back to the home
component and to the menu component,

261
00:21:51,670 --> 00:21:52,410
back and forth.

262
00:21:53,580 --> 00:21:59,230
So this shows how by adding this
routing to our application,

263
00:21:59,230 --> 00:22:04,940
we are able to navigate and show
different views within our application.

264
00:22:04,940 --> 00:22:09,640
Now, the about and contact,
we're going to do that as part of

265
00:22:09,640 --> 00:22:14,090
another exercise and
the assignment that follows later on.

266
00:22:15,150 --> 00:22:20,485
This completes this exercise where we
have used Angular router module and

267
00:22:20,485 --> 00:22:25,047
then configured our Angular
application to use various routes

268
00:22:25,047 --> 00:22:27,212
to show the different views.

269
00:22:27,212 --> 00:22:29,240
This is a good time for

270
00:22:29,240 --> 00:22:35,117
you to do a Git commit with
the message Angular router basics.

271
00:22:35,117 --> 00:22:36,115
[MUSIC]