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

2
00:00:04,965 --> 00:00:10,050
Trong bài tập này, chúng ta sẽ xem xét làm thế nào chúng ta có thể tận dụng

3
00:00:10,050 --> 00:00:14,397
mô-đun định tuyến của Angular để có thể hỗ trợ nhiều thành phần, và

4
00:00:14,397 --> 00:00:19,830
có thể điều hướng đến bất kỳ một trong những thành phần trong ứng dụng Angular của chúng tôi.

5
00:00:21,690 --> 00:00:26,280
Hãy xem nhanh trạng thái của ứng dụng của chúng tôi.

6
00:00:26,280 --> 00:00:29,647
Vào cuối bài tập cuối cùng,

7
00:00:29,647 --> 00:00:36,135
chúng tôi đã nhận thấy rằng trong ứng dụng này, trong tiêu đề,

8
00:00:36,135 --> 00:00:42,520
chúng tôi có liên kết đến bốn báo giá khác nhau, unquote trang ở đây.

9
00:00:42,520 --> 00:00:47,334
Bây giờ trong thuật ngữ Angular, điều này sẽ được hỗ trợ bằng cách sử dụng

10
00:00:47,334 --> 00:00:52,371
các thành phần khác nhau, như chúng ta sẽ thấy trong bài tập này.

11
00:00:52,371 --> 00:00:55,706
Vì vậy, ở đây chúng ta thấy rằng khi chúng ta nhấp vào Trang chủ,

12
00:00:55,706 --> 00:01:01,840
chúng tôi muốn có thể xem các chi tiết về những gì nên có mặt trong Trang chủ.

13
00:01:01,840 --> 00:01:07,182
Và tương tự, Giới thiệu và Menu tất nhiên bạn đã thấy nó ngay tại đó,

14
00:01:07,182 --> 00:01:12,608
và sau đó Liên hệ, có thể hiển thị một số thông tin về nội dung cho

15
00:01:12,608 --> 00:01:15,040
nhà hàng cụ thể này.

16
00:01:15,040 --> 00:01:18,450
Vậy làm thế nào để họ hỗ trợ những thứ như thế này?

17
00:01:18,450 --> 00:01:23,490
Đầu tiên, bằng cách nhìn nhanh vào nó, chúng ta thấy rằng Menu

18
00:01:23,490 --> 00:01:28,470
đã được hỗ trợ bằng cách hiển thị thông tin về menu ở đây, và điều

19
00:01:28,470 --> 00:01:32,720
này đã được tạo điều kiện với việc sử dụng thành phần Menu.

20
00:01:32,720 --> 00:01:37,720
Vì vậy, chúng ta thấy rằng các thành phần Menu là juxtaposed giữa tiêu đề và

21
00:01:37,720 --> 00:01:42,270
chân trang và có thể hiển thị các thông tin ngay tại đó.

22
00:01:42,270 --> 00:01:48,270
Bây giờ, làm thế nào chúng ta có thể tận dụng việc sử dụng mô-đun bộ định tuyến Angular

23
00:01:48,270 --> 00:01:54,270
để cho phép chúng tôi hỗ trợ nhiều thành phần này và có thể điều hướng trong số đó.

24
00:01:54,270 --> 00:01:58,810
Bây giờ, để bắt đầu, trước tiên, tất nhiên, chúng ta cần nhiều thành phần,

25
00:01:58,810 --> 00:02:04,370
mỗi thành phần hiển thị quan điểm tương ứng của họ để chúng ta có thể điều hướng giữa các quan điểm.

26
00:02:04,370 --> 00:02:09,390
Vì vậy, chúng ta hãy thêm vào ba thành phần nữa vào ứng dụng Angular của chúng tôi

27
00:02:09,390 --> 00:02:13,300
, Home, About và Contact.

28
00:02:13,300 --> 00:02:17,500
Bạn đã biết làm thế nào để làm điều đó, vì vậy chúng ta hãy đi đến bước đó tiếp theo.

29
00:02:17,500 --> 00:02:22,959
Tại dấu nhắc, gõ ng g thành phần

30
00:02:22,959 --> 00:02:28,616
home để tạo thành phần home.

31
00:02:28,616 --> 00:02:33,094
Tương tự như vậy tạo ra

32
00:02:33,094 --> 00:02:38,362
các thành phần về và

33
00:02:38,362 --> 00:02:43,100
cũng trong khi chúng tôi đang ở đó

34
00:02:43,100 --> 00:02:48,641
các thành phần tiếp xúc.

35
00:02:48,641 --> 00:02:53,031
Vì vậy, bây giờ chúng tôi có ba thành phần được thêm vào cùng với các thành phần mới mà chúng tôi

36
00:02:53,031 --> 00:02:53,903
đã có.

37
00:02:53,903 --> 00:02:58,445
Thành phần chi tiết đĩa đã được sử dụng trong các thành phần trình đơn vì vậy

38
00:02:58,445 --> 00:03:00,833
chúng tôi không xem xét nó cho thời điểm này.

39
00:03:00,833 --> 00:03:05,652
Nhưng bây giờ chúng ta có nhà, về, liên hệ và các thành phần menu, và

40
00:03:05,652 --> 00:03:08,339
chúng ta cần một cách để đi giữa chúng.

41
00:03:08,339 --> 00:03:09,882
Vậy làm thế nào để làm điều đó?

42
00:03:09,882 --> 00:03:14,806
Vì vậy, đó là nơi tôi sử dụng mô-đun bộ định tuyến Angular.

43
00:03:14,806 --> 00:03:20,618
Để bắt đầu sử dụng mô-đun bộ định tuyến để cho phép chúng tôi điều hướng

44
00:03:20,618 --> 00:03:26,225
giữa các thành phần này, hãy thêm vào một mô-đun Angular mới.

45
00:03:26,225 --> 00:03:32,012
Bây giờ mô hình sử dụng mô-đun router này là một cái gì đó được đề xuất cho các

46
00:03:32,012 --> 00:03:35,841
ứng dụng Angular phức tạp hơn một chút, nhưng

47
00:03:35,841 --> 00:03:41,735
nếu chúng ta thực hiện điều đó như một thực hành tiêu chuẩn, nó sẽ đi một chặng đường dài để giúp chúng ta trong tương lai.

48
00:03:41,735 --> 00:03:46,653
Vì vậy, tôi bắt đầu ngay cả các ứng dụng đơn giản với

49
00:03:46,653 --> 00:03:52,032
việc đưa mô-đun router vào mô-đun riêng biệt của nó.

50
00:03:52,032 --> 00:03:58,470
Vì vậy, nó bao gồm tất cả các nhu cầu định tuyến của chúng tôi vào một mô-đun riêng biệt.

51
00:03:58,470 --> 00:04:04,170
Để bắt đầu, chúng tôi lại sử dụng Angular CLI để

52
00:04:04,170 --> 00:04:10,450
tạo một mô-đun khác, và chúng tôi sẽ gọi mô-đun đó là định tuyến ứng dụng.

53
00:04:10,450 --> 00:04:15,237
Vì vậy, mô-đun định tuyến ứng dụng này mà chúng ta sẽ tạo ra là sẽ tận dụng

54
00:04:15,237 --> 00:04:20,599
mô-đun khía góc để cung cấp các tính năng định tuyến cho ứng dụng của chúng tôi.

55
00:04:20,599 --> 00:04:26,296
Và sau đó chúng tôi sẽ sử dụng nó trong mô-đun ứng dụng của chúng tôi để kích hoạt định tuyến.

56
00:04:26,296 --> 00:04:30,927
Để tạo ra một mô-đun mới được gọi là định tuyến ứng dụng,

57
00:04:30,927 --> 00:04:35,814
tại dấu nhắc gõ ng g mô-đun ứng dụng định tuyến,

58
00:04:35,814 --> 00:04:40,960
và điều đó nên tạo ra một mô-đun định tuyến ứng dụng và

59
00:04:40,960 --> 00:04:49,211
đặt một tập tin app-routing.module.t vào thư mục cụ thể đó.

60
00:04:49,211 --> 00:04:52,635
Bây giờ mô-đun định tuyến ứng dụng này chỉ còn lại ở đó.

61
00:04:52,635 --> 00:04:58,138
Chúng ta cần phải bao gồm một cách rõ ràng đó vào mô-đun ứng dụng của chúng tôi,

62
00:04:58,138 --> 00:05:01,662
vì vậy nó phải có khả năng sử dụng nó.

63
00:05:01,662 --> 00:05:06,669
Đi đến trình soạn thảo bây giờ chúng ta thấy rằng bây giờ chúng ta có một thư mục khác ở đây

64
00:05:06,669 --> 00:05:12,328
gọi là ứng dụng định tuyến và bên trong mà chúng tôi có một AppRoutingModule ở đây,

65
00:05:12,328 --> 00:05:18,374
chúng tôi chọn một mô-đun góc chung mà CLI góc đã tạo ra cho chúng tôi.

66
00:05:18,374 --> 00:05:22,034
Điều này không có gì cụ thể về định tuyến như vậy tại thời điểm này,

67
00:05:22,034 --> 00:05:24,737
nhưng chúng tôi sẽ thêm các tính năng trong đó.

68
00:05:24,737 --> 00:05:30,633
Nhưng, trước khi chúng tôi làm điều đó, chúng ta hãy sử dụng AppRoutingModule này trong app.module của chúng tôi,

69
00:05:30,633 --> 00:05:34,028
mô-đun gốc cho ứng dụng Angular của chúng tôi.

70
00:05:34,028 --> 00:05:38,271
Để làm điều đó, hãy mở app.module, và

71
00:05:38,271 --> 00:05:44,452
trong khi chúng ta đang ở đây, hãy để tôi làm một chút dọn dẹp ở đây.

72
00:05:44,452 --> 00:05:48,489
Tôi có xu hướng không thích mã vô tổ chức, vì vậy

73
00:05:48,489 --> 00:05:52,407
tôi sẽ chỉ di chuyển tất cả các mã này cho

74
00:05:52,407 --> 00:05:57,040
các thành phần với nhau ở một nơi có và

75
00:05:57,040 --> 00:06:02,650
sau đó tôi có dịch vụ của tôi được yêu cầu xuống dưới đây.

76
00:06:02,650 --> 00:06:09,180
Bây giờ chúng tôi có một mô-đun mới mà chúng tôi đang nhận được

77
00:06:09,180 --> 00:06:13,846
từ AppRoutingModule,

78
00:06:13,846 --> 00:06:17,764
mà chúng tôi chỉ cần tạo ra và

79
00:06:17,764 --> 00:06:22,614
sau đó tôi sẽ yêu cầu

80
00:06:22,614 --> 00:06:27,108
AppRoutingModule đó vào của tôi,

81
00:06:34,609 --> 00:06:37,040
Route module hoặc AppModule ở đây.

82
00:06:37,040 --> 00:06:43,080
Vì vậy, tôi bao gồm AppRoutingModule bằng cách nhập nó đầu tiên ở đó.

83
00:06:43,080 --> 00:06:47,625
Và sau đó, vào nhập khẩu, tôi đi vào và

84
00:06:47,625 --> 00:06:50,880
sau đó thêm vào AppRoutingModule.

85
00:06:53,440 --> 00:06:56,970
Ngay đó, AppRoutingModule.

86
00:06:56,970 --> 00:07:01,380
Vì vậy, với điều này, mô-đun ứng dụng

87
00:07:01,380 --> 00:07:05,640
của tôi, mô-đun gốc, bây giờ được cố định để sử dụng AppRoutingModule.

88
00:07:05,640 --> 00:07:11,420
Bây giờ điều này cho tôi sự tự do để phát triển phần định tuyến của

89
00:07:11,420 --> 00:07:18,540
tôi trong AppRoutingModule của tôi với sự tự tin đầy đủ rằng nó sẽ được sử dụng bởi mô-đun ứng dụng của tôi.

90
00:07:18,540 --> 00:07:21,370
Vì vậy, chúng ta hãy lưu các thay đổi vào mô-đun ứng dụng, và

91
00:07:21,370 --> 00:07:25,357
sau đó chúng tôi sẽ quay trở lại và mở AppRoutingModule ở đây.

92
00:07:26,400 --> 00:07:30,470
Và ở đây chúng ta sẽ sử dụng

93
00:07:30,470 --> 00:07:34,050
mô-đun router mà Angular cung cấp cho chúng ta.

94
00:07:34,050 --> 00:07:37,749
Vì vậy, ở đây cho phép tôi nhập khẩu,

95
00:07:41,156 --> 00:07:46,174
RouterModule đây, và cũng là đồng hành

96
00:07:46,174 --> 00:07:51,608
Routes module mà có sẵn từ Angular.

97
00:07:51,608 --> 00:07:56,428
Và sau đó vì vậy tôi sẽ nhập khẩu từ Angular,

98
00:07:56,428 --> 00:08:00,320
và sau đó, RouterModule đây.

99
00:08:00,320 --> 00:08:04,540
Vì vậy, từ thư viện bộ định tuyến góc, tôi nhập cả RouterModule và

100
00:08:04,540 --> 00:08:06,120
mô-đun Routes.

101
00:08:06,120 --> 00:08:14,590
Vì vậy, một khi tôi làm điều đó, rõ ràng, tôi cần để có thể bao gồm RouterModule trong đây.

102
00:08:14,590 --> 00:08:21,015
Vì vậy, ngoài CommonModule mà tôi đã nhập khẩu ở đó,

103
00:08:21,015 --> 00:08:25,330
tôi cũng cần phải sử dụng RouterModule ở đây.

104
00:08:25,330 --> 00:08:28,803
Bây giờ, tôi sẽ để nó ở thời điểm này.

105
00:08:28,803 --> 00:08:33,835
Chúng tôi sẽ phát triển các tuyến đường cho ứng dụng Angular của chúng tôi

106
00:08:33,835 --> 00:08:38,054
và sau đó quay lại và sửa chữa này một chút sau đó.

107
00:08:38,054 --> 00:08:44,225
Vì vậy, với điều này, hãy để tôi lưu các thay đổi cho mô-đun định tuyến ứng dụng.

108
00:08:44,225 --> 00:08:49,925
Và những gì tôi sẽ làm là, chỉ vì lợi ích của việc giữ mã của tôi sạch sẽ và

109
00:08:49,925 --> 00:08:56,574
tổ chức, tôi sẽ xác định tất cả các tuyến đường cho ứng dụng của tôi trong một tập tin khác.

110
00:08:56,574 --> 00:09:00,673
Nhưng tôi sẽ tạo trong thư mục app-routing và

111
00:09:00,673 --> 00:09:03,863
sau đó tôi sẽ đặt tên nó như routes.ts5.

112
00:09:03,863 --> 00:09:08,601
Bây giờ, bên trong tập tin này, tôi sẽ tạo ra tất cả các tuyến đường mà tôi cần.

113
00:09:08,601 --> 00:09:12,994
Vì vậy, trong đây, tôi sẽ nhập khẩu,

114
00:09:15,508 --> 00:09:23,255
Các tuyến đường từ, @angular /router,

115
00:09:23,255 --> 00:09:29,570
và sau đó sử dụng để xây dựng các tuyến đường cho ứng dụng của tôi.

116
00:09:29,570 --> 00:09:33,453
Bây giờ ngoài ra, tôi cần để có thể nhập tất cả

117
00:09:33,453 --> 00:09:37,745
các thành phần mà tôi có trong ứng dụng của tôi.

118
00:09:37,745 --> 00:09:41,303
Bởi vì tôi muốn có thể điều hướng đến tất cả các thành phần.

119
00:09:41,303 --> 00:09:44,158
Vậy tôi có danh sách tất cả các thành phần ở đâu?

120
00:09:44,158 --> 00:09:46,780
Tôi có chúng trong app_module.

121
00:09:46,780 --> 00:09:48,475
Vì vậy, hãy để tôi đi đến app_module.

122
00:09:50,917 --> 00:09:58,300
Tôi cố gắng không gõ mọi thứ càng nhiều càng tốt để kiểm soát mọi thứ.

123
00:09:58,300 --> 00:10:03,720
Vì vậy, tôi sẽ đi đến app_module, và sau đó tôi sao chép trong tất cả các thành phần mà tôi có.

124
00:10:03,720 --> 00:10:08,681
Tôi không cần AppComponent bởi vì tôi sẽ không trực tiếp điều hướng đến điều đó trong

125
00:10:08,681 --> 00:10:11,925
ứng dụng của tôi, nhưng những người còn lại tôi sẽ cần.

126
00:10:11,925 --> 00:10:18,441
Vì vậy, tôi sẽ chỉ đơn giản là sao chép tất cả những người và

127
00:10:18,441 --> 00:10:25,510
sau đó bao gồm chúng vào tập tin tuyến đường của tôi, ở đây.

128
00:10:25,510 --> 00:10:30,080
Vì vậy, bây giờ tôi có MenuComponent, Dishdetail, Header, Foot.

129
00:10:30,080 --> 00:10:33,190
Trên thực tế, tôi cũng không cần Header và FooterComponent.

130
00:10:33,190 --> 00:10:34,516
Tôi sẽ không cần Header và

131
00:10:34,516 --> 00:10:39,040
FooterComponent bởi vì tôi sẽ không điều hướng đến họ bằng cách sử dụng các tuyến đường.

132
00:10:39,040 --> 00:10:43,322
Vì vậy, hãy để tôi xóa tiêu đề và các thành phần chân trang.

133
00:10:43,322 --> 00:10:46,842
Tôi chỉ cần Menu, Home, About, Contacts.

134
00:10:46,842 --> 00:10:53,532
Tôi bao gồm Dishdetail, chúng tôi sẽ đến với điều đó trong một trong những bài tập sau này.

135
00:10:53,532 --> 00:10:57,949
Vì vậy, bây giờ mà chúng tôi đã bao gồm tất cả những điều này, bước tiếp theo là cho

136
00:10:57,949 --> 00:11:02,289
tôi để xác định các tuyến đường khác nhau có sẵn ở đây.

137
00:11:02,289 --> 00:11:06,884
Tôi sẽ xác định một hằng số ở đây có

138
00:11:06,884 --> 00:11:12,247
tên các tuyến đường của loại Routes.

139
00:11:12,247 --> 00:11:17,908
Vì vậy, bây giờ bạn thấy lý do tại sao tôi có các tuyến đường quan trọng từ bộ định tuyến Angular ở đó.

140
00:11:17,908 --> 00:11:23,148
Vì vậy, điều này sẽ cho phép tôi xác định một mảng chỉ định

141
00:11:23,148 --> 00:11:28,651
các tuyến đường khác nhau là một phần của ứng dụng của tôi.

142
00:11:28,651 --> 00:11:32,940
Ở đây, để tôi xác định tất cả các tuyến đường ở đây.

143
00:11:32,940 --> 00:11:37,854
Bây giờ khi bạn chỉ định các tuyến đường trong

144
00:11:37,854 --> 00:11:42,776
ứng dụng Angular của bạn, bạn sẽ chỉ định đường dẫn.

145
00:11:42,776 --> 00:11:48,303
Mà tôi sẽ bắt đầu với HomeComponent,

146
00:11:48,303 --> 00:11:53,139
và sau đó khi tôi điều hướng đến đường dẫn nhà,

147
00:11:53,139 --> 00:11:59,368
thành phần tương ứng là HomeComponent.

148
00:12:00,630 --> 00:12:05,940
Vì vậy, khi URL của tôi bao gồm nhà,

149
00:12:05,940 --> 00:12:08,930
sau đó tôi sẽ được điều hướng đến HomeComponent.

150
00:12:09,930 --> 00:12:14,905
Trong bài giảng trước đó, chúng ta đã thấy cách chúng ta sử dụng HTML

151
00:12:14,905 --> 00:12:21,513
PushState () để nhận ra

152
00:12:21,513 --> 00:12:27,010
điều hướng nội bộ, sử dụng hỗ trợ HTML cho PushState ().

153
00:12:27,010 --> 00:12:33,481
Vì vậy, đó là những gì tôi đang tận dụng ở đây để xác định các tuyến đường khác nhau ở đây.

154
00:12:33,481 --> 00:12:38,003
Vì vậy, khi tôi nói localhost:4200/home,

155
00:12:38,003 --> 00:12:43,387
sau đó đó đó là trỏ đến HomeComponent, ở đây.

156
00:12:43,387 --> 00:12:48,850
Vì vậy, đó là cách tôi sẽ điều hướng đến HomeComponent.

157
00:12:48,850 --> 00:12:55,909
Tương tự như vậy, chúng ta có thể xác định cho các thành phần khác trong ứng dụng của chúng tôi.

158
00:12:55,909 --> 00:13:03,213
Con đường tiếp theo mà tôi sẽ xác định là MenuComponent.

159
00:13:03,213 --> 00:13:09,006
Đối với bài tập này, tôi sẽ chỉ xác định hai điều này.

160
00:13:09,006 --> 00:13:14,119
Những bài còn lại sẽ được điền vào như một phần

161
00:13:14,119 --> 00:13:21,371
của một số bài tập và bài tập sau đó.

162
00:13:21,371 --> 00:13:25,791
Vì vậy, chúng tôi có hai trong số họ thiết lập, Home và Menu.

163
00:13:25,791 --> 00:13:29,400
Bây giờ, tôi cũng nên cung cấp các tuyến đường mặc định ở đây.

164
00:13:29,400 --> 00:13:35,379
Vì vậy, khi người dùng điều hướng đến localhost:4200,

165
00:13:35,379 --> 00:13:40,670
sau đó bạn sẽ kết thúc ở vị trí mặc định.

166
00:13:40,670 --> 00:13:46,054
Vì vậy, trong trường hợp đó, tôi sẽ chỉ đơn giản chuyển hướng người dùng đến HomeComponent,

167
00:13:46,054 --> 00:13:50,828
đó là những gì sẽ được hiển thị vào ứng dụng Angular.

168
00:13:50,828 --> 00:13:58,748
Vì vậy, để làm điều đó, tôi sẽ gõ vào tài sản ReDirectto.

169
00:13:58,748 --> 00:14:03,838
Và sau đó xác định nó là /home. Có

170
00:14:03,838 --> 00:14:10,507
nghĩa là khi bạn điều hướng mà không cung cấp đường dẫn URL ở đó,

171
00:14:10,507 --> 00:14:16,708
sau đó bạn sẽ tự động điều hướng đến HomeComponent,

172
00:14:16,708 --> 00:14:20,490
và điều này sẽ phù hợp với đầy đủ ở đây.

173
00:14:20,490 --> 00:14:25,023
Vì vậy, ba người này, tôi sẽ cung cấp cho các tuyến đường ở đây, cho thời điểm này.

174
00:14:25,023 --> 00:14:26,610
Những người còn lại,

175
00:14:26,610 --> 00:14:31,580
như tôi đã nói, sẽ được thêm vào như là một phần của phần còn lại của bài tập.

176
00:14:31,580 --> 00:14:36,658
Bây giờ, rõ ràng là bạn thấy những

177
00:14:36,658 --> 00:14:40,889
đường màu đỏ này ở đó bởi vì tất cả đều ở trong

178
00:14:40,889 --> 00:14:46,011
..

179
00:14:46,011 --> 00:14:50,232
Vì vậy, bây giờ, từ các tập tin routes.t,

180
00:14:50,232 --> 00:14:55,721
chúng tôi đang chuẩn bị Routes này hằng số ở đây và

181
00:14:55,721 --> 00:14:58,971
sau đó làm cho nó có sẵn.

182
00:14:58,971 --> 00:15:04,111
Vì vậy, bây giờ điều này đã sẵn sàng cho chúng tôi, chúng tôi sẽ quay trở lại ứng dụng-routing.module.

183
00:15:04,111 --> 00:15:09,282
Và trong app-routing.module,

184
00:15:09,282 --> 00:15:15,141
tôi sẽ nhập các tuyến đường không đổi, Rou

185
00:15:15,141 --> 00:15:17,908
tes hằng số.

186
00:15:17,908 --> 00:15:24,542
Nếu bạn muốn nói rằng như các tuyến đường, định tuyến hằng số, và sử dụng nó ở đây.

187
00:15:24,542 --> 00:15:26,516
Bây giờ, làm thế nào để tôi sử dụng nó ở đây?

188
00:15:26,516 --> 00:15:31,451
Bây giờ, RouterModule mất như

189
00:15:31,451 --> 00:15:36,029
một tham số cho ForRoot,

190
00:15:38,737 --> 00:15:42,261
Tham số là cấu hình tuyến đường.

191
00:15:42,261 --> 00:15:50,154
Vì vậy, tôi sẽ cung cấp các tuyến đường như là tham số cho rằng, RouterModule.

192
00:15:50,154 --> 00:15:56,520
Được rồi, để sửa cấu hình định tuyến của chúng tôi cho ứng dụng của chúng tôi.

193
00:15:56,520 --> 00:16:01,480
Một thay đổi cuối cùng mà chúng ta cần sửa chữa là từ app-routing.module,

194
00:16:01,480 --> 00:16:05,360
chúng tôi muốn có thể xuất RouterModule sang ứng dụng mô-đun của chúng tôi để

195
00:16:05,360 --> 00:16:07,120
nó cũng có thể sử dụng nó.

196
00:16:07,120 --> 00:16:11,796
Vì vậy, đây là nơi chúng tôi sử dụng các

197
00:16:11,796 --> 00:16:16,346
tài sản xuất khẩu trong trang trí NGModule của chúng tôi.

198
00:16:16,346 --> 00:16:22,907
Và làm cho RouterModule của chúng tôi có sẵn cho AppModule.

199
00:16:22,907 --> 00:16:27,990
Vì vậy, chúng ta hãy lưu những thay đổi cũng cho đến nay.

200
00:16:27,990 --> 00:16:30,845
Bây giờ, khi bạn định tuyến đến một trong những phần này,

201
00:16:30,845 --> 00:16:36,040
bất cứ điều gì bạn hiển thị chế độ xem cho các thành phần cụ thể.

202
00:16:36,040 --> 00:16:40,260
Chúng tôi không có bất cứ điều gì tại thời điểm này trong ứng dụng của chúng tôi.

203
00:16:40,260 --> 00:16:45,124
Khi bạn nhìn vào các tập tin AppComponent.html.

204
00:16:45,124 --> 00:16:49,961
Ở đây, theo mặc định chúng ta chỉ có ứng dụng tiêu đề, ứng dụng menu,

205
00:16:49,961 --> 00:16:52,107
và ứng dụng chân trang ở đây.

206
00:16:52,107 --> 00:16:54,780
Bây giờ may mắn thay,

207
00:16:54,780 --> 00:17:00,127
Angular RouterModule cung

208
00:17:00,127 --> 00:17:06,483
cấp cho chúng tôi một chỉ thị được gọi là router-outlet.

209
00:17:06,483 --> 00:17:11,635
Vì vậy, bất cứ khi nào bạn chỉ định chỉ thị này như,

210
00:17:14,802 --> 00:17:18,192
Thẻ trong tập tin mẫu của bạn.

211
00:17:18,192 --> 00:17:23,355
Sau đó, ứng dụng Angular của bạn sẽ tự động sử dụng

212
00:17:23,355 --> 00:17:30,545
nó như là nơi mà chế độ xem tương ứng cần được chèn vào.

213
00:17:30,545 --> 00:17:36,725
Vì vậy, bằng cách chỉ định bộ định tuyến ổ cắm trong tập tin mẫu của AppComponent của tôi.

214
00:17:36,725 --> 00:17:44,537
Bây giờ tôi sẽ có thể hiển thị bất kỳ thông tin nào trong số đó ở vị trí cụ thể đó.

215
00:17:44,537 --> 00:17:48,747
Vì vậy, chúng tôi đã thực hiện thay đổi đối với mô-đun định tuyến ứng dụng,

216
00:17:48,747 --> 00:17:54,573
tệp AppComponent.html, nơi chúng tôi đã thêm bộ định tuyến ổ cắm.

217
00:17:54,573 --> 00:17:59,416
Chúng tôi xác định các tuyến đường trong các tập tin Routes.Ts và

218
00:17:59,416 --> 00:18:06,074
sau đó chúng tôi có AppModule nơi chúng tôi thêm vào AppRoutingModule

219
00:18:06,074 --> 00:18:12,350
là một trong những nhập khẩu có, sau khi nhập khẩu nó lên đây.

220
00:18:12,350 --> 00:18:15,110
Vì vậy, sau khi tất cả những thay đổi này, chúng ta hãy

221
00:18:15,110 --> 00:18:21,890
đi và xem những gì các ứng dụng Angular của chúng tôi đang hiển thị trong trình duyệt.

222
00:18:21,890 --> 00:18:26,710
Đi đến trình duyệt của chúng tôi, bây giờ chúng ta có thể thấy rằng trong trình duyệt

223
00:18:26,710 --> 00:18:31,830
của chúng tôi điều mặc định đã được hiển thị ở đây là công trình nhà.

224
00:18:31,830 --> 00:18:40,060
Từ kiến thức của bạn về cách các thành phần được tạo ra bởi Angular CLI hoạt động.

225
00:18:40,060 --> 00:18:46,840
Bạn đã nhận ra rằng điều này phải nằm trong mẫu cho thành phần nhà.

226
00:18:46,840 --> 00:18:53,040
Ngoài ra, hãy xem URL trong phần địa chỉ của trình duyệt.

227
00:18:53,040 --> 00:18:56,860
Bạn thấy rằng nó nói localhost:4200/nhà.

228
00:18:56,860 --> 00:18:59,682
Nếu tôi chỉ cần gõ localhost:4200,

229
00:18:59,682 --> 00:19:04,996
điều này sẽ tự động chuyển hướng chính nó đến localhost:4200/home.

230
00:19:04,996 --> 00:19:12,923
Bởi vì chúng tôi thiết lập tuyến đường cụ thể đó trong cấu hình tuyến đường của chúng tôi ở đây.

231
00:19:12,923 --> 00:19:16,889
Bây giờ chúng tôi không có cách nào để đi đến các mô-đun còn lại, vì vậy

232
00:19:16,889 --> 00:19:22,167
làm thế nào để chúng tôi cung cấp các liên kết để chúng tôi có thể điều hướng đến các mô-đun còn lại.

233
00:19:22,167 --> 00:19:26,901
Vì vậy, để điền vào đó, chúng ta cần phải đi và có thể thêm

234
00:19:26,901 --> 00:19:31,358
thông tin bổ sung trong các tập tin mẫu thành phần tiêu đề để

235
00:19:31,358 --> 00:19:36,640
nó có thể điều hướng giữa các thành phần khác nhau.

236
00:19:36,640 --> 00:19:43,350
Quay trở lại trình soạn thảo của chúng tôi, hãy để tôi mở tệp HeaderComponent.html.

237
00:19:43,350 --> 00:19:49,010
Bên trong tập tin HeaderComponent này, chúng ta thấy rằng chúng ta có các nút này

238
00:19:49,010 --> 00:19:56,110
ở đây sẽ cho phép chúng ta điều hướng đến những thành phần cụ thể đó.

239
00:19:56,110 --> 00:20:02,050
Vì vậy, ở đây, chúng tôi lấy sự giúp đỡ của một chỉ thị thuộc tính mà

240
00:20:02,050 --> 00:20:08,370
mô-đun định tuyến cung cấp cho chúng tôi gọi là RouterLink.

241
00:20:08,370 --> 00:20:13,289
Vì vậy, để những chúng tôi sẽ cung cấp

242
00:20:13,289 --> 00:20:17,984
RouterLink như /home.

243
00:20:17,984 --> 00:20:22,968
Điều đó có nghĩa là đối với nút cụ thể này,

244
00:20:22,968 --> 00:20:26,171
liên kết nhà trong thanh công cụ của chúng tôi.

245
00:20:26,171 --> 00:20:30,334
Khi chúng ta nhấp vào đó, điều đó sẽ tự động hướng dẫn tôi đến nhà.

246
00:20:30,334 --> 00:20:36,640
Vì vậy, theo cách này, ứng dụng Angular của tôi biết nơi để gửi cho tôi vào thời điểm này.

247
00:20:36,640 --> 00:20:40,090
Vì vậy, đó là cho nhà ở đó.

248
00:20:40,090 --> 00:20:44,420
Bây giờ tương tự, hãy để tôi thêm một cho menu ở đây.

249
00:20:45,590 --> 00:20:48,550
Đối với menu, khi tôi nhấp vào liên kết menu ở đó,

250
00:20:48,550 --> 00:20:54,020
điều đó sẽ đưa tôi đến thành phần menu.

251
00:20:54,020 --> 00:21:01,140
Vì vậy, chỉ thị thuộc tính RouterLink cho phép tôi xác định, như bạn thấy

252
00:21:01,140 --> 00:21:08,010
ở đây một chuỗi nơi tôi có thể chỉ định đường dẫn cần phải được thêm vào.

253
00:21:09,010 --> 00:21:14,900
Hãy lưu những thay đổi này cũng, và sau đó bây giờ hãy xem xét cuối cùng tại ứng dụng của chúng tôi.

254
00:21:14,900 --> 00:21:21,021
Đi đến ứng dụng của chúng tôi, bây giờ chúng ta thấy rằng một thành phần Home được hiển thị ở đây.

255
00:21:21,021 --> 00:21:25,426
Khi chúng ta nhấp vào thành phần Menu, chúng ta đang ở menu.

256
00:21:25,426 --> 00:21:30,570
Vì vậy, hãy lưu ý cách ứng dụng của tôi tự động điều hướng

257
00:21:30,570 --> 00:21:35,509
đến thành phần menu để hiển thị chế độ xem với menu ở đây.

258
00:21:35,509 --> 00:21:39,590
Và cũng có một cái nhìn vào thanh địa chỉ,

259
00:21:39,590 --> 00:21:46,670
chú ý cách thanh địa chỉ hiện nay hiển thị localhost:4200/menu.

260
00:21:46,670 --> 00:21:51,670
Một lần nữa, chúng ta có thể điều hướng trở lại thành phần nhà và thành phần menu,

261
00:21:51,670 --> 00:21:52,410
qua lại.

262
00:21:53,580 --> 00:21:59,230
Vì vậy, điều này cho thấy làm thế nào bằng cách thêm định tuyến này vào ứng dụng của chúng

263
00:21:59,230 --> 00:22:04,940
tôi, chúng tôi có thể điều hướng và hiển thị các quan điểm khác nhau trong ứng dụng của chúng tôi.

264
00:22:04,940 --> 00:22:09,640
Bây giờ, về và liên lạc, chúng ta sẽ làm điều đó như một phần của

265
00:22:09,640 --> 00:22:14,090
bài tập khác và bài tập tiếp theo sau này.

266
00:22:15,150 --> 00:22:20,485
Điều này hoàn thành bài tập này, nơi chúng tôi đã sử dụng mô-đun bộ định tuyến góc và

267
00:22:20,485 --> 00:22:25,047
sau đó cấu hình ứng dụng Angular của chúng tôi để sử dụng các tuyến đường khác nhau

268
00:22:25,047 --> 00:22:27,212
để hiển thị các quan điểm khác nhau.

269
00:22:27,212 --> 00:22:29,240
Đây là thời điểm tốt

270
00:22:29,240 --> 00:22:35,117
để bạn thực hiện một cam kết Git với thông điệp cơ bản bộ định tuyến góc.

271
00:22:35,117 --> 00:22:36,115
[ NHẠC]