1
00:00:04,010 --> 00:00:09,440
Trước khi chúng ta bắt đầu trên các hình thức định hướng mẫu Angular,

2
00:00:09,440 --> 00:00:15,165
chúng ta cần phải tìm một cách để chồng lên nội dung trên đầu trang của chế độ xem web hiện tại.

3
00:00:15,165 --> 00:00:21,935
Bootstrap, chúng tôi có các mô hình cho phép chúng tôi phủ lên nội dung trên đầu trang Web.

4
00:00:21,935 --> 00:00:26,700
Với việc sử dụng vật liệu Góc trong ứng dụng Góc của chúng tôi,

5
00:00:26,700 --> 00:00:29,970
vật liệu Góc cung cấp một thành phần được gọi là

6
00:00:29,970 --> 00:00:32,820
Thành phần Đối thoại Góc cho

7
00:00:32,820 --> 00:00:35,865
phép bạn phủ lên nội dung trên đầu của chế độ xem hiện tại. Chúng ta

8
00:00:35,865 --> 00:00:42,010
hãy xem cách chúng ta sử dụng Thành phần Đối thoại trong bài tập này.

9
00:00:42,080 --> 00:00:45,470
Để bắt đầu vào bài tập này, chúng

10
00:00:45,470 --> 00:00:49,580
ta hãy đi đến mã của chúng tôi và chúng ta cần phải tìm

11
00:00:49,580 --> 00:00:54,230
một cách để kích hoạt các ứng dụng để hiển thị các cuộc đối thoại.

12
00:00:54,230 --> 00:00:58,620
Vì vậy, để làm điều đó, chúng ta hãy thêm vào một nút vào thanh công cụ của chúng tôi ở đây.

13
00:00:58,620 --> 00:01:01,475
Vì vậy, đi đến thanh công cụ ngay ở trên cùng ở đây,

14
00:01:01,475 --> 00:01:10,790
hãy để tôi thêm vào một khoảng với lớp đệm flex mà chúng tôi

15
00:01:10,790 --> 00:01:18,340
đã giới thiệu vào

16
00:01:18,340 --> 00:01:21,650
tập tin SCSS của chúng tôi cho ứng dụng của chúng tôi.

17
00:01:21,650 --> 00:01:29,170
Vì vậy, chúng tôi đã giới thiệu các spacer flexor trong tập tin styles.scss ở đây,

18
00:01:29,170 --> 00:01:30,840
ngay dưới đây.

19
00:01:30,840 --> 00:01:34,240
Vì vậy, đó là lớp mà chúng ta sẽ sử dụng với một khoảng ở đây.

20
00:01:34,240 --> 00:01:37,035
Vì vậy, khi bạn áp dụng các flexor spacer cho span,

21
00:01:37,035 --> 00:01:40,670
những gì nó làm là nó cung cấp đủ không gian giữa

22
00:01:40,670 --> 00:01:45,670
các yếu tố trước đó và các yếu tố sau đây.

23
00:01:45,670 --> 00:01:49,280
Vì vậy, nó sẽ đẩy bất cứ điều gì các yếu tố mà sau khoảng thời gian đến

24
00:01:49,280 --> 00:01:53,030
cạnh bên phải của màn hình càng nhiều càng tốt.

25
00:01:53,030 --> 00:01:54,985
Vì vậy, ở đây, sau này,

26
00:01:54,985 --> 00:01:57,500
hãy để tôi thêm vào một nút ở đây.

27
00:01:57,500 --> 00:02:02,755
Vì vậy, nút này khi nhấp vào sẽ

28
00:02:02,755 --> 00:02:09,635
gọi một chức năng gọi là OpenLoginForms.

29
00:02:09,635 --> 00:02:11,660
Vì vậy, như bạn nhận ra,

30
00:02:11,660 --> 00:02:17,865
đây là nơi chúng tôi sẽ hỗ trợ một hình thức cho đơn đăng ký của chúng tôi.

31
00:02:17,865 --> 00:02:22,475
Chúng ta sẽ xem xét cách hình thức được phát triển trong bài tập tiếp theo.

32
00:02:22,475 --> 00:02:25,330
Bây giờ, cho điều này, hãy để tôi thêm vào

33
00:02:25,330 --> 00:02:33,120
các biểu tượng tuyệt vời phông chữ tương ứng.

34
00:02:33,120 --> 00:02:38,950
Vì vậy, Tôi sẽ nói fa fa-đăng nhập,

35
00:02:42,290 --> 00:02:50,010
và cũng có thể thêm vào fa-lg để điều đó.

36
00:02:50,010 --> 00:02:52,875
Vì vậy, điều đó sẽ thêm vào một biểu tượng,

37
00:02:52,875 --> 00:02:54,645
biểu tượng đăng nhập ở đây,

38
00:02:54,645 --> 00:02:55,880
và sau đó sau đó,

39
00:02:55,880 --> 00:02:58,690
chúng tôi sẽ đặt đăng nhập từ trong đó.

40
00:02:58,690 --> 00:03:05,980
Vì vậy, điều này sẽ tạo ra một nút gọi là đăng nhập trong thanh công cụ

41
00:03:05,980 --> 00:03:14,070
đến cạnh phải của màn hình cùng với biểu tượng đăng nhập ở

42
00:03:14,070 --> 00:03:16,960
đó, khi nhấp vào, sẽ mở một biểu mẫu đăng nhập.

43
00:03:16,960 --> 00:03:22,670
Biểu mẫu đăng nhập này sẽ được lưu trữ bên trong một thành phần đối thoại tài liệu.

44
00:03:22,670 --> 00:03:26,204
Bây giờ, để tạo ra một thành phần đối thoại, rõ ràng,

45
00:03:26,204 --> 00:03:29,330
chúng ta nhận ra rằng đó sẽ là một thành phần

46
00:03:29,330 --> 00:03:32,270
cần được phủ lên trên quan điểm hiện tại ở đó.

47
00:03:32,270 --> 00:03:36,770
Vì vậy, chúng ta cần một thành phần khác để được thêm vào ứng dụng của chúng tôi.

48
00:03:36,770 --> 00:03:44,095
Vì vậy, chúng ta hãy đi đến thiết bị đầu cuối và sau đó thêm vào một thành phần nữa vào ứng dụng của chúng tôi.

49
00:03:44,095 --> 00:03:50,735
Đi đến thiết bị đầu cuối, hãy để tôi gõ ng g thành phần đăng nhập.

50
00:03:50,735 --> 00:03:55,725
Vì vậy, chúng tôi đã thêm một thành phần mới được gọi là thành phần đăng nhập vào ứng dụng của chúng tôi.

51
00:03:55,725 --> 00:03:57,725
Một khi thành phần đăng nhập được thêm vào,

52
00:03:57,725 --> 00:04:04,490
chúng ta hãy đi và cấu hình thành phần đăng nhập để trở thành một thành phần đối thoại trong ứng dụng của chúng tôi.

53
00:04:04,490 --> 00:04:08,305
Vì vậy, để làm điều đó, chúng ta hãy quay trở lại mã của chúng tôi.

54
00:04:08,305 --> 00:04:10,215
Quay lại mã của chúng tôi,

55
00:04:10,215 --> 00:04:13,715
bây giờ chúng ta thấy rằng thành phần đăng nhập bây giờ đang mở.

56
00:04:13,715 --> 00:04:16,445
Hãy để tôi mở tập tin thành phần đăng nhập.

57
00:04:16,445 --> 00:04:18,935
Vì vậy, cấu hình này như là

58
00:04:18,935 --> 00:04:24,485
một thành phần đối thoại trong ứng dụng Angular bằng cách sử dụng thành phần đối thoại tài liệu.

59
00:04:24,485 --> 00:04:30,385
Hãy để tôi nhập MatDialog.

60
00:04:30,385 --> 00:04:32,540
Vì vậy, đây là thành phần hỗ trợ

61
00:04:32,540 --> 00:04:39,480
các thành phần đối thoại trong vật liệu góc và sau đó cũng

62
00:04:39,600 --> 00:04:45,545
cho phép tôi nhập Matdialogref và chúng được nhập khẩu

63
00:04:45,545 --> 00:04:52,420
từ vật liệu góc ở đây.

64
00:04:53,140 --> 00:05:03,750
Điều này sẽ cho phép chúng tôi tạo ra thành phần của mình và biến nó thành một thành phần đối thoại.

65
00:05:03,750 --> 00:05:10,030
Bây giờ, sau này, chúng ta hãy đi trước và sau đó cấu hình tập tin mẫu của chúng tôi ở đây.

66
00:05:10,030 --> 00:05:11,940
Vì vậy, đi đến các tập tin mẫu ở đây,

67
00:05:11,940 --> 00:05:16,300
tôi sẽ tạo ra điều này như nói mat-toolbar.

68
00:05:16,300 --> 00:05:22,330
Vì vậy, trong cuộc đối thoại này cũng sẽ hiển thị một thanh công cụ.

69
00:05:25,350 --> 00:05:34,065
Đối với thanh công cụ này, tôi sẽ nói đăng nhập ngay ở phía trên, sau đó,

70
00:05:34,065 --> 00:05:43,920
chúng tôi sẽ giới thiệu lớp đệm flex

71
00:05:43,920 --> 00:05:49,350
ở đây và sau đó sau khi lớp đệm flex,

72
00:05:49,350 --> 00:05:53,169
chúng tôi sẽ thêm vào một nút

73
00:05:54,590 --> 00:06:04,385
với các thuộc tính mat-nút mat-dialog-close.

74
00:06:04,385 --> 00:06:09,850
Vì vậy, mat-dialog-close này là một cái gì đó mà các thành phần đối thoại hỗ trợ cho chúng tôi,

75
00:06:09,850 --> 00:06:13,490
thuộc tính này biến nút này thành

76
00:06:13,490 --> 00:06:18,255
một nút mà khi nhấp sẽ đóng hộp thoại này ở đó.

77
00:06:18,255 --> 00:06:26,740
Bên trong cái nút này, tôi sẽ sử dụng một lần trong đó.

78
00:06:26,740 --> 00:06:30,600
Vì vậy, nó sẽ hiển thị nó như một cây thập tự trên màn hình ở đó.

79
00:06:30,600 --> 00:06:33,110
Vì vậy, đó là nút mà chúng tôi sẽ thêm vào cuộc đối thoại.

80
00:06:33,110 --> 00:06:38,855
Ngay bây giờ, cuộc đối thoại của chúng ta chỉ chứa điều này trong quan điểm của nó.

81
00:06:38,855 --> 00:06:44,870
Bây giờ, để cho phép chúng ta bao gồm các thành phần đối thoại và tận dụng nó,

82
00:06:44,870 --> 00:06:47,350
tất nhiên, chúng ta cần phải đi đến các mô-đun ứng dụng.

83
00:06:47,350 --> 00:06:49,030
Trong mô-đun ứng dụng,

84
00:06:49,030 --> 00:06:59,190
chúng ta cần nhập mô-đun tương ứng hỗ trợ thành phần đối thoại.

85
00:06:59,190 --> 00:07:02,765
Vì vậy, chúng tôi sẽ nhập MatdialogueModule

86
00:07:02,765 --> 00:07:10,200
từ hộp thoại vật liệu Angular.

87
00:07:10,200 --> 00:07:20,300
Vì vậy, điều này sẽ thêm trong các mô-đun đối thoại vào ứng dụng của chúng tôi và sau đó như bạn mong đợi,

88
00:07:20,300 --> 00:07:25,070
họ sẽ phải đi xuống đây vào nhập khẩu và sau đó nhập khẩu

89
00:07:25,070 --> 00:07:30,515
mô-đun hộp thoại đó vào ứng dụng của chúng tôi.

90
00:07:30,515 --> 00:07:32,735
Không chỉ thế này, bây giờ,

91
00:07:32,735 --> 00:07:38,575
để biến một thành phần Angular thành một thành phần hộp thoại,

92
00:07:38,575 --> 00:07:44,330
chúng ta còn cần phải khai báo thành phần đó như là một thành phần nhập.

93
00:07:44,330 --> 00:07:49,310
Bây giờ, nhớ lại rằng chúng tôi đã thêm vào thành phần đăng nhập vào ứng dụng của chúng tôi và vì vậy

94
00:07:49,310 --> 00:07:51,920
thành phần đăng nhập này đã được thêm vào

95
00:07:51,920 --> 00:07:54,845
đó và sau đó cũng bao gồm trong các tờ khai.

96
00:07:54,845 --> 00:08:02,255
Bây giờ, nếu bạn muốn sử dụng nó như là một lớp phủ với thành phần hộp thoại vật liệu,

97
00:08:02,255 --> 00:08:08,285
chúng ta cũng cần phải bao gồm đó vào một thuộc tính khác được gọi là thành

98
00:08:08,285 --> 00:08:17,460
phần nhập cảnh trong bộ trang trí mô-đun ng của chúng tôi ở đây.

99
00:08:17,460 --> 00:08:19,715
Vì vậy, bên trong các thành phần mục nhập này,

100
00:08:19,715 --> 00:08:23,810
tôi cũng cần phải bao gồm các thành phần đăng nhập trong đây.

101
00:08:23,810 --> 00:08:26,000
Bây giờ, điều này sẽ cho phép chúng tôi sử dụng

102
00:08:26,000 --> 00:08:30,235
thành phần đăng nhập như một lớp phủ trên đầu trang của màn hình hiện tại.

103
00:08:30,235 --> 00:08:35,330
Vì vậy, một khi chúng tôi đã cập nhật thành phần vật liệu Angular

104
00:08:35,330 --> 00:08:39,370
, bây giờ, chúng ta cần có khả năng kích hoạt thành phần đăng nhập này.

105
00:08:39,370 --> 00:08:42,530
Bây giờ, chúng tôi đã thêm vào nút vào thành

106
00:08:42,530 --> 00:08:47,240
phần tiêu đề và sau đó ở đây chúng tôi có chức năng này được gọi là biểu mẫu đăng nhập mở.

107
00:08:47,240 --> 00:08:51,770
Vì vậy, điều này cần để kích hoạt hiển thị của cuộc đối thoại.

108
00:08:51,770 --> 00:08:56,350
Vì vậy, đi vào tập tin thành phần tiêu đề,

109
00:08:57,410 --> 00:09:04,350
để sử dụng các thành phần hộp thoại mat trong thành phần tiêu đề,

110
00:09:04,350 --> 00:09:12,420
hãy để tôi nhập MatDialog và sau đó

111
00:09:12,420 --> 00:09:22,605
MatDialogref từ vật liệu góc.

112
00:09:22,605 --> 00:09:26,745
Bên trong chức năng này, trong constructor,

113
00:09:26,745 --> 00:09:28,575
hãy để tôi tiêm

114
00:09:28,575 --> 00:09:37,365
các đối thoại như MatDialog.

115
00:09:37,365 --> 00:09:43,680
Vì vậy, đây là một dịch vụ cho phép chúng ta mở các thành phần như một thành phần hộp thoại.

116
00:09:43,680 --> 00:09:45,615
Bây giờ, điều này hoạt động như thế nào?

117
00:09:45,615 --> 00:09:50,039
Vì vậy, trong đây, chúng ta cần phải thêm vào chức năng này được gọi là OpenLog

118
00:09:52,090 --> 00:09:57,610
Inform, mà khi được gọi nên kích hoạt hiển thị của các thành phần đối thoại.

119
00:09:57,610 --> 00:10:00,894
Vì vậy, đối với điều này, chúng ta sẽ nói, hộp thoại này,

120
00:10:00,894 --> 00:10:03,860
và hộp thoại này hỗ trợ một chức năng được gọi

121
00:10:03,860 --> 00:10:09,395
là mở mà chúng tôi cung cấp các thành phần mà sẽ

122
00:10:09,395 --> 00:10:18,170
đóng vai trò như là quan điểm cho các cuộc đối thoại được phủ trên đầu trang của chế độ xem web hiện tại.

123
00:10:18,170 --> 00:10:22,415
Vì vậy, ở đây, như chúng ta nhận ra,

124
00:10:22,415 --> 00:10:28,475
chúng tôi đã tuyên bố thành phần đăng nhập là thành phần hộp thoại.

125
00:10:28,475 --> 00:10:33,740
Vì vậy, chúng tôi sẽ gọi thành phần đăng nhập

126
00:10:33,740 --> 00:10:39,670
và sau đó chúng tôi cũng sẽ chỉ định một kích thước cho hộp thoại.

127
00:10:39,670 --> 00:10:40,910
Nếu bạn muốn,

128
00:10:40,910 --> 00:10:44,089
bạn có thể cho phép hiển thị kích thước mặc định,

129
00:10:44,089 --> 00:10:47,610
nhưng bạn cũng có thể cấu hình kích thước một cách rõ ràng nếu bạn muốn.

130
00:10:47,610 --> 00:10:48,620
Vì vậy, trong trường hợp này,

131
00:10:48,620 --> 00:10:57,960
hãy để tôi cấu hình chiều rộng và chiều cao của hộp thoại này.

132
00:11:02,370 --> 00:11:05,960
Bạn không nhất thiết phải làm điều này, nếu bạn không làm điều này,

133
00:11:05,960 --> 00:11:11,990
thì hộp thoại sẽ được hiển thị trong kích thước mặc định chuẩn ở đây.

134
00:11:11,990 --> 00:11:16,550
Vì vậy, với điều này, thành phần tiêu đề của tôi

135
00:11:16,550 --> 00:11:20,490
bây giờ được cấu hình như vậy mà khi biểu mẫu đăng nhập mở được gọi,

136
00:11:20,490 --> 00:11:23,765
sau đó điều này sẽ cho phép chúng tôi mở

137
00:11:23,765 --> 00:11:28,835
thành phần đăng nhập như một cuộc đối thoại và sau đó hiển thị nó trên đầu trang của chuỗi hiện tại.

138
00:11:28,835 --> 00:11:32,090
Vì vậy, chúng ta hãy lưu tất cả các thay đổi và sau đó đi và

139
00:11:32,090 --> 00:11:35,605
xem ứng dụng của chúng tôi trong trình duyệt.

140
00:11:35,605 --> 00:11:40,310
Đi đến trình duyệt, bây giờ bạn sẽ thấy rằng ở cạnh bên phải của màn hình,

141
00:11:40,310 --> 00:11:43,010
chúng tôi có một nút mới ở đây gọi là nút đăng nhập,

142
00:11:43,010 --> 00:11:47,085
và thấy rằng ký hiệu trong phông chữ biểu tượng tuyệt vời thêm vào đó.

143
00:11:47,085 --> 00:11:49,560
Bây giờ, khi bạn nhấp vào nút đăng nhập,

144
00:11:49,560 --> 00:11:53,995
bạn sẽ ngay lập tức thấy một hộp thoại pop-up trên màn hình.

145
00:11:53,995 --> 00:11:58,610
Một lần nữa, bạn có thể bỏ qua điều đó bằng cách nhấp vào bất kỳ nơi nào trên màn hình bên ngoài

146
00:11:58,610 --> 00:12:03,225
hộp thoại hoặc bạn nhấp vào đó và sau đó hộp thoại bật lên trên màn hình.

147
00:12:03,225 --> 00:12:06,840
Vì vậy, từ Bootstrap, bạn đã thấy phương thức trong Bootstrap.

148
00:12:06,840 --> 00:12:10,485
Vì vậy, điều này là chính xác giống như phương thức từ Bootstrap.

149
00:12:10,485 --> 00:12:13,645
Vì vậy, ở đây, chúng tôi có hộp thoại bật lên trên màn hình.

150
00:12:13,645 --> 00:12:17,720
Bây giờ, chúng ta có không gian trên hộp thoại mà bây giờ chúng ta có thể đặt

151
00:12:17,720 --> 00:12:22,790
trong nội dung mà chúng ta cần phải hiển thị khi hộp thoại này được gọi.

152
00:12:22,790 --> 00:12:26,120
Cũng lưu ý nút bỏ qua này ở đây.

153
00:12:26,120 --> 00:12:27,260
Vì vậy, khi bạn nhấp vào đó,

154
00:12:27,260 --> 00:12:29,030
cuộc đối thoại cũng bị bác bỏ.

155
00:12:29,030 --> 00:12:31,535
Bây giờ, khi bạn nhấp vào bất cứ nơi nào trên hộp thoại,

156
00:12:31,535 --> 00:12:36,320
không có gì xảy ra, nhưng khi bạn nhấp vào nút này, hộp thoại sẽ bị loại bỏ.

157
00:12:36,320 --> 00:12:43,340
Vì vậy, đây là cách thành phần hộp thoại từ vật liệu Angular hoạt động trong ứng dụng của chúng tôi.

158
00:12:43,340 --> 00:12:50,005
Bước tiếp theo là thêm vào biểu mẫu đăng nhập vào hộp thoại này.

159
00:12:50,005 --> 00:12:53,365
Với điều này, chúng tôi hoàn thành bài tập này.

160
00:12:53,365 --> 00:12:58,250
Trong bài tập này, bạn đã thấy cách chúng ta có thể sử dụng hộp thoại vật liệu góc để

161
00:12:58,250 --> 00:13:04,575
thêm một lớp phủ vào ứng dụng của chúng tôi và sau đó hiển thị nó trên đầu trang của chế độ xem hiện tại.

162
00:13:04,575 --> 00:13:07,610
Chúng tôi sẽ thêm vào biểu mẫu này.

163
00:13:07,610 --> 00:13:13,770
Đây là thời điểm tốt để bạn thực hiện cam kết Git với hộp thoại tin nhắn.