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

2
00:00:04,974 --> 00:00:08,004
Bây giờ chúng ta hãy bắt đầu nói về Angular Routing.

3
00:00:08,004 --> 00:00:11,348
Nó định tuyến hay là nó bắt nguồn?

4
00:00:11,348 --> 00:00:13,806
Tôi sẽ bắt rễ để định tuyến.

5
00:00:13,806 --> 00:00:18,397
Vì vậy, từ nay trở đi, tôi sẽ phát âm tất cả những điều này như định

6
00:00:18,397 --> 00:00:21,400
tuyến, tuyến đường, router và vân vân.

7
00:00:21,400 --> 00:00:25,630
Nếu bạn tình cờ đến từ một khu vực mà trong tiếng Anh bạn phát âm nó như là tuyến đường hoặc

8
00:00:25,630 --> 00:00:27,060
router, xin vui lòng chịu đựng với tôi.

9
00:00:28,200 --> 00:00:33,610
Vì vậy, Angular Routing chính xác là gì và nó giúp chúng tôi như thế nào?

10
00:00:33,610 --> 00:00:37,290
Về ứng dụng Angular mà chúng ta đã thấy cho

11
00:00:37,290 --> 00:00:41,310
đến nay, chúng ta chưa bao giờ thấy việc sử dụng cho định tuyến.

12
00:00:41,310 --> 00:00:44,913
Chúng ta đã thấy rằng chúng ta có thể phát triển một ứng dụng góc cạnh với

13
00:00:44,913 --> 00:00:49,235
nhiều thành phần và sau đó sử dụng chúng một bên trong khác, và

14
00:00:49,235 --> 00:00:53,794
phát triển một ứng dụng Angular toàn bộ mà không cần nói về định tuyến.

15
00:00:53,794 --> 00:00:58,116
Bây giờ giả sử bạn có nhiều thành phần và

16
00:00:58,116 --> 00:01:03,233
bạn muốn có thể điều hướng giữa các thành phần theo

17
00:01:03,233 --> 00:01:08,350
cách mà bạn có thể gây ra điều hướng này thông qua,

18
00:01:08,350 --> 00:01:13,352
ví dụ, nhấp vào liên kết hoặc nút trong giao diện người dùng của bạn và

19
00:01:13,352 --> 00:01:19,720
có thể hiển thị các chế độ xem khác nhau trong màn hình ứng dụng của bạn,

20
00:01:19,720 --> 00:01:23,959
sau đó Định tuyến góc đến để giải cứu của bạn.

21
00:01:23,959 --> 00:01:28,633
Chúng ta sẽ thấy cách chúng ta có thể sử dụng định tuyến để phát triển một cái gì đó gọi là

22
00:01:28,633 --> 00:01:30,120
ứng dụng trang đơn.

23
00:01:30,120 --> 00:01:34,390
Chúng ta sẽ nói về các ứng dụng trang đơn trong bài học tiếp theo.

24
00:01:34,390 --> 00:01:38,540
Nhưng cho thời điểm này, chúng ta hãy tập trung vào định tuyến góc và

25
00:01:38,540 --> 00:01:42,350
đặc biệt là Route một mô-đun có sẵn trong Angular. Mô-đun

26
00:01:43,610 --> 00:01:48,150
bộ định tuyến riêng biệt với mô-đun lõi Angular, vì vậy

27
00:01:48,150 --> 00:01:53,220
nó có sẵn dưới dạng một mô-đun riêng biệt và bạn sẽ cần phải nhập nó một cách rõ ràng

28
00:01:53,220 --> 00:01:59,170
vào ứng dụng Angular của bạn để sử dụng

29
00:01:59,170 --> 00:02:04,360
mô hình Angular Router được hỗ trợ cung cấp cho bạn để điều hướng giữa các chế độ

30
00:02:04,360 --> 00:02:09,440
xem bán kính ra khỏi các thành phần bán kính tạo thành một phần của sự săn mồi góc cạnh của bạn.

31
00:02:10,460 --> 00:02:14,820
Vì vậy, như một phần của bài tập, chúng ta sẽ thêm vào nhiều thành phần và

32
00:02:14,820 --> 00:02:21,060
chúng ta sẽ thấy làm thế nào chúng ta có thể điều hướng trong số đó bằng cách sử dụng router góc.

33
00:02:23,020 --> 00:02:26,800
Vì vậy, như tôi đã đề cập đã có bộ định tuyến góc

34
00:02:26,800 --> 00:02:30,280
cho phép điều hướng trong số các quan điểm khác nhau.

35
00:02:30,280 --> 00:02:35,660
Trong một cách mà bạn có thể bao gồm điều hướng này vào

36
00:02:35,660 --> 00:02:40,870
các liên kết hoặc các nút dựa

37
00:02:40,870 --> 00:02:45,610
trên thanh công cụ và như vậy mà bạn có thể bao gồm trong giao diện người dùng của ứng dụng Angular của

38
00:02:45,610 --> 00:02:49,810
bạn và sau đó bạn có thể kích hoạt điều hướng từ một chế độ xem khác

39
00:02:49,810 --> 00:02:54,320
bằng cách nhấp vào liên kết hoặc nút trong UI.

40
00:02:55,360 --> 00:03:00,611
Đây là nơi mà Bộ định tuyến góc tận dụng URL trình duyệt và

41
00:03:00,611 --> 00:03:04,018
nó sử dụng URL trình duyệt như một hướng dẫn

42
00:03:04,018 --> 00:03:08,179
để nó điều hướng giữa các chế độ xem được tạo ra từ máy khách bán kính.

43
00:03:08,179 --> 00:03:12,857
Các quan điểm được tất cả thường được hỗ trợ bởi nhiều thành phần

44
00:03:12,857 --> 00:03:15,982
hình thành cứng của ứng dụng góc của bạn.

45
00:03:15,982 --> 00:03:19,289
Bây giờ khi bạn điều hướng từ dạng xem này sang dạng xem khác,

46
00:03:19,289 --> 00:03:22,906
bạn cũng có thể chuyển tham số tùy chọn cho các dạng xem đó.

47
00:03:22,906 --> 00:03:26,307
Như chúng ta đã học được trong slide trước đó,

48
00:03:26,307 --> 00:03:31,305
Angular Router tận dụng lợi thế của URL để cho

49
00:03:31,305 --> 00:03:36,856
phép nó nhận ra sự cần thiết phải điều hướng giữa.

50
00:03:36,856 --> 00:03:40,775
Vì vậy, đây là nơi Angular Router tận dụng lợi thế của những gì

51
00:03:40,775 --> 00:03:44,704
đã được hỗ trợ trong HTML5 thông qua API lịch sử?

52
00:03:44,704 --> 00:03:47,990
Vì vậy, API lịch sử cho phép chúng ta làm gì?

53
00:03:47,990 --> 00:03:52,156
Nó cung cấp cho các nhà phát triển khả năng sửa đổi

54
00:03:52,156 --> 00:03:56,766
URL của một trang web mà không gây ra một làm mới trang.

55
00:03:56,766 --> 00:04:03,806
Bây giờ nếu bạn đã sử dụng để truy cập các trang web khác nhau trong trình duyệt của

56
00:04:03,806 --> 00:04:10,078
bạn, bạn sẽ thường hoặc nhấp vào thanh dấu trang hoặc

57
00:04:10,078 --> 00:04:15,198
trên một liên kết trong một trang hoặc bạn sẽ rõ ràng

58
00:04:15,198 --> 00:04:20,063
vào URL vào thanh địa chỉ của trình duyệt của bạn.

59
00:04:20,063 --> 00:04:25,310
Bây giờ khi bạn làm điều đó, bạn đang xác định rõ ràng URL đó.

60
00:04:25,310 --> 00:04:27,152
Bây giờ khi bạn chỉ định một URL,

61
00:04:27,152 --> 00:04:31,470
bạn đang kích hoạt trình duyệt của bạn để tự động đi đến một máy chủ và

62
00:04:31,470 --> 00:04:37,070
lấy trang mới đó và hiển thị trang trong cửa sổ của trình duyệt.

63
00:04:37,070 --> 00:04:43,180
Bây giờ nếu nó có thể ngăn chặn nhu cầu này để đi đến một máy chủ và lấy thông tin, nhưng

64
00:04:43,180 --> 00:04:49,280
thay vào đó thay đổi URL mà không gây ra làm mới trang này,

65
00:04:49,280 --> 00:04:54,450
sau đó chúng tôi có thể tận dụng lợi thế của điều đó để cho phép chúng tôi để có thể điều hướng

66
00:04:54,450 --> 00:04:59,620
giữa các quan điểm tạo thành một phần của một ứng dụng duy nhất và

67
00:04:59,620 --> 00:05:03,890
đây là nơi chúng tôi mất lợi thế của HTML5.

68
00:05:03,890 --> 00:05:09,034
Lịch sử API hỗ trợ các phương pháp như PushState và ReplacEstate.

69
00:05:09,034 --> 00:05:13,662
Vì vậy, PushState cho phép bạn thêm một mục nhập lịch sử vào

70
00:05:13,662 --> 00:05:18,494
lịch sử trình duyệt của bạn mà không thực sự gây ra một làm mới trang.

71
00:05:18,494 --> 00:05:21,938
Tương tự, một ReplacEstate sẽ sửa đổi

72
00:05:21,938 --> 00:05:26,810
mục nhập lịch sử hiện có trong lịch sử trình duyệt của bạn.

73
00:05:26,810 --> 00:05:30,551
Vì vậy, theo đó, bạn thậm chí có thể sử dụng

74
00:05:30,551 --> 00:05:35,724
nút quay lại và chuyển tiếp của trình duyệt của bạn để có thể di chuyển

75
00:05:35,724 --> 00:05:41,030
qua lại giữa các URL mà không gây ra một làm mới trang.

76
00:05:41,030 --> 00:05:45,905
Bây giờ, đây là nơi bạn cần phải chỉ định một cái gì đó trong

77
00:05:45,905 --> 00:05:47,458
trang HTML chỉ mục của bạn được gọi là cơ sở.

78
00:05:47,458 --> 00:05:52,489
Vì vậy, khi API lịch sử HTML sử dụng các phương pháp này,

79
00:05:52,489 --> 00:05:57,307
sau đó để sửa đổi, bạn cần phải xác định một

80
00:05:57,307 --> 00:06:02,875
vị trí cơ sở từ nơi bạn đang chỉ định các phần bổ sung

81
00:06:02,875 --> 00:06:07,930
của đường dẫn URL của bạn mà sẽ không dẫn đến một làm mới trang.

82
00:06:07,930 --> 00:06:10,580
Vì vậy, trong trường hợp này, đối với ứng dụng Angular của chúng tôi,

83
00:06:10,580 --> 00:06:12,378
điều này luôn bắt đầu ở gốc.

84
00:06:12,378 --> 00:06:17,829
Vì vậy, đó là lý do tại sao chúng tôi chỉ định cơ sở là href=”/”.

85
00:06:17,829 --> 00:06:22,581
Mọi thứ khác mà đến sau đó trong URL sẽ được

86
00:06:22,581 --> 00:06:27,750
xử lý trong ứng dụng Angular của bạn như

87
00:06:33,228 --> 00:06:39,080
một cái gì đó kích hoạt điều hướng được xử lý bộ định tuyến Angular chính nó mà không gây ra trình duyệt của bạn cần làm mới từ một máy chủ.

88
00:06:39,080 --> 00:06:44,240
Vì vậy, đó là cách router góc tận dụng lợi thế của API lịch sử HTML5.

89
00:06:45,300 --> 00:06:47,766
Bây giờ nếu bạn không có API lịch sử,

90
00:06:47,766 --> 00:06:51,295
cách khác để làm điều hướng là bằng cách sử dụng thẻ bắt đầu bằng #.

91
00:06:51,295 --> 00:06:56,558
Bạn đã biết rằng trong HTML, nếu bạn chỉ định bất kỳ liên kết nào bắt đầu

92
00:06:56,558 --> 00:07:01,543
bằng hashtag, mà đề cập đến một liên kết trong cùng một trang.

93
00:07:01,543 --> 00:07:05,782
Vì vậy, khi bạn nhấp vào các liên kết như vậy, nó sẽ không gây ra một trang làm mới.

94
00:07:05,782 --> 00:07:09,944
Thay vào đó, nó sẽ chuyển hướng bạn đến một vị trí khác trong cùng một trang.

95
00:07:09,944 --> 00:07:12,256
Vì vậy, đó là một cách khác để làm việc.

96
00:07:12,256 --> 00:07:17,030
Nhưng để kết xuất sạch, API HTML5 hỗ trợ

97
00:07:17,030 --> 00:07:22,012
API lịch sử này cho phép bạn thao tác lịch sử

98
00:07:22,012 --> 00:07:26,087
trình duyệt của bạn mà không gây ra một làm mới trang.

99
00:07:26,087 --> 00:07:28,616
Sau lời giải thích dài hạn đó, chúng

100
00:07:28,616 --> 00:07:33,049
ta hãy lấy một ví dụ để giúp chúng ta hiểu được điều này hơn nữa.

101
00:07:33,049 --> 00:07:39,752
Giả sử bạn xác định URL của bạn như thế này nói, ví dụ, example.abc.com/home.

102
00:07:39,752 --> 00:07:43,325
Bây giờ với API lịch sử HTML5,

103
00:07:43,325 --> 00:07:48,301
bạn chỉ có thể lấy phần cuối cùng của URL và

104
00:07:48,301 --> 00:07:56,988
sửa đổi nó để URL khác như tôi đã hiển thị ở đây với example.abc.com/menu.

105
00:07:56,988 --> 00:08:03,054
Vì vậy, bạn thấy rằng URL bây giờ đã được thay đổi từ slash home để gạch chéo menu,

106
00:08:03,054 --> 00:08:08,624
thay đổi này có thể được kích hoạt bằng cách sử dụng một phương pháp đẩy trạng thái của

107
00:08:08,624 --> 00:08:14,216
API lịch sử HTML5 mà không cần như tôi đã đề cập, mà không cần tải lại trang.

108
00:08:14,216 --> 00:08:18,533
Thay vào đó, điều này sẽ là một kích hoạt nội bộ cho

109
00:08:18,533 --> 00:08:24,842
điều hướng mà các bộ định tuyến góc rõ ràng tận dụng lợi thế để

110
00:08:24,842 --> 00:08:32,161
hỗ trợ điều hướng trong số các chế độ xem khác nhau của ứng dụng Angular của bạn.

111
00:08:32,161 --> 00:08:36,828
Bây giờ rõ ràng bạn phải quan tâm đến cách Router góc tận

112
00:08:36,828 --> 00:08:37,376
dụng điều này.

113
00:08:37,376 --> 00:08:42,868
Vì vậy, đây là nơi Bộ định tuyến góc tận dụng thao tác lịch sử

114
00:08:42,868 --> 00:08:47,917
để sửa đổi URL của trình duyệt mà không kích hoạt làm mới trang.

115
00:08:47,917 --> 00:08:49,485
Hãy lấy một ví dụ.

116
00:08:49,485 --> 00:08:56,933
Giả sử bạn có ứng dụng Angular của bạn cư trú tại URL cụ thể này.

117
00:08:56,933 --> 00:09:01,809
Bây giờ, nó xảy ra rằng các ứng dụng Angular mà bạn đang làm việc trên

118
00:09:01,809 --> 00:09:06,784
đang được hiển thị cho trình duyệt bằng cách truy cập nó tại URL cụ thể này.

119
00:09:06,784 --> 00:09:13,430
Vì vậy, nó sẽ giúp chúng tôi nhanh chóng hiểu những gì Góc Router cho phép chúng tôi làm.

120
00:09:13,430 --> 00:09:19,790
Vì vậy, trong trường hợp này, khi bạn gõ vào URL trình duyệt của bạn,

121
00:09:19,790 --> 00:09:24,160
bạn Angular Router có thể dễ dàng được cấu hình để chuyển hướng bạn

122
00:09:24,160 --> 00:09:29,210
đến một vị trí mặc định trong ứng dụng góc cạnh của bạn.

123
00:09:29,210 --> 00:09:33,433
Thông thường, nhắc nhở tôi rằng một cái gì đó giống như nhà.

124
00:09:33,433 --> 00:09:38,606
Vì vậy, điều đó sẽ đưa bạn đến điểm nhập mặc định cho

125
00:09:38,606 --> 00:09:42,303
ứng dụng góc cạnh của bạn mà

126
00:09:42,303 --> 00:09:48,109
vì lợi ích của dễ hiểu, tôi sẽ dán nhãn nó là /home.

127
00:09:48,109 --> 00:09:53,175
Vì vậy, nếu URL của bạn chứa localhost:4200/home,

128
00:09:53,175 --> 00:09:58,249
điều đó có nghĩa là bạn đang ở vị trí nhà mặc định của bạn.

129
00:09:58,249 --> 00:10:01,519
Bây giờ khi điều hướng này được kích hoạt,

130
00:10:01,519 --> 00:10:07,384
sau đó bạn có thể cho phép bộ định tuyến góc của bạn tự động đưa bạn đến chế độ xem

131
00:10:07,384 --> 00:10:12,017
, ví dụ, được hỗ trợ bởi thành phần nhà đó.

132
00:10:12,017 --> 00:10:16,963
Vì vậy, khi URL trở thành localhost:4200/home,

133
00:10:16,963 --> 00:10:24,605
bạn sẽ tự động hiển thị chế độ xem của thành phần nhà trong màn hình trình duyệt.

134
00:10:24,605 --> 00:10:30,601
Rất chính xác khi bạn đặt chế độ xem mà chúng ta sẽ xem xét trong slide tiếp theo và

135
00:10:30,601 --> 00:10:33,086
trong bài tập sau.

136
00:10:33,086 --> 00:10:37,903
Tương tự như vậy, bạn có thể có các chế độ xem khác trong

137
00:10:37,903 --> 00:10:42,821
ứng dụng Angular của bạn cũng có thể được hỗ trợ thông qua

138
00:10:42,821 --> 00:10:47,153
các URL khác là phần mở rộng cho localhost:4200.

139
00:10:47,153 --> 00:10:53,354
Vì vậy, ví dụ, nếu URL là localhost:4200/aboutus, sau đó

140
00:10:53,354 --> 00:11:00,410
có thể dẫn bạn để được hiển thị quan điểm được hiển thị bởi AboutComponent.

141
00:11:00,410 --> 00:11:05,070
Và tương tự, trình đơn sẽ hiển thị cho bạn MenuComponent và vân vân.

142
00:11:06,320 --> 00:11:09,088
Vì vậy, những gì điều này cho phép chúng tôi làm là,

143
00:11:09,088 --> 00:11:14,624
tùy thuộc vào những gì URL được sử dụng trong trình duyệt của bạn,

144
00:11:14,624 --> 00:11:19,956
bạn sẽ sử dụng nó để tự động điều hướng giữa các

145
00:11:19,956 --> 00:11:25,515
quan điểm khác nhau của các thành phần khác nhau của ứng dụng Angular của bạn.

146
00:11:25,515 --> 00:11:27,968
Bây giờ, bạn không cần phải lo lắng rõ ràng về nó.

147
00:11:27,968 --> 00:11:33,200
Nếu bạn cấu hình Bộ định tuyến góc để chăm sóc tất cả điều này, thì bộ định tuyến

148
00:11:33,200 --> 00:11:38,273
sẽ tự động chăm sóc cung cấp cho bạn điều hướng trong số các

149
00:11:38,273 --> 00:11:43,957
thành phần này như chúng ta sẽ thấy trong bài tập sau bài giảng cụ thể này.

150
00:11:43,957 --> 00:11:48,407
Bây giờ trước khi chúng ta tiến hành bài tập, nơi chúng ta sẽ tìm hiểu thêm về

151
00:11:48,407 --> 00:11:53,017
bộ định tuyến góc, hãy để tôi nhanh chóng thu hút sự chú ý của bạn

152
00:11:53,017 --> 00:11:57,945
vào một vài điều khoản trong bộ định tuyến góc mà bạn sẽ gặp phải trong quá trình tập thể dục và

153
00:11:57,945 --> 00:12:01,759
tôi muốn bạn đặc biệt chú ý đến các điều khoản này,

154
00:12:01,759 --> 00:12:07,357
bởi vì họ là rất quan trọng để hiểu cách các Router góc thực sự hoạt động.

155
00:12:07,357 --> 00:12:13,205
Vì vậy, trước tiên bạn sẽ thấy rằng khi chúng tôi thiết kế Angular Router,

156
00:12:13,205 --> 00:12:18,042
chúng tôi sẽ lấy sự trợ giúp của mô-đun router

157
00:12:18,042 --> 00:12:22,669
tạo thành một phần của thư viện định tuyến đường chéo góc cạnh.

158
00:12:22,669 --> 00:12:28,094
Vì vậy, chúng tôi sẽ nhập khẩu mô-đun router vào hoặc ứng dụng góc

159
00:12:28,094 --> 00:12:32,690
vào mô-đun ứng dụng và sau đó chúng tôi cũng sẽ nhập khẩu các tuyến đường.

160
00:12:32,690 --> 00:12:37,716
Vì vậy, các tuyến đường cho phép chúng tôi xác định các tuyến đường khác nhau

161
00:12:37,716 --> 00:12:43,335
mà ứng dụng Angular của chúng tôi sử dụng hoặc các bộ định tuyến góc sử dụng.

162
00:12:43,335 --> 00:12:49,047
Vì vậy, trong trường hợp đó, chúng tôi sẽ xác định các tuyến đường dưới dạng một đường dẫn và

163
00:12:49,047 --> 00:12:51,585
thành phần tương ứng.

164
00:12:51,585 --> 00:12:56,299
Vì vậy, như bạn đã thấy trong slide trước đó, bạn thấy rằng mỗi một trong những phần

165
00:12:56,299 --> 00:13:00,951
mở rộng URL đã được ánh xạ đến chế độ xem của thành phần cụ thể.

166
00:13:00,951 --> 00:13:05,729
Vì vậy, loại thông tin đó được cung cấp cho rằng Angular Router

167
00:13:05,729 --> 00:13:09,885
thông qua các tuyến đường và các tuyến đường này đều được chỉ định bằng cách sử dụng

168
00:13:09,885 --> 00:13:14,139
một đối tượng JavaScript như đường dẫn này với hai thuộc tính.

169
00:13:14,139 --> 00:13:18,470
Đường dẫn và thành phần và một số thuộc tính bổ sung mà chúng ta sẽ không

170
00:13:18,470 --> 00:13:22,970
gặp phải ngay bây giờ, nhưng chúng ta sẽ thấy trong một số bài tập sau này.

171
00:13:24,610 --> 00:13:28,531
Ngoài ra, câu hỏi thứ hai mà bạn sẽ tự hỏi là xem này sẽ được

172
00:13:28,531 --> 00:13:30,657
hiển thị ở đâu trong ứng dụng Angular của bạn?

173
00:13:30,657 --> 00:13:35,863
Đây là nơi trong mẫu của chúng tôi về thành phần ứng dụng của

174
00:13:35,863 --> 00:13:43,286
chúng tôi, chúng tôi sẽ bao gồm một chỉ thị được gọi là RouterOutlet được chỉ định như bạn

175
00:13:43,286 --> 00:13:48,628
thấy như là <router-outlet> và </router-outlet>.

176
00:13:48,628 --> 00:13:54,890
Điều này sẽ được bao gồm trong tệp mẫu thành phần ứng dụng,

177
00:13:54,890 --> 00:13:59,188
bây giờ sau đó bộ định tuyến góc của bạn điều hướng đến

178
00:13:59,188 --> 00:14:04,484
các chế độ xem khác nhau của các thành phần khác nhau. Chế

179
00:14:04,484 --> 00:14:08,899
độ xem tương ứng của thành phần sẽ được bao gồm trong

180
00:14:08,899 --> 00:14:13,633
chế độ xem ứng dụng của bạn bất cứ nơi nào bạn chỉ định ổ cắm bộ định tuyến cụ thể này.

181
00:14:13,633 --> 00:14:17,773
Vì vậy, xem ra cho rằng trong bài tập sau.

182
00:14:17,773 --> 00:14:22,752
Ngoài ra, để kích hoạt điều hướng, bạn sẽ thấy rằng

183
00:14:22,752 --> 00:14:27,743
với nhiều thẻ được sử dụng trong ứng dụng.

184
00:14:27,743 --> 00:14:32,429
Vì vậy, ví dụ, tôi sẽ bao gồm một thiết lập một thẻ với

185
00:14:32,429 --> 00:14:36,820
nút MD thành phần vật liệu góc trong thanh công cụ,

186
00:14:36,820 --> 00:14:41,327
trong thành phần tiêu đề của ứng dụng Angular của chúng tôi.

187
00:14:41,327 --> 00:14:44,635
Tôi sẽ liên kết một thẻ với một chỉ thị khác,

188
00:14:44,635 --> 00:14:47,437
một chỉ thị thuộc tính được gọi là RouterLink.

189
00:14:47,437 --> 00:14:53,260
RouterLink là một chỉ thị thực tế mà mô-đun bộ định tuyến cung cấp cho chúng tôi.

190
00:14:53,260 --> 00:14:57,966
Liên kết bộ định tuyến này cho phép chúng tôi xác định đường dẫn như, ví dụ,

191
00:14:57,966 --> 00:15:00,783
mã viết, tôi có thể thấy một “/menu”.

192
00:15:00,783 --> 00:15:05,677
Bạn có thể có nhiều chi tiết hơn thế này cho RouterLink.

193
00:15:05,677 --> 00:15:11,646
Nhưng đối với bài tập, chúng tôi sẽ bắt đầu với một ví dụ đơn giản, nơi chúng tôi sẽ có,

194
00:15:11,646 --> 00:15:15,806
ví dụ, /menu slash home slash liên hệ với chúng tôi và như vậy

195
00:15:15,806 --> 00:15:19,976
trên quy định bằng cách sử dụng thuộc tính RouterLink trực tiếp.

196
00:15:19,976 --> 00:15:25,212
Vì vậy, khi bạn nhấp vào một liên kết như thế này trong thanh công cụ của bạn,

197
00:15:25,212 --> 00:15:31,281
sau đó sẽ kích hoạt các bộ định tuyến góc để gây ra một sự thay đổi hoặc

198
00:15:31,281 --> 00:15:39,502
một điều hướng đến một chế độ xem cụ thể được hỗ trợ bởi các mô-đun bộ định tuyến góc.

199
00:15:39,502 --> 00:15:45,391
Vì vậy, ánh xạ giữa liên kết này và các thành phần tương ứng

200
00:15:45,391 --> 00:15:51,800
đã được chỉ định trong tuyến đường mà chúng tôi cung cấp cho ứng dụng Angular của chúng tôi.

201
00:15:51,800 --> 00:15:56,715
Vì vậy, hãy cẩn thận cho tất cả những điều này khi bạn tập thể dục.

202
00:15:56,715 --> 00:16:00,895
Tôi sẽ giải thích một số trong những điều này và lý do để

203
00:16:00,895 --> 00:16:07,366
làm chúng trong khi chúng tôi đang thực hiện các bước của bài tập sau bài học này.

204
00:16:07,366 --> 00:16:11,099
[ NHẠC]