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

2
00:00:04,711 --> 00:00:06,798
Nếu bạn có một trang web tĩnh,

3
00:00:06,798 --> 00:00:11,735
sau đó bạn có tất cả các dữ liệu mà bạn cần để xây dựng trang web của bạn.

4
00:00:11,735 --> 00:00:17,790
Và nó sẽ được tạo ra một lần và trang web của bạn đã sẵn sàng để đi.

5
00:00:17,790 --> 00:00:23,208
Nhưng nhiều trang web những ngày này được thúc đẩy bởi dữ liệu từ phụ trợ.

6
00:00:23,208 --> 00:00:27,721
Ứng dụng web của bạn sẽ lấy dữ liệu từ một máy chủ phụ trợ và

7
00:00:27,721 --> 00:00:32,667
sau đó sử dụng dữ liệu để bố trí nội dung tự động trên trang web của bạn, hoặc

8
00:00:32,667 --> 00:00:35,474
thậm chí cập nhật nội dung trên trang web của bạn.

9
00:00:35,474 --> 00:00:40,090
Vì vậy, điều này đòi hỏi dữ liệu để chảy từ backend thông qua

10
00:00:40,090 --> 00:00:43,410
ứng dụng web của bạn đến DOM.

11
00:00:43,410 --> 00:00:49,161
Và bất kỳ tương tác người dùng nào trên DOM nên được chuyển trở lại ứng dụng web của bạn.

12
00:00:49,161 --> 00:00:54,211
Vì vậy, điều này đòi hỏi sự giao tiếp giữa DOM và

13
00:00:54,211 --> 00:00:59,920
thành phần của bạn trong khung góc cạnh ví dụ.

14
00:00:59,920 --> 00:01:03,268
Hãy xem điều này xảy ra như thế nào trong khuôn khổ góc cạnh và

15
00:01:03,268 --> 00:01:04,880
với một chút chi tiết hơn.

16
00:01:06,900 --> 00:01:11,420
Những gì chúng tôi đã học được cho đến nay là làm thế nào một thành phần được chuẩn bị.

17
00:01:11,420 --> 00:01:17,129
Vì vậy, chúng tôi thấy rằng các thành phần có hai phần chính, các

18
00:01:17,129 --> 00:01:24,380
tập tin typescript nơi kiến trúc của các thành phần được xác định, và các thuộc tính.

19
00:01:24,380 --> 00:01:29,480
Và các phương pháp của và sau đó bạn có mẫu

20
00:01:29,480 --> 00:01:34,430
xác định cách nội dung được đặt ra, và thêm vào DOM.

21
00:01:34,430 --> 00:01:38,410
Vì vậy, các mẫu là một trong đó sẽ cung cấp bởi một thành phần để

22
00:01:38,410 --> 00:01:41,640
chiếm một phần của trang web của bạn.

23
00:01:41,640 --> 00:01:45,870
Vì vậy, các mẫu hình thành phương tiện truyền thông để DOM của bạn.

24
00:01:45,870 --> 00:01:52,210
Và mẫu này yêu cầu dữ liệu được lấy từ thành phần của bạn

25
00:01:53,450 --> 00:02:00,040
để hiển thị các phần của nội dung trên mẫu của bạn và

26
00:02:00,040 --> 00:02:04,105
tương ứng trong DOM của trang web của bạn.

27
00:02:05,250 --> 00:02:11,662
Bây giờ, nếu bạn không có sự sang trọng của một framework như Angular,

28
00:02:11,662 --> 00:02:16,442
bạn phải đối phó với toàn bộ chi tiết về cách

29
00:02:16,442 --> 00:02:21,586
dữ liệu chảy từ trang web ứng dụng sang DOM.

30
00:02:21,586 --> 00:02:25,696
Và làm thế nào các sự kiện tương tác người dùng gây ra

31
00:02:25,696 --> 00:02:29,980
trong DOM sẽ được gửi trở lại ứng dụng của bạn.

32
00:02:29,980 --> 00:02:33,851
May mắn thay, với các công trình khung như Angular,

33
00:02:33,851 --> 00:02:38,520
họ hỗ trợ tất cả các hành vi này vốn có.

34
00:02:38,520 --> 00:02:44,047
Bây giờ chúng ta đã thấy một cách sử dụng dòng dữ liệu từ một

35
00:02:44,047 --> 00:02:48,504
thuộc tính thành phần đến mẫu trong các bài tập trước đó.

36
00:02:48,504 --> 00:02:54,433
Nơi chúng tôi sử dụng dấu ngoặc kép để cung cấp thông tin

37
00:02:54,433 --> 00:03:02,050
từ một biến trong mã TypeScript của thành phần của bạn, cho mẫu của bạn.

38
00:03:02,050 --> 00:03:03,830
Chúng tôi sẽ xem xét những cách khác, và

39
00:03:03,830 --> 00:03:08,670
sau đó cũng trong bài tập sau, chúng tôi sẽ sử dụng điều này,

40
00:03:08,670 --> 00:03:14,370
để sửa đổi các ứng dụng góc cạnh mà chúng tôi đã phát triển cho đến nay.

41
00:03:15,570 --> 00:03:18,975
Những gì chúng ta đã nói,

42
00:03:18,975 --> 00:03:23,972
cho đến nay, là ràng buộc dữ liệu, một cơ chế để phối hợp dòng thông tin giữa mẫu và

43
00:03:23,972 --> 00:03:27,468
thành phần, hoặc giữa DOM và thành phần.

44
00:03:27,468 --> 00:03:30,627
Ở cấp độ thành phần, đó là một số loại thuộc tính hoặc

45
00:03:30,627 --> 00:03:35,215
một phương thức cần được cung cấp cho mẫu hoặc được gọi từ DOM.

46
00:03:35,215 --> 00:03:38,269
Hoặc ở phía mẫu, nó có thể là một số thông

47
00:03:38,269 --> 00:03:41,890
tin được yêu cầu bởi các mẫu để được kết xuất vào DOM hoặc

48
00:03:41,890 --> 00:03:45,905
thậm chí từ DOM bắt và gửi trở lại thành phần của bạn.

49
00:03:45,905 --> 00:03:50,886
Vì vậy, tất cả điều này đòi hỏi dữ liệu chảy từ

50
00:03:50,886 --> 00:03:55,868
các thành phần đến các mẫu hoặc các sự kiện được thu thập từ DOM hoặc

51
00:03:55,868 --> 00:04:01,735
được gửi trở lại thành phần của bạn cho nó để hành động trên các sự kiện.

52
00:04:01,735 --> 00:04:07,967
Bây giờ điều này có thể dễ dàng xử lý trong khung góc cạnh bằng cách sử dụng bốn

53
00:04:07,967 --> 00:04:14,850
loại khác nhau của dòng thông tin mà chúng tôi sẽ tóm tắt trong slide tiếp theo.

54
00:04:14,850 --> 00:04:19,150
Trở lại với sự tương tác giữa thành phần và mẫu,

55
00:04:19,150 --> 00:04:22,820
chúng ta đã thấy loại tương tác đầu tiên giữa thành

56
00:04:22,820 --> 00:04:27,800
phần và mẫu mà giá trị của một thuộc tính đang chảy vào mẫu.

57
00:04:27,800 --> 00:04:31,130
Vì vậy, chúng tôi đã thấy việc sử dụng tên món ăn,

58
00:04:31,130 --> 00:04:35,720
mô tả món ăn, các chi tiết bình luận món ăn và như vậy

59
00:04:35,720 --> 00:04:40,910
được cung cấp để hiển thị thông tin trong mẫu của bạn.

60
00:04:40,910 --> 00:04:47,210
Vì vậy, đó là nơi chúng tôi đã sử dụng các dấu ngoặc kép để kèm theo thực tế là

61
00:04:47,210 --> 00:04:53,030
một giá trị từ thành phần của bạn đang được sử dụng trong mẫu của bạn.

62
00:04:53,030 --> 00:04:58,160
Một loại dòng thông tin khác mà bạn sẽ thấy Là nơi

63
00:04:58,160 --> 00:05:04,930
bạn chỉ định một số loại thuộc tính được liên kết với một thẻ trong dấu ngoặc vuông.

64
00:05:04,930 --> 00:05:11,670
Và sau đó gán nó là giá trị từ một trong các thuộc tính trong thành phần của bạn.

65
00:05:12,790 --> 00:05:17,010
Loại cách tiếp cận này chúng ta sẽ thấy trong bài tập sau

66
00:05:17,010 --> 00:05:19,210
ngay sau bài giảng này.

67
00:05:19,210 --> 00:05:22,160
Vì vậy, ở đây chúng tôi sẽ chỉ định một cái gì đó trong dấu ngoặc vuông.

68
00:05:22,160 --> 00:05:23,100
Vì vậy, xem ra cho

69
00:05:23,100 --> 00:05:28,880
một ví dụ về điều đó trong bài tập nơi tôi sẽ thảo luận thêm về điều này.

70
00:05:28,880 --> 00:05:32,640
Tương tự, nếu bạn có một sự kiện được tạo ra gần DOM,

71
00:05:32,640 --> 00:05:36,840
sự kiện đó có thể dẫn đến việc gọi đến một xử lý hoặc

72
00:05:36,840 --> 00:05:42,280
một phương thức Trong thành phần của bạn sẽ chăm sóc xử lý sự kiện này.

73
00:05:42,280 --> 00:05:45,310
Vì vậy, các phương pháp mà sẽ được gọi bởi

74
00:05:45,310 --> 00:05:50,220
các sự kiện từ DOM của bạn được gọi là xử lý.

75
00:05:50,220 --> 00:05:55,670
Vì vậy, xử lý là không có gì, nhưng, như tôi đã nói một phương pháp, mà cũng có thể

76
00:05:55,670 --> 00:06:01,039
được thông qua trong một số tham số bên trong các phương pháp xử lý ở đó.

77
00:06:02,790 --> 00:06:09,620
Sau đó, khi chúng ta nhìn vào các hình thức, chúng ta sẽ thấy một liên kết dữ liệu hai chiều.

78
00:06:09,620 --> 00:06:16,190
Vì vậy, tất cả ba mà chúng ta đã nhìn thấy cho đến nay, dòng chảy của các giá trị từ

79
00:06:16,190 --> 00:06:20,910
các thành phần để các mẫu hoặc tài sản được gán cho một giá trị hoặc

80
00:06:20,910 --> 00:06:26,380
các sự kiện được gán cho một xử lý để xử lý các sự kiện.

81
00:06:26,380 --> 00:06:29,780
Tất cả những điều này là những gì chúng tôi gọi là ràng buộc dữ liệu một chiều bởi vì

82
00:06:31,010 --> 00:06:33,240
chúng chỉ chảy theo một hướng.

83
00:06:33,240 --> 00:06:37,810
Bạn cũng có thể có dòng chảy hai chiều nơi bạn cũng có thể nhìn thấy nó

84
00:06:37,810 --> 00:06:41,200
trong cú pháp những gì bạn sẽ chỉ định với dấu ngoặc vuông.

85
00:06:41,200 --> 00:06:44,590
Và sau đó được bao bọc bên trong đó với dấu ngoặc đơn chuẩn.

86
00:06:44,590 --> 00:06:47,772
Một bên trong đó bạn sẽ xác định một cái gì đó giống như một NGModel.

87
00:06:47,772 --> 00:06:52,575
Bạn sẽ thấy việc sử dụng này khi nó hình thành sau này trong mô-đun tiếp theo.

88
00:06:52,575 --> 00:06:55,215
Vì vậy, đây là nơi bạn sẽ gán một tài sản cho điều đó.

89
00:06:55,215 --> 00:06:58,675
Vì vậy, trong trường hợp này dòng thông tin là hai chiều.

90
00:06:58,675 --> 00:07:03,789
Vì vậy, bất kỳ thay đổi nào trong DOM của bạn sẽ được phản ánh trở lại vào tài sản của bạn và

91
00:07:03,789 --> 00:07:05,029
các thành phần.

92
00:07:05,029 --> 00:07:08,785
Bất kỳ thay đổi nào trong thuộc tính của thành phần sẽ được phản ánh trở lại DOM.

93
00:07:08,785 --> 00:07:12,700
Lưu ý cú pháp cụ thể mà chúng tôi sử dụng để

94
00:07:12,700 --> 00:07:15,918
xác định NGModel trong ví dụ này ở đây.

95
00:07:15,918 --> 00:07:21,100
Chúng tôi sử dụng một khung vuông và bên trong mà chúng tôi sử dụng dấu ngoặc đơn chuẩn trong đó.

96
00:07:22,390 --> 00:07:25,640
Bây giờ hãy để tôi tóm tắt những gì chúng ta vừa học được về

97
00:07:25,640 --> 00:07:30,620
ràng buộc dữ liệu trong trang chiếu trước đó vào bảng này.

98
00:07:30,620 --> 00:07:36,890
Vì vậy, trong bảng này, chúng tôi đang hiển thị các cách khác nhau mà dữ liệu ràng buộc được sử dụng.

99
00:07:36,890 --> 00:07:41,610
Một chiều dữ liệu ràng buộc từ nguồn dữ liệu đến mục tiêu xem vì vậy

100
00:07:41,610 --> 00:07:45,370
từ thành phần đến DOM,

101
00:07:45,370 --> 00:07:51,720
chúng ta đang sử dụng một biểu thức dấu ngoặc kép bên trong đó.

102
00:07:51,720 --> 00:07:55,970
Đây là những gì chúng tôi đề cập đến như là một ví dụ trong đó,

103
00:07:55,970 --> 00:08:01,080
sẽ là tên món ăn, kèm theo bên trong niềng răng đôi như chúng ta đã thấy,

104
00:08:01,080 --> 00:08:06,030
được sử dụng trong các bài tập, trong mô-đun trước đó.

105
00:08:06,030 --> 00:08:11,345
Sau đó, chúng tôi có, loại thứ hai mà bạn kèm theo mục tiêu

106
00:08:11,345 --> 00:08:17,385
bên trong một khung vuông và sau đó gán nó cho một biểu thức ở phía bên phải.

107
00:08:17,385 --> 00:08:22,450
Các biểu thức này có thể là biểu thức JavaScript với một số hạn chế.

108
00:08:22,450 --> 00:08:25,600
Các ví dụ mà chúng ta thường thấy sẽ được

109
00:08:25,600 --> 00:08:30,960
sử dụng một thuộc tính từ một trong các lớp học ở đó.

110
00:08:30,960 --> 00:08:34,390
Vì vậy, đây là những gì chúng tôi gọi là một thuộc tính thuộc tính, và

111
00:08:34,390 --> 00:08:38,878
ví dụ mà bạn sẽ thấy trong bài tập đó là sau bài giảng này.

112
00:08:38,878 --> 00:08:44,333
Nơi bạn sẽ thấy việc sử dụng một món ăn, kèm theo bên trong một khung vuông,

113
00:08:44,333 --> 00:08:51,650
được tương đương với một SelectedDish, đó là một biến được khai báo bên trong một thành phần.

114
00:08:51,650 --> 00:08:56,770
Điều này cũng có thể được thể hiện bằng cách sử dụng một bind-target,

115
00:08:56,770 --> 00:08:58,680
một cách thể hiện cùng một điều.

116
00:08:58,680 --> 00:09:04,630
Vì vậy, cả hai này cho dù bạn kèm theo một mục tiêu trong dấu ngoặc vuông hoặc bind-target.

117
00:09:04,630 --> 00:09:07,550
Vì vậy, ví dụ, bạn có thể thấy bind-dish.

118
00:09:07,550 --> 00:09:11,820
Vì vậy, bất cứ cách nào bạn thể hiện điều này, cả hai đều đề cập đến cùng một điều.

119
00:09:11,820 --> 00:09:17,528
Vì vậy, thuộc tính thuộc tính được chỉ định hoặc Class Style được chỉ định.

120
00:09:17,528 --> 00:09:22,367
Bây giờ dòng chảy một chiều của thông tin từ mục tiêu xem đến

121
00:09:22,367 --> 00:09:27,401
nguồn dữ liệu thường được thể hiện với mục tiêu được bao bọc

122
00:09:27,401 --> 00:09:32,780
bên trong dấu ngoặc đơn ở đây hoặc cũng có thể được thể hiện dưới dạng on-target.

123
00:09:32,780 --> 00:09:36,610
Và ở phía bên tay phải sẽ là một tuyên bố.

124
00:09:36,610 --> 00:09:41,523
Một tuyên bố có thể là một loại biểu thức JavaScript thường

125
00:09:41,523 --> 00:09:46,532
sẽ được trong invocation của một phương thức bên trong một thành phần.

126
00:09:46,532 --> 00:09:51,668
Vâng, bạn sẽ thấy một ví dụ trong bài tập mà sau đó

127
00:09:51,668 --> 00:09:57,611
bạn sẽ có nhấp vào bên trong dấu ngoặc đơn và gán cho onSelect.

128
00:09:57,611 --> 00:10:02,700
Đó là một phương pháp được mô tả bên trong một

129
00:10:02,700 --> 00:10:10,540
lớp thành phần có với một món ăn tham số được cung cấp cho phương pháp này ở đó.

130
00:10:10,540 --> 00:10:15,920
Các liên kết dữ liệu hai chiều như chúng ta thấy sẽ được với squire và ngoặc đơn,

131
00:10:15,920 --> 00:10:21,320
squire dấu ngoặc đơn và dấu ngoặc đơn được tương đương với một biểu thức.

132
00:10:21,320 --> 00:10:26,380
Chúng ta sẽ thấy hai chiều dữ liệu ràng buộc như một tập hợp với các hình thức một chút sau đó, nơi

133
00:10:26,380 --> 00:10:31,843
bạn sẽ sử dụng một cái gì đó giống như một NGModel, kèm theo bên trong dấu ngoặc vuông và dấu ngo

134
00:10:31,843 --> 00:10:35,647
ặc đơn, tương đương với một cái gì đó giống như dish.name.

135
00:10:35,647 --> 00:10:40,438
Kết nối phần tử biểu mẫu với một thuộc tính của

136
00:10:40,438 --> 00:10:44,640
một đối tượng JavaScript, trong thành phần của chúng tôi.

137
00:10:46,260 --> 00:10:50,240
Bạn cũng có thể thể hiện điều này như bindon-target.

138
00:10:50,240 --> 00:10:52,401
Đó là một cách khác để nói cùng một điều.

139
00:10:52,401 --> 00:10:56,866
Bây giờ, sự ràng buộc dữ liệu hai chiều mà chúng ta làm đôi khi

140
00:10:56,866 --> 00:11:00,630
được gọi là một quả chuối trong một cái hộp.

141
00:11:00,630 --> 00:11:04,630
Vì vậy, nếu bạn nhìn vào dấu ngoặc vuông với dấu ngoặc bên trong nó,

142
00:11:04,630 --> 00:11:06,110
nó trông giống như một quả chuối trong một cái hộp.

143
00:11:06,110 --> 00:11:11,550
Vì vậy, bạn có thể thấy điều này được sử dụng Trong một

144
00:11:11,550 --> 00:11:14,580
số tài liệu hoặc trong một số blog mà bạn có thể đọc trên Internet.

145
00:11:15,970 --> 00:11:19,920
Mở rộng hơn nữa trên các mục tiêu ràng buộc mà chúng ta đã thấy,

146
00:11:19,920 --> 00:11:23,720
các mục tiêu ràng buộc là các thuộc tính được khai báo ở phía bên trái

147
00:11:23,720 --> 00:11:27,310
của khai báo ràng buộc của khai báo ràng buộc dữ liệu đó.

148
00:11:27,310 --> 00:11:33,280
Thông thường, kèm theo bên trong dấu ngoặc vuông hoặc bên trong dấu ngoặc đơn hoặc cả hai.

149
00:11:33,280 --> 00:11:40,850
Vì vậy, phía bên phải của biểu thức ràng buộc là nguồn ràng buộc của chúng,

150
00:11:40,850 --> 00:11:45,670
do đó, thường giống như các thuộc tính của một đối tượng JavaScript, hoặc

151
00:11:45,670 --> 00:11:51,930
một biến, hoặc một biểu thức mà chúng ta xác định ở phía bên tay phải.

152
00:11:51,930 --> 00:11:58,970
Nếu bạn xác định các thuộc tính đích gắn kết với lựa chọn của một cấu phần.

153
00:11:58,970 --> 00:12:03,140
Đó là một cách hoặc là đi qua thông tin vào một thành phần,

154
00:12:03,140 --> 00:12:07,320
hoặc gửi lại thông tin từ một thành phần đến một thành phần khác.

155
00:12:07,320 --> 00:12:12,490
Vì vậy, điều này tạo điều kiện giao tiếp giữa các thành phần.

156
00:12:12,490 --> 00:12:18,258
Vì vậy, bạn sẽ thấy việc sử dụng một decorator như @Input liên kết với

157
00:12:18,258 --> 00:12:24,442
một cách gửi thông tin từ một thành phần đến một thành phần khác.

158
00:12:24,442 --> 00:12:29,194
Chúng ta sẽ thấy một ví dụ về cách sử dụng này trong bài tập

159
00:12:29,194 --> 00:12:32,690
mà sau bài giảng này ở đây.

160
00:12:32,690 --> 00:12:37,600
Tương tự như vậy, bạn có thể sử dụng bộ trang trí Output để xác định một sự kiện

161
00:12:37,600 --> 00:12:42,070
từ một thành phần được truyền trở lại thành phần khác.

162
00:12:42,070 --> 00:12:49,472
Vì vậy, cả hai cách sử dụng này đều được sử dụng hiệu quả để giao tiếp giữa các thành phần.

163
00:12:49,472 --> 00:12:52,759
[ NHẠC]