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

2
00:00:04,974 --> 00:00:08,004
Let's now start talking
about Angular Routing.

3
00:00:08,004 --> 00:00:11,348
Is it routing or is it rooting?

4
00:00:11,348 --> 00:00:13,806
I'm going to be rooting for routing.

5
00:00:13,806 --> 00:00:18,397
So henceforth,
I will pronounce all of these as routing,

6
00:00:18,397 --> 00:00:21,400
routes, router and so on.

7
00:00:21,400 --> 00:00:25,630
If you happen to be from an area where
in English you pronounce it as route or

8
00:00:25,630 --> 00:00:27,060
router, please bear with me.

9
00:00:28,200 --> 00:00:33,610
So, what exactly is Angular Routing and
how does it help us?

10
00:00:33,610 --> 00:00:37,290
In terms of the Angular
application that we have seen so

11
00:00:37,290 --> 00:00:41,310
far, we have never seen the use for
routing.

12
00:00:41,310 --> 00:00:44,913
We have seen that we can develop
an angular application with

13
00:00:44,913 --> 00:00:49,235
multiple components and then make use
of them one inside the other, and

14
00:00:49,235 --> 00:00:53,794
develop a whole Angular application
without even talking about routing.

15
00:00:53,794 --> 00:00:58,116
Now suppose you have
multiple components and

16
00:00:58,116 --> 00:01:03,233
you want to be able to navigate
among the components in

17
00:01:03,233 --> 00:01:08,350
a way that you can cause
this navigation through, for

18
00:01:08,350 --> 00:01:13,352
example, clicking on links or
buttons in your UI and

19
00:01:13,352 --> 00:01:19,720
be able to render different views
in your application's screen,

20
00:01:19,720 --> 00:01:23,959
then Angular Routing comes to your rescue.

21
00:01:23,959 --> 00:01:28,633
We will see how we can use routing
to develop something called single

22
00:01:28,633 --> 00:01:30,120
page applications.

23
00:01:30,120 --> 00:01:34,390
We'll talk about single page
applications in the next lesson.

24
00:01:34,390 --> 00:01:38,540
But for the moment,
let's concentrate on Angular Routing and

25
00:01:38,540 --> 00:01:42,350
specifically the Route a module
that is available in Angular.

26
00:01:43,610 --> 00:01:48,150
The router module itself is separate
from the Angular core module, so

27
00:01:48,150 --> 00:01:53,220
it is available as a separate module and
you will need to import it explicitly

28
00:01:53,220 --> 00:01:59,170
into your Angular application in
order to make use of the supported

29
00:01:59,170 --> 00:02:04,360
Angular Router model provides for
you to navigate among radius

30
00:02:04,360 --> 00:02:09,440
views off the radius components that
form part of your angular predation.

31
00:02:10,460 --> 00:02:14,820
So as part of the exercise,
we'll add in multiple components and

32
00:02:14,820 --> 00:02:21,060
we will see how we can navigate
among them using the angular router.

33
00:02:23,020 --> 00:02:26,800
So as I mentioned already
the Angular router

34
00:02:26,800 --> 00:02:30,280
enables navigation among various views.

35
00:02:30,280 --> 00:02:35,660
In such a way that you can
include this navigation into

36
00:02:35,660 --> 00:02:40,870
the links or the toolbar-based buttons and

37
00:02:40,870 --> 00:02:45,610
so on that you can include in the UI
of your Angular application and

38
00:02:45,610 --> 00:02:49,810
then you can trigger the navigation
from one view to another view

39
00:02:49,810 --> 00:02:54,320
by clicking on either the link or
the button in your UI.

40
00:02:55,360 --> 00:03:00,611
This is where the Angular Router
takes advantage the browser URL and

41
00:03:00,611 --> 00:03:04,018
it uses the browser URL
as an instruction for

42
00:03:04,018 --> 00:03:08,179
it to navigate among radius
client generated views.

43
00:03:08,179 --> 00:03:12,857
These views are all typically
supported by the multiple components

44
00:03:12,857 --> 00:03:15,982
that form hard of your
Angular application.

45
00:03:15,982 --> 00:03:19,289
Now when you navigate from
one view to another view,

46
00:03:19,289 --> 00:03:22,906
you can also pass in optional
parameters to those views.

47
00:03:22,906 --> 00:03:26,307
As we learned in that previous slide,

48
00:03:26,307 --> 00:03:31,305
the Angular Router takes
advantage of the URL in order to

49
00:03:31,305 --> 00:03:36,856
enable it to recognize the need
to navigate among the middle.

50
00:03:36,856 --> 00:03:40,775
So, this is where Angular Router
takes advantage of what

51
00:03:40,775 --> 00:03:44,704
is already supported in HTML5
through the history API?

52
00:03:44,704 --> 00:03:47,990
So, what does the history
API enable us to do?

53
00:03:47,990 --> 00:03:52,156
It gives the developers
the ability to modify

54
00:03:52,156 --> 00:03:56,766
a website's URL without
causing a page refresh.

55
00:03:56,766 --> 00:04:03,806
Now if you are used to visiting
various websites in your browser,

56
00:04:03,806 --> 00:04:10,078
you'll normally would either
click on the bookmark bar or

57
00:04:10,078 --> 00:04:15,198
on a link in a page or
you would explicitly type in

58
00:04:15,198 --> 00:04:20,063
the URL into the address
bar of your browser.

59
00:04:20,063 --> 00:04:25,310
Now when you do that, you are explicitly
specifying the URL there.

60
00:04:25,310 --> 00:04:27,152
Now when you specify a URL,

61
00:04:27,152 --> 00:04:31,470
you are triggering your browser to
automatically go to a server and

62
00:04:31,470 --> 00:04:37,070
fetch that new page and
render the page in the browser's window.

63
00:04:37,070 --> 00:04:43,180
Now if it can suppress this need to go
to a server and fetch information, but

64
00:04:43,180 --> 00:04:49,280
instead change the URL without
causing this page refresh,

65
00:04:49,280 --> 00:04:54,450
then we can take advantage of that
to enable us to be able to navigate

66
00:04:54,450 --> 00:04:59,620
among views that form part
of a single application and

67
00:04:59,620 --> 00:05:03,890
this is where we take
advantage of the HTML5.

68
00:05:03,890 --> 00:05:09,034
History API that supports methods
like pushState and replaceState.

69
00:05:09,034 --> 00:05:13,662
So, the pushState allows you to
add a history entry into your

70
00:05:13,662 --> 00:05:18,494
browser's history without
actually causing a page refresh.

71
00:05:18,494 --> 00:05:21,938
Similarly, a replaceState will modify

72
00:05:21,938 --> 00:05:26,810
the existing history entry
in your browser's history.

73
00:05:26,810 --> 00:05:30,551
So whereby, you can even use the back and

74
00:05:30,551 --> 00:05:35,724
forward button of your browser
to be able to move back and

75
00:05:35,724 --> 00:05:41,030
forth among the URLs without
causing a page refresh.

76
00:05:41,030 --> 00:05:45,905
Now, this is where you need to specify
something within your index HTML

77
00:05:45,905 --> 00:05:47,458
page called the base.

78
00:05:47,458 --> 00:05:52,489
So when the HTML history API
makes use of these methods,

79
00:05:52,489 --> 00:05:57,307
then for the modification,
you need to specify a base

80
00:05:57,307 --> 00:06:02,875
location from where you're
specifying the additional parts

81
00:06:02,875 --> 00:06:07,930
of your URL path which will
not result in a page refresh.

82
00:06:07,930 --> 00:06:10,580
So in this case, for
our Angular application,

83
00:06:10,580 --> 00:06:12,378
this always starts at the root.

84
00:06:12,378 --> 00:06:17,829
So, that's why we specify
the base as href="/".

85
00:06:17,829 --> 00:06:22,581
Everything else that comes
after that in the URL will be

86
00:06:22,581 --> 00:06:27,750
treated within your Angular
application as something that

87
00:06:27,750 --> 00:06:33,228
triggers navigation that is
handled the Angular router itself

88
00:06:33,228 --> 00:06:39,080
without causing your browser to
need a refresh from a server.

89
00:06:39,080 --> 00:06:44,240
So, that's how the angular router takes
advantage of the HTML5 history API.

90
00:06:45,300 --> 00:06:47,766
Now if you don't have the history API,

91
00:06:47,766 --> 00:06:51,295
the other way of doing
navigation is by using hashtags.

92
00:06:51,295 --> 00:06:56,558
You already know that in HTML,
if you specify any link starting

93
00:06:56,558 --> 00:07:01,543
with a hashtag, that refers to
a link within the same page.

94
00:07:01,543 --> 00:07:05,782
So when you click on such links,
it will not cause a page refresh.

95
00:07:05,782 --> 00:07:09,944
Instead, it'll redirect you to
another location within the same page.

96
00:07:09,944 --> 00:07:12,256
So, that's another way of doing things.

97
00:07:12,256 --> 00:07:17,030
But for clean rendering,
the HTML5 API supports this

98
00:07:17,030 --> 00:07:22,012
history API that enables you
to manipulate the history of

99
00:07:22,012 --> 00:07:26,087
your browser without
causing a page refresh.

100
00:07:26,087 --> 00:07:28,616
After that long winded explanation,

101
00:07:28,616 --> 00:07:33,049
let's take an example to help us
to understand this even further.

102
00:07:33,049 --> 00:07:39,752
Suppose you define your URL like this say,
for example, example.abc.com/home.

103
00:07:39,752 --> 00:07:43,325
Now with the HTML5 history API,

104
00:07:43,325 --> 00:07:48,301
you can simply take that
last part of the URL and

105
00:07:48,301 --> 00:07:56,988
modify that to another URL like I had
shown here with example.abc.com/menu.

106
00:07:56,988 --> 00:08:03,054
So you see that the URL now has been
changed from slash home to slash menu,

107
00:08:03,054 --> 00:08:08,624
this change can be triggered using
a push state method of the HTML5

108
00:08:08,624 --> 00:08:14,216
history API without as I mentioned,
without reloading the page.

109
00:08:14,216 --> 00:08:18,533
Instead, this will be
an internal trigger for

110
00:08:18,533 --> 00:08:24,842
navigation that the Angular Router
explicitly takes advantage for

111
00:08:24,842 --> 00:08:32,161
supporting the navigation among various
views of your Angular application.

112
00:08:32,161 --> 00:08:36,828
Now obviously you must be interested in
how does the Angular Router take advantage

113
00:08:36,828 --> 00:08:37,376
of this.

114
00:08:37,376 --> 00:08:42,868
So this is where the Angular Router
leverages the history manipulation

115
00:08:42,868 --> 00:08:47,917
to modify the browser's URL
without triggering a page refresh.

116
00:08:47,917 --> 00:08:49,485
Let's take an example.

117
00:08:49,485 --> 00:08:56,933
Suppose you have your Angular application
residing at this particular URL.

118
00:08:56,933 --> 00:09:01,809
Now, it so happens that the Angular
application that you are working on

119
00:09:01,809 --> 00:09:06,784
is being rendered to the browser by
accessing it at this particular URL.

120
00:09:06,784 --> 00:09:13,430
So, it will help us to quickly understand
what the Angular Router enables us to do.

121
00:09:13,430 --> 00:09:19,790
So in this case, when you type
in this into your browser URL,

122
00:09:19,790 --> 00:09:24,160
you Angular Router can easily
be configured to redirect you

123
00:09:24,160 --> 00:09:29,210
to a default location within
your angular application.

124
00:09:29,210 --> 00:09:33,433
Typically, remind me that
something as like home.

125
00:09:33,433 --> 00:09:38,606
So that will take you to
the default entry point for

126
00:09:38,606 --> 00:09:42,303
your angular application which for

127
00:09:42,303 --> 00:09:48,109
sake of easy understanding,
I will label it as /home.

128
00:09:48,109 --> 00:09:53,175
So if your URL contains
localhost:4200/home,

129
00:09:53,175 --> 00:09:58,249
that means that you are at
your default home location.

130
00:09:58,249 --> 00:10:01,519
Now when this navigation is triggered,

131
00:10:01,519 --> 00:10:07,384
you can then let your Angular Router
automatically take you to the view,

132
00:10:07,384 --> 00:10:12,017
for example,
that is supported by that home component.

133
00:10:12,017 --> 00:10:16,963
So when the URL becomes
localhost:4200/home,

134
00:10:16,963 --> 00:10:24,605
you will automatically render the view of
the home component in the browser screen.

135
00:10:24,605 --> 00:10:30,601
Very exactly when you place the view
that we'll look at in the next slide and

136
00:10:30,601 --> 00:10:33,086
in the exercise that follows.

137
00:10:33,086 --> 00:10:37,903
Similarly, you can have other
views within your Angular

138
00:10:37,903 --> 00:10:42,821
application that can also be
supported through other URLs

139
00:10:42,821 --> 00:10:47,153
that are extensions to the localhost:4200.

140
00:10:47,153 --> 00:10:53,354
So for example, if the URL is
localhost:4200/aboutus, then that

141
00:10:53,354 --> 00:11:00,410
might lead you to be shown the view
that is rendered by the AboutComponent.

142
00:11:00,410 --> 00:11:05,070
And similarly, the menu will show
you the MenuComponent and so on.

143
00:11:06,320 --> 00:11:09,088
So what this enables us to do is,

144
00:11:09,088 --> 00:11:14,624
depending upon what the URL
being used in your browser

145
00:11:14,624 --> 00:11:19,956
you will use that to automatically
navigate among the various

146
00:11:19,956 --> 00:11:25,515
views of your various components
of your Angular application.

147
00:11:25,515 --> 00:11:27,968
Now, you don't have to
explicitly worry about it.

148
00:11:27,968 --> 00:11:33,200
If you configure the Angular Router to
take care of all this, then the router

149
00:11:33,200 --> 00:11:38,273
will automatically take care of
providing you the navigation among these

150
00:11:38,273 --> 00:11:43,957
components as we would see in the exercise
that follows this particular lecture.

151
00:11:43,957 --> 00:11:48,407
Now before we proceed to the exercise
where we will learn more about

152
00:11:48,407 --> 00:11:53,017
the angular router, let me quickly
draw your attention to a few terms

153
00:11:53,017 --> 00:11:57,945
within the Angular Router that you
will encounter during the exercise and

154
00:11:57,945 --> 00:12:01,759
I would like you to pay special
attention to these terms,

155
00:12:01,759 --> 00:12:07,357
because they are crucial to understanding
how the Angular Router actually works.

156
00:12:07,357 --> 00:12:13,205
So you would first see that when
we design the Angular Router,

157
00:12:13,205 --> 00:12:18,042
we'll be taking that help
of the router module that

158
00:12:18,042 --> 00:12:22,669
forms part of the angular
slash router library.

159
00:12:22,669 --> 00:12:28,094
So, we're going to be importing the router
module into or angular application

160
00:12:28,094 --> 00:12:32,690
into the app module and
then also we'll be importing the routes.

161
00:12:32,690 --> 00:12:37,716
So, the routes allows us to define
the various routes that our

162
00:12:37,716 --> 00:12:43,335
Angular application makes use of or
the Angular Router makes use of.

163
00:12:43,335 --> 00:12:49,047
So in that case, we would be specifying
the routes in the form of a path and

164
00:12:49,047 --> 00:12:51,585
the corresponding component.

165
00:12:51,585 --> 00:12:56,299
So as you saw in the previous slide,
you saw that each one of those URL

166
00:12:56,299 --> 00:13:00,951
extensions was being mapped to
the view of particular component.

167
00:13:00,951 --> 00:13:05,729
So, that kind of information is
supplied to that Angular Router

168
00:13:05,729 --> 00:13:09,885
through routes and
these routes are all specified using

169
00:13:09,885 --> 00:13:14,139
a JavaScript object like this
path with two properties.

170
00:13:14,139 --> 00:13:18,470
Path and component and some additional
properties that we will not

171
00:13:18,470 --> 00:13:22,970
encounter right now, but we will
see in some of the later exercises.

172
00:13:24,610 --> 00:13:28,531
Also, the second question that you would
wonder is where would this view be

173
00:13:28,531 --> 00:13:30,657
rendered in your Angular application?

174
00:13:30,657 --> 00:13:35,863
This is where within our
template of our app component,

175
00:13:35,863 --> 00:13:43,286
we will include a directive called as
the routerOutlet which is specified as you

176
00:13:43,286 --> 00:13:48,628
see as <router-outlet> and
</router-outlet>.

177
00:13:48,628 --> 00:13:54,890
This will be included into
the app component template file,

178
00:13:54,890 --> 00:13:59,188
now then your Angular Router navigates to

179
00:13:59,188 --> 00:14:04,484
the different views of
the different components.

180
00:14:04,484 --> 00:14:08,899
The corresponding view of the component
will be included within your

181
00:14:08,899 --> 00:14:13,633
applications view wherever you
specify this particular router outlet.

182
00:14:13,633 --> 00:14:17,773
So, watch out for
that in the exercise that follows.

183
00:14:17,773 --> 00:14:22,752
In addition, to trigger the navigation,
you would see that

184
00:14:22,752 --> 00:14:27,743
with many of the a tags that
are used within the application.

185
00:14:27,743 --> 00:14:32,429
So for example,
I would include a setup a tags with the MD

186
00:14:32,429 --> 00:14:36,820
button Angular material
component in the toolbar,

187
00:14:36,820 --> 00:14:41,327
in the header component of
our Angular application.

188
00:14:41,327 --> 00:14:44,635
I would associate the a tags
with another directive,

189
00:14:44,635 --> 00:14:47,437
an attribute directive called routerLink.

190
00:14:47,437 --> 00:14:53,260
The routerLink is an actual directive
that the router module provides for us.

191
00:14:53,260 --> 00:14:57,966
This router link enables us to
specify the path like, for example,

192
00:14:57,966 --> 00:15:00,783
written codes, I can see a "/menu".

193
00:15:00,783 --> 00:15:05,677
You can have more details than this for
the routerLink.

194
00:15:05,677 --> 00:15:11,646
But for the exercise, we will start with
a simple example where we would have,

195
00:15:11,646 --> 00:15:15,806
for example,
/menu slash home slash contact us and so

196
00:15:15,806 --> 00:15:19,976
on specified using
the routerLink attribute direct.

197
00:15:19,976 --> 00:15:25,212
So when you click on a link
like this in your toolbar,

198
00:15:25,212 --> 00:15:31,281
then that will trigger
the Angular Router to cause a change or

199
00:15:31,281 --> 00:15:39,502
a navigation to a particular view that is
supported by the Angular Router module.

200
00:15:39,502 --> 00:15:45,391
So, the mapping between this link and
the corresponding components

201
00:15:45,391 --> 00:15:51,800
is already specified in the route that
we give to our Angular application.

202
00:15:51,800 --> 00:15:56,715
So, watch out for
all these things as you do the exercise.

203
00:15:56,715 --> 00:16:00,895
I will explain some of these things and
the reason for

204
00:16:00,895 --> 00:16:07,366
doing them while we are doing the steps
of the exercise that follows this lesson.

205
00:16:07,366 --> 00:16:11,099
[MUSIC]