1
00:00:03,609 --> 00:00:09,108
Bây giờ hãy để tôi cung cấp cho bạn một cái nhìn tổng quan ngắn gọn về các ứng dụng đơn trang.

2
00:00:09,108 --> 00:00:11,415
Ứng dụng một trang là gì?

3
00:00:11,415 --> 00:00:16,080
Chúng khác với các trang web mà bạn có thể đã phát triển trước đó như thế nào?

4
00:00:16,080 --> 00:00:21,405
Ví dụ, trang web mà bạn đã phát triển trong quá trình chuyên môn trước đó,

5
00:00:21,405 --> 00:00:26,854
nơi bạn có nhiều trang - tại sao các ứng dụng trang đơn thú vị

6
00:00:26,854 --> 00:00:29,300
và những gì bạn cần phải biết

7
00:00:29,300 --> 00:00:32,548
khi bạn đang thiết kế các ứng dụng đơn trang?

8
00:00:32,548 --> 00:00:37,606
Bài giảng này không có ý định là toàn bộ luận về Ứng dụng Trang đơn,

9
00:00:37,606 --> 00:00:40,159
nhưng thực sự, cung cấp cho bạn đủ giới thiệu

10
00:00:40,159 --> 00:00:44,375
để giúp bạn bắt đầu suy nghĩ về Ứng dụng Trang đơn,

11
00:00:44,375 --> 00:00:47,509
đặc biệt là trong bối cảnh của Angular.

12
00:00:47,509 --> 00:00:53,409
Trước khi chúng tôi hiểu ứng dụng một trang, chúng ta hãy lùi lại một bước

13
00:00:53,409 --> 00:00:56,335
và xem xét cách các trang web truyền thống hoạt động.

14
00:00:56,335 --> 00:00:59,695
Trong các trang web truyền thống, cho đến nay - nếu bạn truy cập vào một trang web,

15
00:00:59,695 --> 00:01:02,774
bạn có thể yêu cầu truy cập vào một trang cụ thể.

16
00:01:02,774 --> 00:01:06,691
Ví dụ, bạn sẽ yêu cầu một trang index.html

17
00:01:06,691 --> 00:01:10,600
khi bạn điều hướng đến trang web,

18
00:01:10,600 --> 00:01:12,879
bằng cách nhấp vào một liên kết

19
00:01:12,879 --> 00:01:19,855
hoặc bằng cách gõ địa chỉ của trang web vào thanh địa chỉ của trình duyệt của bạn.

20
00:01:19,855 --> 00:01:23,950
Vì vậy, thông thường, trang index.html là trang đầu tiên

21
00:01:23,950 --> 00:01:27,140
mà bạn lấy khi bạn truy cập một trang web.

22
00:01:27,140 --> 00:01:30,894
Và khi trang được tải xuống từ máy chủ sang trình duyệt của bạn -

23
00:01:30,894 --> 00:01:33,989
và sau đó điều này sẽ được hiển thị trong trình duyệt của bạn.

24
00:01:33,989 --> 00:01:39,109
Bây giờ điều này có thể bao gồm không chỉ trang index.html,

25
00:01:39,109 --> 00:01:44,224
mà còn các tài nguyên khác có thể cần phải được tải xuống để xây dựng trang index.html.

26
00:01:44,224 --> 00:01:49,239
Trong trường hợp này, trang index.html có thể yêu cầu các tài nguyên bổ sung,

27
00:01:49,239 --> 00:01:57,935
như hình ảnh hoặc dữ liệu, để được tải xuống trước khi trang chỉ mục có thể được xây dựng.

28
00:01:57,935 --> 00:02:02,980
Nhưng bây giờ, sau đó, nếu bạn điều hướng đến một trang khác trong trang web của bạn

29
00:02:02,980 --> 00:02:07,073
- ví dụ, một trang khác như contactus.html,

30
00:02:07,073 --> 00:02:14,259
điều này sẽ dẫn đến trình duyệt của bạn gửi một yêu cầu khác

31
00:02:14,259 --> 00:02:16,930
đến máy chủ để lấy trang thứ hai đó.

32
00:02:16,930 --> 00:02:19,960
Vì vậy, nó sẽ bắt đầu một yêu cầu toàn bộ máy chủ

33
00:02:19,960 --> 00:02:22,479
và tất cả các tài nguyên cần thiết để xây dựng

34
00:02:22,479 --> 00:02:27,560
trang thứ hai sẽ phải được tải xuống từ máy chủ.

35
00:02:27,560 --> 00:02:30,745
Vì vậy, khi bạn di chuyển từ trang này sang trang khác,

36
00:02:30,745 --> 00:02:34,819
nó sẽ liên quan đến tất cả các trang mới được tải từ máy chủ

37
00:02:34,819 --> 00:02:37,705
và điều này sẽ liên quan đến một thời gian chuyến đi vòng đến máy chủ

38
00:02:37,705 --> 00:02:42,099
để lấy tất cả các tài nguyên cần thiết để xây dựng các trang đó.

39
00:02:42,099 --> 00:02:45,025
Bây giờ hãy tưởng tượng rằng trang web của bạn có nhiều trang.

40
00:02:45,025 --> 00:02:48,310
Sau đó, rõ ràng, mỗi phần duy nhất mà

41
00:02:48,310 --> 00:02:54,025
trang web của bạn yêu cầu để kết xuất sẽ đòi hỏi một thời gian đi lại đầy đủ đến các máy chủ.

42
00:02:54,025 --> 00:02:58,685
Những gì bạn sẽ lưu ý là - thường là nhiều trong số những trang này có rất nhiều điểm chung.

43
00:02:58,685 --> 00:03:00,444
Có lẽ, ví dụ, đầu trang

44
00:03:00,444 --> 00:03:05,275
và chân trang và một số thông tin khác đều phổ biến trong tất cả các trang này.

45
00:03:05,275 --> 00:03:09,875
Tuy nhiên, mỗi yêu cầu trang mới sẽ yêu cầu bạn

46
00:03:09,875 --> 00:03:15,051
- để đi và lấy toàn bộ trang từ máy chủ.

47
00:03:15,051 --> 00:03:22,150
Bây giờ với việc sử dụng bộ nhớ đệm trên trang web trình duyệt, bạn có thể giảm thiểu một số vấn đề này

48
00:03:22,150 --> 00:03:28,740
bằng cách sử dụng lại các tài nguyên đã được lấy từ bộ nhớ cache của bạn; nhưng vẫn còn,

49
00:03:28,740 --> 00:03:33,189
mỗi trang mới mà bạn điều hướng đến sẽ yêu cầu toàn bộ một trang

50
00:03:33,189 --> 00:03:35,830
để được tải lại từ trang web máy chủ.

51
00:03:35,830 --> 00:03:40,240
Ứng dụng trang đơn tiếp cận vấn đề này theo một cách khác.

52
00:03:40,240 --> 00:03:44,289
Trong một ứng dụng trang đơn, thông thường chúng tôi đã phát triển một ứng dụng web

53
00:03:44,289 --> 00:03:49,955
để khi trình duyệt điều hướng đến trang web,

54
00:03:49,955 --> 00:03:55,384
sau đó điều này sẽ yêu cầu ứng dụng web được tải xuống từ trang web máy chủ.

55
00:03:55,384 --> 00:03:59,472
Vì vậy, điều này sẽ được, ví dụ, chứa trong một trang chủ như index.html

56
00:03:59,472 --> 00:04:02,860
, nó sẽ kích hoạt toàn bộ các tài sản

57
00:04:02,860 --> 00:04:09,553
được yêu cầu để hiển thị ứng dụng web của bạn để được tải xuống trang web khách hàng của bạn.

58
00:04:09,553 --> 00:04:14,199
Bây giờ làm thế nào các tài sản này được đóng gói phụ thuộc vào cách bạn thiết kế ứng dụng web của bạn

59
00:04:14,199 --> 00:04:18,439
và cũng là những gì framework bạn sử dụng để thiết kế ứng dụng web của bạn.

60
00:04:18,439 --> 00:04:26,805
Tuy nhiên, bạn có một tải xuống lớn duy nhất khi bắt đầu ứng dụng web của bạn.

61
00:04:26,805 --> 00:04:32,020
Những thay đổi tiếp theo cho trang web khách hàng, ví dụ, bắt đầu bằng một cú nhấp chuột vào một liên kết,

62
00:04:32,020 --> 00:04:36,160
sẽ bắt đầu một yêu cầu mới đến trang web máy chủ; nhưng trong trường hợp này

63
00:04:36,160 --> 00:04:42,550
, rất thường xuyên, bạn chỉ tải về một số dữ liệu, có lẽ dưới dạng dữ liệu JSON,

64
00:04:42,550 --> 00:04:45,745
từ trang web máy chủ.

65
00:04:45,745 --> 00:04:52,060
Vì vậy, trong trường hợp này, mỗi người trong số này có thể chỉ yêu cầu truy cập vào máy chủ

66
00:04:52,060 --> 00:04:54,839
chỉ để tải dữ liệu JSON, ví dụ,

67
00:04:54,839 --> 00:05:00,009
sau đó có thể cho phép bạn hoàn toàn hiển thị chế độ xem mới

68
00:05:00,009 --> 00:05:03,240
trong ứng dụng đơn trang của bạn.

69
00:05:03,240 --> 00:05:07,329
Vì vậy, việc tải xuống trang ban đầu, tải xuống ứng dụng ban đầu, tất nhiên,

70
00:05:07,329 --> 00:05:11,218
luôn ở đó, nhưng hầu hết các tương tác tiếp theo với máy chủ

71
00:05:11,218 --> 00:05:17,050
sẽ chỉ đơn giản là để tải xuống dữ liệu, thường ở dạng JSON hoặc XML,

72
00:05:17,050 --> 00:05:20,930
tùy thuộc vào cách bạn thiết kế định dạng dữ liệu của bạn.

73
00:05:20,930 --> 00:05:22,720
Và một khi dữ liệu được tải xuống,

74
00:05:22,720 --> 00:05:27,865
những dữ liệu đó sau đó có thể được sử dụng để hiển thị chế độ xem mới trong ứng dụng của bạn.

75
00:05:27,865 --> 00:05:29,259
Vì vậy, trong những trường hợp này,

76
00:05:29,259 --> 00:05:33,870
bạn sẽ tiết kiệm rất nhiều thời gian chuyến đi vòng đến máy chủ để tải xuống rất nhiều tài sản.

77
00:05:33,870 --> 00:05:38,680
Tất nhiên, tải trang ban đầu đòi hỏi một số lượng công việc phải được thực hiện,

78
00:05:38,680 --> 00:05:44,394
nhưng các yêu cầu tiếp theo có thể dành cho một lượng dữ liệu rất nhỏ.

79
00:05:44,394 --> 00:05:52,037
Và đó, thực sự, là tính năng quan trọng của các ứng dụng trang đơn.

80
00:05:52,037 --> 00:05:58,310
Bây giờ với việc hiển thị trước một số lượt xem của họ trên chính trang web máy chủ,

81
00:05:58,310 --> 00:06:05,925
bạn thậm chí có thể giảm thiểu một số thời gian tải xuống ban đầu cho ứng dụng web của bạn.

82
00:06:05,925 --> 00:06:07,730
Vì vậy, ngay cả Angular, ví dụ, cho

83
00:06:07,730 --> 00:06:13,853
phép bạn hiển thị trước một phần của chế độ xem đầu tiên của bạn trên trang web máy chủ

84
00:06:13,853 --> 00:06:20,783
để cho phép hiển thị thông tin cho khách hàng một cách nhanh chóng,

85
00:06:20,783 --> 00:06:26,995
trong khi phần còn lại của ứng dụng web đang được trình duyệt của bạn tải xuống.

86
00:06:26,995 --> 00:06:31,314
Vì vậy, chúng tôi có thể tóm tắt rằng Ứng dụng Trang đơn

87
00:06:31,314 --> 00:06:35,060
như một ứng dụng web trên một trang web phù hợp với một trang duy nhất - một lần nữa,

88
00:06:35,060 --> 00:06:40,805
cho hoặc mất - bạn - bạn biết đấy, không giải thích nó quá theo nghĩa đen.

89
00:06:40,805 --> 00:06:44,389
Vì vậy, bạn không cần phải tải lại toàn bộ trang một lần nữa.

90
00:06:44,389 --> 00:06:49,620
Vì vậy, đó là tính năng quan trọng của một ứng dụng trang đơn.

91
00:06:49,620 --> 00:06:54,139
Ngoài ra, Ứng dụng một trang cho phép bạn cung cấp trải nghiệm người dùng

92
00:06:54,139 --> 00:06:59,435
gần hơn với công việc mà họ nhìn thấy với các ứng dụng trên máy tính. Sau

93
00:06:59,435 --> 00:07:02,930
khi ứng dụng web ban đầu được tải xuống; sau đó,

94
00:07:02,930 --> 00:07:11,475
hầu hết các tương tác khác có vẻ như bạn đang tương tác với một ứng dụng máy tính để bàn.

95
00:07:11,475 --> 00:07:15,959
Vì vậy, để tóm tắt những gì chúng ta vừa học được, một ứng dụng đơn trang là gì?

96
00:07:15,959 --> 00:07:21,069
Một ứng dụng trang đơn là một ứng dụng web hoặc một trang web phù hợp với một trang duy nhất.

97
00:07:21,069 --> 00:07:26,670
Bạn không cần phải tải lại toàn bộ trang mỗi khi người dùng tương tác

98
00:07:26,670 --> 00:07:28,362
với ứng dụng.

99
00:07:28,362 --> 00:07:34,574
UX giống như một máy tính để bàn hoặc một ứng dụng gốc.

100
00:07:34,574 --> 00:07:37,199
Hầu hết các tài nguyên cần thiết cho ứng dụng của bạn

101
00:07:37,199 --> 00:07:42,699
được tải xuống tại phiên bản đầu tiên chính nó, với tải trang đầu tiên.

102
00:07:42,699 --> 00:07:45,720
Sau đó, chỉ các phần của trang được vẽ lại,

103
00:07:45,720 --> 00:07:53,540
dựa trên cách tương tác người dùng xảy ra mà không yêu cầu một chuyến đi khứ hồi máy chủ đầy đủ,

104
00:07:53,540 --> 00:07:58,889
để lấy tất cả các tài nguyên mà bạn cần.

105
00:07:58,889 --> 00:08:04,644
Tất nhiên, điều này không đến mà không có tập hợp riêng của nó các vấn đề cần phải được giải quyết.

106
00:08:04,644 --> 00:08:07,740
Vì vậy, khi bạn thiết kế các ứng dụng một trang, một trong những điều đầu tiên

107
00:08:07,740 --> 00:08:11,609
mà mọi người thường đặt câu hỏi về ứng dụng một trang

108
00:08:11,609 --> 00:08:14,444
là chúng không được tối ưu hóa cho các công cụ tìm kiếm.

109
00:08:14,444 --> 00:08:19,225
Vì vậy, tối ưu hóa công cụ tìm kiếm là một phần quan trọng cần được giải quyết.

110
00:08:19,225 --> 00:08:20,579
Vì vậy, nếu bạn có công cụ tìm kiếm

111
00:08:20,579 --> 00:08:24,795
thu thập dữ liệu trang web của bạn để trích xuất dữ liệu và chỉ mục thông tin,

112
00:08:24,795 --> 00:08:28,889
thì Ứng dụng một trang có thể không nhất thiết phải hợp tác trong trường hợp này.

113
00:08:28,889 --> 00:08:33,230
Nhưng ngay cả tối ưu hóa công cụ tìm kiếm với các khung dữ liệu hiện tại,

114
00:08:33,230 --> 00:08:40,680
như Angular, đã đi xa xuống con đường mà ngay cả với Ứng dụng Trang đơn, các

115
00:08:40,680 --> 00:08:47,940
công cụ tìm kiếm về cơ bản có thể

116
00:08:47,940 --> 00:08:50,621
lập chỉ mục rất nhiều thông tin mà ứng dụng web của bạn phục vụ.

117
00:08:50,621 --> 00:08:59,009
Vấn đề thứ hai cần giải quyết là bao nhiêu cấu trúc web nên được offloaded

118
00:08:59,009 --> 00:09:02,750
vào trang web khách hàng như trái ngược với trang web máy chủ.

119
00:09:02,750 --> 00:09:07,500
Vì vậy, các máy chủ là khá nhiều hoạt động như một nguồn dữ liệu trong ứng dụng trang đơn

120
00:09:07,500 --> 00:09:10,644
và phần lớn công việc được offloaded vào các trang web khách hàng.

121
00:09:10,644 --> 00:09:11,840
Từ một quan điểm,

122
00:09:11,840 --> 00:09:18,782
điều này cung cấp cho bạn nhiều cách mở rộng hơn

123
00:09:18,782 --> 00:09:24,037
để cung cấp ứng dụng web của bạn cho trang web khách hàng của bạn, bởi vì phần lớn công việc kết xuất được thực hiện trên trang web khách hàng.

124
00:09:24,037 --> 00:09:31,649
Bây giờ bạn có thể tối ưu hóa điều này ở một mức độ nào đó để bù đắp tải xuống ban

125
00:09:31,649 --> 00:09:34,399
đầu của ứng dụng web từ trang web máy chủ

126
00:09:34,399 --> 00:09:37,034
bằng cách thực hiện một phần của kết xuất trên trang web máy chủ.

127
00:09:37,034 --> 00:09:40,559
Như tôi đã đề cập, Angular cung cấp

128
00:09:40,559 --> 00:09:45,120
cho bạn một cơ hội để làm điều đó với một phần trang web máy chủ render

129
00:09:45,120 --> 00:09:48,889
của cái nhìn ban đầu của bạn về ứng dụng của bạn.

130
00:09:48,889 --> 00:09:53,460
Khía cạnh thứ ba là làm thế nào để duy trì lịch sử để khi bạn nhấp vào một nút trở lại

131
00:09:53,460 --> 00:09:56,789
hoặc một nút chuyển tiếp, bạn sẽ đưa người dùng đến đâu?

132
00:09:56,789 --> 00:09:59,759
Bạn có lưu đủ thông tin

133
00:09:59,759 --> 00:10:06,083
mà bạn sẽ có thể điều hướng trong số các chế độ xem khác nhau của ứng dụng của bạn và vân vân?

134
00:10:06,083 --> 00:10:08,985
Vì vậy, đó là một điều mà bạn cần lưu ý.

135
00:10:08,985 --> 00:10:16,975
Tất nhiên, bởi vì bộ định tuyến Angular tận dụng API lịch sử năm trang html,

136
00:10:16,975 --> 00:10:21,649
vì vậy nó có thể giải quyết vấn đề này ở mức độ lớn.

137
00:10:21,649 --> 00:10:25,139
Câu hỏi cuối cùng mà chúng ta có là phân tích.

138
00:10:25,139 --> 00:10:29,804
Làm thế nào để bạn hỗ trợ phân tích trên trang web của bạn?

139
00:10:29,804 --> 00:10:33,850
Làm thế nào để bạn thu thập dữ liệu phân tích và vân vân?

140
00:10:33,850 --> 00:10:39,235
Và cũng có thể, như tôi đã đề cập trước đó, tăng tốc tải trang ban đầu

141
00:10:39,235 --> 00:10:44,924
là một cái gì đó đáng quan tâm khi bạn đang thiết kế ứng dụng web của bạn.

142
00:10:44,924 --> 00:10:46,764
Bây giờ với Angular, như tôi đã nói,

143
00:10:46,764 --> 00:10:52,449
thực hiện một phần render ở phía máy chủ sẽ tăng tốc độ tải trang ban đầu

144
00:10:52,449 --> 00:10:57,610
trên trang khách hàng của bạn trong khi phần còn lại của ứng dụng web

145
00:10:57,610 --> 00:11:00,735
đang được tải xuống trang khách hàng.

146
00:11:00,735 --> 00:11:07,120
Vì vậy, bạn có thể che dấu một chút thời gian tải xuống ban đầu cho các ứng dụng web

147
00:11:07,120 --> 00:11:10,730
bằng cách thực hiện một phần render từ chính trang web của máy chủ.

148
00:11:10,730 --> 00:11:13,701
Với những ý tưởng cơ bản này trong tâm trí,

149
00:11:13,701 --> 00:11:19,120
bây giờ chúng ta hãy đi và khám phá cách Angular hỗ trợ Ứng dụng Trang đơn.

150
00:11:19,120 --> 00:11:22,450
Chúng tôi đã kết hợp bộ định tuyến Angular

151
00:11:22,450 --> 00:11:25,375
vào ứng dụng Angular của chúng tôi trong bài tập trước đó.

152
00:11:25,375 --> 00:11:28,879
Trong các bài tập tiếp theo trong bài học

153
00:11:28,879 --> 00:11:34,315
và bài tập này, chúng tôi sẽ hoàn thành

154
00:11:34,315 --> 00:11:41,139
việc phát triển Ứng dụng Một trang mà chúng tôi đã thực hiện cho đến nay trong khóa học này.