1
00:00:00,000 --> 00:00:08,745
Bây giờ chúng ta có một sự hiểu biết về các ứng dụng đơn trang,

2
00:00:08,745 --> 00:00:10,660
chúng tôi sẽ tiếp tục làm việc trên

3
00:00:10,660 --> 00:00:14,490
ứng dụng góc cạnh của chúng tôi mà chúng tôi đã làm việc trong các bài tập cho

4
00:00:14,490 --> 00:00:16,980
đến nay và phát triển nó thành

5
00:00:16,980 --> 00:00:21,535
ứng dụng đơn trang bằng cách sử dụng sự hỗ trợ của mô-đun bộ định tuyến góc cạnh.

6
00:00:21,535 --> 00:00:25,110
Chúng tôi đã bao gồm nhiều thành phần như là một phần của

7
00:00:25,110 --> 00:00:28,770
ứng dụng góc của chúng tôi trong bài tập trước đó và chúng tôi đã

8
00:00:28,770 --> 00:00:32,625
cấu hình cho ứng dụng góc của chúng tôi để có thể định tuyến

9
00:00:32,625 --> 00:00:37,410
giữa hai thành phần khác nhau.

10
00:00:37,410 --> 00:00:40,970
Bây giờ, chúng tôi sẽ tích hợp nhiều hơn vào ứng dụng góc cạnh của chúng tôi và

11
00:00:40,970 --> 00:00:44,960
phát triển nó vào ứng dụng góc cạnh đầy đủ cùng với

12
00:00:44,960 --> 00:00:49,040
điều hướng trong số các quan điểm khác nhau được thực

13
00:00:49,040 --> 00:00:53,790
hiện bởi các thành phần khác nhau của ứng dụng của chúng tôi.

14
00:00:53,800 --> 00:00:58,275
Tiếp tục với ứng dụng của chúng tôi như nó đứng bây giờ,

15
00:00:58,275 --> 00:01:05,990
chúng tôi có nhà được render khi bạn điều hướng đến ứng dụng của chúng tôi

16
00:01:05,990 --> 00:01:09,740
ngay bây giờ và sau đó mẫu Home

17
00:01:09,740 --> 00:01:13,740
đã được hiển thị giữa tiêu đề và chân trang và sau đó khi bạn đi đến Menu,

18
00:01:13,740 --> 00:01:19,920
menu đang được hiển thị giữa tiêu đề và chân trang trong chế độ xem ở đây.

19
00:01:19,920 --> 00:01:25,490
Bây giờ, rõ ràng, chúng ta cần tích hợp các thành phần khác mà chúng tôi

20
00:01:25,490 --> 00:01:28,700
đưa vào ứng dụng góc cạnh của chúng tôi

21
00:01:28,700 --> 00:01:32,715
để phát triển nó như là một ứng dụng góc cạnh chính thức.

22
00:01:32,715 --> 00:01:36,135
Trong bài tập này, chúng tôi sẽ tích hợp ContactComponent,

23
00:01:36,135 --> 00:01:38,914
chúng tôi sẽ cập nhật mẫu cho ContactComponent,

24
00:01:38,914 --> 00:01:43,190
chúng tôi cũng sẽ cập nhật mẫu cho HomeComponent và thực hiện

25
00:01:43,190 --> 00:01:48,600
một bước tiến tới ứng dụng góc một trang của chúng tôi.

26
00:01:48,600 --> 00:01:52,585
Hãy bắt đầu với ContactComponent.

27
00:01:52,585 --> 00:01:56,630
Để bắt đầu, trước tiên hãy sao chép mẫu cho

28
00:01:56,630 --> 00:02:01,070
ContactComponent mà tôi đã cung cấp cho bạn trong hướng dẫn tập thể dục và sau đó

29
00:02:01,070 --> 00:02:06,660
dán nó vào tệp contactcomponent.html để chúng tôi sẽ tuôn

30
00:02:06,660 --> 00:02:13,580
ra xem thực tế của ContactComponent của chúng tôi trong một chút chi tiết hơn ở đây.

31
00:02:13,580 --> 00:02:18,680
Bây giờ, bạn có thể thấy rằng tôi đã cắt và dán mã cho các

32
00:02:18,680 --> 00:02:24,550
tập tin mẫu từ các hướng dẫn vào ContactComponent của tôi.

33
00:02:24,550 --> 00:02:27,650
Chúng tôi sẽ hoàn thành việc tích hợp

34
00:02:27,650 --> 00:02:30,665
ContactComponent trong ứng dụng của chúng tôi và sau đó chúng tôi sẽ xem xét

35
00:02:30,665 --> 00:02:33,590
những gì ContactComponent trông như thế nào và sau đó trở lại

36
00:02:33,590 --> 00:02:36,940
và nhanh chóng nhìn vào mã này một chút sau đó.

37
00:02:36,940 --> 00:02:41,660
Bây giờ, để tích hợp ContactComponent vào ứng dụng góc cạnh của chúng

38
00:02:41,660 --> 00:02:46,910
tôi, chúng ta cần phải bao gồm một đường dẫn đến ContactComponent vào các tuyến đường của chúng tôi.

39
00:02:46,910 --> 00:02:52,270
Vì vậy, đi đến các tập tin routes.s ngay sau khi Menu,

40
00:02:52,270 --> 00:03:01,520
tôi sẽ bao gồm một đường dẫn khác cho ContactComponent tôi sẽ sử dụng

41
00:03:01,520 --> 00:03:05,480
URL như liên hệ với chúng tôi và

42
00:03:05,480 --> 00:03:15,375
các thành phần tương ứng là ContactComponent ở đây.

43
00:03:15,375 --> 00:03:19,815
Vì vậy, với điều này, chúng tôi đã tích hợp ContactComponent của

44
00:03:19,815 --> 00:03:24,725
chúng tôi vào ứng dụng của chúng tôi và chúng ta hãy lưu những thay đổi

45
00:03:24,725 --> 00:03:30,935
này và sau đó chúng tôi cũng sẽ cần phải cập nhật các thành phần tiêu đề và cập nhật

46
00:03:30,935 --> 00:03:37,540
một liên kết trong thành phần tiêu đề để giúp chúng tôi điều hướng đến ContactComponent.

47
00:03:37,540 --> 00:03:43,680
Vì vậy, tôi chỉ sẽ sao chép điều này từ menu một liên kết trong

48
00:03:43,680 --> 00:03:48,710
thanh công cụ của thành phần tiêu đề của tôi ở đó và sau đó sao chép rằng vào

49
00:03:48,710 --> 00:03:53,960
ContactComponent và sau đó cập nhật nó như liên hệ với chúng tôi.

50
00:03:53,960 --> 00:03:57,680
Hãy lưu các thay đổi cho tất cả các tệp và

51
00:03:57,680 --> 00:04:02,469
sau đó xem ứng dụng kết quả.

52
00:04:02,469 --> 00:04:05,725
Đi đến ứng dụng trong trình duyệt của chúng tôi,

53
00:04:05,725 --> 00:04:08,570
nếu bây giờ chúng ta điều hướng đến ContactComponent,

54
00:04:08,570 --> 00:04:12,680
chúng ta có thể thấy rằng các chi tiết của ContactComponent được hiển thị

55
00:04:12,680 --> 00:04:16,790
ở đây giữa đầu trang và chân trang như chúng ta mong đợi.

56
00:04:16,790 --> 00:04:18,590
Vì vậy, bên trong ContactComponent,

57
00:04:18,590 --> 00:04:22,370
chúng tôi có tiêu đề Liên hệ với chúng tôi

58
00:04:22,370 --> 00:04:26,390
ở đó và sau đó một số thông tin vị trí mà tôi đã hiển thị địa chỉ.

59
00:04:26,390 --> 00:04:28,490
Vì vậy, điều này là tương tự như địa chỉ mà chúng tôi

60
00:04:28,490 --> 00:04:30,740
có trong chân trang vì vậy tôi sẽ không giải thích rằng

61
00:04:30,740 --> 00:04:36,050
chi tiết sau đó chúng tôi có một phần khác ở đây, nơi chúng tôi bao gồm bản đồ của vị trí của chúng tôi.

62
00:04:36,050 --> 00:04:37,490
Chúng tôi sẽ không làm điều đó vào lúc này,

63
00:04:37,490 --> 00:04:41,990
chúng tôi sẽ chỉ để nó trống và sau đó bạn cũng thấy rằng tôi có

64
00:04:41,990 --> 00:04:48,150
ba nút mà tôi đã bao gồm ở đây cho cuộc gọi, Skype, và Email.

65
00:04:48,150 --> 00:04:52,354
Ba nút này được kích hoạt trong ứng dụng của chúng

66
00:04:52,354 --> 00:04:57,910
tôi và tôi đang sử dụng nút mat nâng lên để hiển thị ba nút này.

67
00:04:57,910 --> 00:05:00,980
Vì vậy, bạn có thể thấy rằng các nút này trông khác

68
00:05:00,980 --> 00:05:05,080
với các nút khác mà bạn đã bao gồm trong ứng dụng của bạn ở đó.

69
00:05:05,080 --> 00:05:10,870
Vì vậy, đây là một thành phần nút nâng lên từ vật liệu góc cạnh của chúng tôi ở đó.

70
00:05:10,870 --> 00:05:14,195
Vì vậy, khi nhìn thấy ContactComponent và

71
00:05:14,195 --> 00:05:17,675
thực tế là chúng tôi có thể điều hướng đến ContactComponent.

72
00:05:17,675 --> 00:05:20,560
Bây giờ, từ các thành phần khác, chúng

73
00:05:20,560 --> 00:05:22,730
ta hãy xem nhanh

74
00:05:22,730 --> 00:05:29,250
mã HTML mà chúng tôi bao gồm cho mẫu cho ContactComponent của chúng tôi.

75
00:05:29,250 --> 00:05:33,335
Đi đến contactcomponent.html, bạn sẽ thấy rằng chúng ta có

76
00:05:33,335 --> 00:05:38,720
tiêu đề cho trang này bao gồm bằng cách sử dụng div này

77
00:05:38,720 --> 00:05:42,965
ở đây và div thứ hai bên trong đây với FXFlex

78
00:05:42,965 --> 00:05:48,020
bao gồm các thông tin vị trí và sau đó điều này bên trong thông tin vị trí này,

79
00:05:48,020 --> 00:05:51,260
Tôi một lần nữa xác định một div mà sẽ cho phép tôi để

80
00:05:51,260 --> 00:05:55,480
bao gồm nhiều lượt xem vào div khác này ở đây.

81
00:05:55,480 --> 00:05:57,290
Vì vậy, bên trong này, tôi xác định

82
00:05:57,290 --> 00:06:00,410
một div với hiệu ứng bố trí cột và hiệu ứng lớp hàng.

83
00:06:00,410 --> 00:06:09,675
Vì vậy, đây là cách lồng nhau để xác định xem CSS Flex của tôi ở đây.

84
00:06:09,675 --> 00:06:11,270
Vì vậy, bên trong này một lần nữa,

85
00:06:11,270 --> 00:06:14,990
tôi đang sử dụng một cái nhìn div Flex với FXFlex 50 vì vậy nó

86
00:06:14,990 --> 00:06:18,900
chiếm một nửa và sau đó FXFlex bù đắp 20 pixel.

87
00:06:18,900 --> 00:06:26,300
Vì vậy, xem CSS này sẽ được di dời sang bên phải bởi 20 pixel vì vậy tôi

88
00:06:26,300 --> 00:06:29,300
có một số lề có và sau đó chúng tôi có

89
00:06:29,300 --> 00:06:33,800
địa chỉ bao gồm ở đây và sau đó xuống dưới đây,

90
00:06:33,800 --> 00:06:36,080
bạn có thể thấy rằng bên trong div khác,

91
00:06:36,080 --> 00:06:42,690
Tôi có một thẻ với mat nâng nút liên kết với nó.

92
00:06:42,690 --> 00:06:45,740
Đây là nguyên nhân gây ra các nút được nâng lên mà chúng tôi

93
00:06:45,740 --> 00:06:49,140
có ở dưới cùng của trang Liên hệ ở đó.

94
00:06:49,140 --> 00:06:51,050
Vậy là, ba người trong số họ ở đây.

95
00:06:51,050 --> 00:06:52,730
Một cho số điện thoại.

96
00:06:52,730 --> 00:07:00,425
Một cho Skype và một cho email ở đây và cũng lưu ý rằng tôi đang sử dụng

97
00:07:00,425 --> 00:07:04,010
các biểu tượng Font Awesome cho mỗi người trong số họ và sau đó là bản

98
00:07:04,010 --> 00:07:08,350
đồ vị trí của bạn trong div khác đây.

99
00:07:08,350 --> 00:07:13,690
Vì vậy, cả hai này kèm theo bên trong div bên ngoài này được kèm theo một lần nữa bên trong div.

100
00:07:13,690 --> 00:07:20,555
Vì vậy, cách lồng nhau để xác định các bố cục flex cho các bộ phận khác nhau của chúng tôi ở đây.

101
00:07:20,555 --> 00:07:23,465
Vì vậy, đó là về nó cho ContactComponent.

102
00:07:23,465 --> 00:07:29,329
Chúng tôi đã tích hợp nó vào ứng dụng đơn trang của chúng tôi.

103
00:07:29,329 --> 00:07:32,445
Bây giờ, đi đến DishService.

104
00:07:32,445 --> 00:07:36,440
Bây giờ, trong DishService cùng với phương pháp GetDishes,

105
00:07:36,440 --> 00:07:39,005
tôi sẽ giới thiệu hai phương pháp nữa.

106
00:07:39,005 --> 00:07:42,350
Một phương pháp gọi là GetDish,

107
00:07:42,350 --> 00:07:50,950
một món ăn cụ thể và sau đó tôi sẽ xác định món ăn với một id được chỉ định ở đây.

108
00:07:50,950 --> 00:07:52,460
Vì vậy, id sẽ

109
00:07:52,460 --> 00:08:01,885
được và đó sẽ chỉ định cho tôi các món ăn với id tương ứng với số này.

110
00:08:01,885 --> 00:08:04,640
Vì vậy, đó sẽ là một phương pháp nữa mà tôi sẽ thêm

111
00:08:04,640 --> 00:08:09,870
vào và cũng có thể thêm vào một phương pháp gọi là getFeaturedDish.

112
00:08:13,750 --> 00:08:17,495
Vì vậy, món ăn đặc trưng này sẽ sử dụng

113
00:08:17,495 --> 00:08:22,460
thuộc tính đặc trưng mà chúng tôi thêm vào

114
00:08:22,460 --> 00:08:27,995
và sau đó trả lại món ăn mà tính năng được thiết lập thành true.

115
00:08:27,995 --> 00:08:33,330
Vì vậy, đó là cách bạn có thể chọn ra một món ăn cụ thể và sau đó làm cho nó có sẵn.

116
00:08:33,330 --> 00:08:37,970
Bây giờ, lý do tại sao tôi có cờ đặc trưng là khi tính năng được thiết lập thành true,

117
00:08:37,970 --> 00:08:41,680
món ăn đặc biệt đó sẽ được hiển thị trên HomeComponent.

118
00:08:41,680 --> 00:08:44,455
Bây giờ, làm thế nào để chúng ta chọn những món ăn này?

119
00:08:44,455 --> 00:08:47,185
Vì vậy, chúng ta hãy thêm vào mã cho điều này.

120
00:08:47,185 --> 00:08:49,050
Vì vậy, đối với GetDish,

121
00:08:49,050 --> 00:08:57,650
tôi cần phải trả lại một cái gì đó từ các món ăn hằng số mà tôi đã có ở đó.

122
00:08:57,650 --> 00:08:59,600
Vì vậy, từ các món ăn hằng số,

123
00:08:59,600 --> 00:09:05,525
tôi sẽ sử dụng cách của JavaScript để làm lọc một mảng.

124
00:09:05,525 --> 00:09:09,470
Vì vậy, việc lọc một mảng sẽ giúp tôi chọn

125
00:09:09,470 --> 00:09:13,565
ra chỉ những phần tử từ mảng

126
00:09:13,565 --> 00:09:16,985
phù hợp với một tiêu chí cụ thể sẽ được xác định

127
00:09:16,985 --> 00:09:21,530
bên trong bộ lọc ở đây và sau đó trong số đó tôi sẽ chỉ trả về một trong những đầu tiên.

128
00:09:21,530 --> 00:09:25,050
Bây giờ, nó sẽ xảy ra rằng khi tôi chỉ định một id,

129
00:09:25,050 --> 00:09:28,960
nó sẽ chọn chỉ có một mục nhưng sau đó sẽ trở thành một mảng.

130
00:09:28,960 --> 00:09:33,150
Vì vậy, từ mảng đó, tôi cần phải trích xuất ra rằng một phần tử trong mảng đó.

131
00:09:33,150 --> 00:09:37,320
Vì vậy, đó là lý do tại sao tôi đang sử dụng trong niềng răng zero ở đó.

132
00:09:37,320 --> 00:09:41,010
Vì vậy, điều đó sẽ giúp tôi xác định.

133
00:09:41,010 --> 00:09:43,005
Vì vậy, làm thế nào để lọc các món ăn của tôi?

134
00:09:43,005 --> 00:09:47,140
Vì vậy, đối với mỗi món ăn trong danh sách các món ăn của tôi,

135
00:09:47,140 --> 00:09:49,729
vì vậy đây là nơi tôi sẽ sử dụng

136
00:09:49,729 --> 00:09:55,610
một tính năng khác của typescript gọi là các chức năng mũi tên.

137
00:09:55,610 --> 00:10:01,575
Hàm mũi tên là một cách viết tắt để viết một hàm.

138
00:10:01,575 --> 00:10:04,090
Vì vậy, nếu bạn đang sử dụng để viết các chức năng,

139
00:10:04,090 --> 00:10:06,100
thay vì viết các chức năng công phu nói

140
00:10:06,100 --> 00:10:09,850
chức năng và sau đó trong dấu ngoặc món ăn và như vậy,

141
00:10:09,850 --> 00:10:13,900
tôi chỉ có thể viết nó trong trường hợp chức năng là rất đơn giản,

142
00:10:13,900 --> 00:10:17,195
nó rất dễ dàng để viết này như là một chức năng mũi tên ở đây.

143
00:10:17,195 --> 00:10:27,305
Vì vậy, những

144
00:10:27,305 --> 00:10:33,245
gì tôi chỉ định ở đây là lọc mảng món ăn và trích xuất ra

145
00:10:33,245 --> 00:10:40,360
chỉ những

146
00:10:40,360 --> 00:10:44,570
mục từ mảng mà id món ăn đó.

147
00:10:44,570 --> 00:10:47,090
Vì vậy, mà id món ăn phù hợp với

148
00:10:47,090 --> 00:10:50,360
id đã được cung cấp như là một tham số cho món ăn.

149
00:10:50,360 --> 00:10:53,810
Vì vậy, bằng cách này bạn sẽ trích xuất ra món ăn cụ thể từ

150
00:10:53,810 --> 00:10:59,400
mảng này và sau đó trả lại món ăn đó từ phương pháp GetDish này.

151
00:10:59,710 --> 00:11:04,240
Các chức năng mũi tên đã giúp tôi viết mã một cách đơn giản hơn.

152
00:11:04,240 --> 00:11:06,724
Nếu bạn không thích

153
00:11:06,724 --> 00:11:09,710
các chức năng mũi tên sau đó bạn có thể viết nó theo cách thông thường hơn bằng cách nói,

154
00:11:09,710 --> 00:11:16,870
“món ăn hàm”, và sau đó từ này bạn sẽ trả về dish.id triple bằng id,

155
00:11:16,870 --> 00:11:19,005
vì vậy điều này sẽ trả về một Boolean.

156
00:11:19,005 --> 00:11:22,960
Khi bộ lọc gặp một sự thật bên trong ở đây,

157
00:11:22,960 --> 00:11:27,115
những yếu tố từ các món ăn sẽ được chọn ra vào mảng.

158
00:11:27,115 --> 00:11:31,980
Vì vậy, đây là nơi mà kiến thức JavaScript của bạn có lợi thế của bạn.

159
00:11:31,980 --> 00:11:34,060
Vì vậy, bạn cần phải biết làm thế nào một bộ lọc JavaScript

160
00:11:34,060 --> 00:11:38,085
hoạt động để giúp bạn hiểu làm thế nào điều này được thực hiện.

161
00:11:38,085 --> 00:11:41,390
Được rồi, bây giờ tương tự cho các món ăn đặc trưng,

162
00:11:41,390 --> 00:11:47,365
tôi sẽ sử dụng một phương pháp tương tự để trích xuất từ

163
00:11:47,365 --> 00:11:51,620
mảng món ăn của tôi bằng cách sử dụng một bộ lọc ở đây nhưng bộ lọc mà

164
00:11:51,620 --> 00:11:57,000
tôi sẽ xác định ở đây sẽ là một lần nữa một chức năng mũi tên ở đây.

165
00:11:58,410 --> 00:12:03,260
Bạn sẽ quen với các chức năng mũi tên và sau đó một khi bạn đã quen với chúng,

166
00:12:03,260 --> 00:12:06,370
sau đó bạn sẽ nhận ra cách đơn giản chúng là quá đúng.

167
00:12:06,370 --> 00:12:11,380
Vì vậy, ở đây cách để lựa chọn tôi

168
00:12:11,380 --> 00:12:20,445
là dish.featured tài sản vì dish.feature này đã là một Boolean có.

169
00:12:20,445 --> 00:12:25,720
Vì vậy, điều đó sẽ giúp tôi trả lại món ăn đặc trưng.

170
00:12:25,720 --> 00:12:27,355
Vì vậy, đối với bất cứ món ăn nào,

171
00:12:27,355 --> 00:12:29,120
tính năng món ăn là đúng.

172
00:12:29,120 --> 00:12:31,710
Món ăn đặc biệt đó sẽ được lọc

173
00:12:31,710 --> 00:12:35,330
ra khỏi mảng đĩa và sau đó sẽ chỉ có một ngày.

174
00:12:35,330 --> 00:12:38,280
Dù sao, bạn nên chắc chắn rằng để

175
00:12:38,280 --> 00:12:42,210
bạn sẽ thiết lập tính năng chỉ để true cho một trong những,

176
00:12:42,210 --> 00:12:50,630
và sau đó tôi sử dụng này bởi vì bộ lọc này sẽ trả về một mảng phụ từ mảng món ăn, vì

177
00:12:50,630 --> 00:12:52,300
vậy tôi cần phải chọn ra phần tử đó.

178
00:12:52,300 --> 00:12:55,600
Sẽ có một yếu tố duy nhất ở đó tại chỉ số 0.

179
00:12:55,600 --> 00:12:59,150
Vì vậy, tôi đang sử dụng chỉ số không để chọn phần tử đó và trả lại

180
00:12:59,150 --> 00:13:03,680
rằng từ phương pháp món ăn được đặc trưng ở đây.

181
00:13:03,680 --> 00:13:09,985
Vì vậy, điều đó hoàn thành việc cập nhật cho các dịch vụ món ăn.

182
00:13:09,985 --> 00:13:15,140
Để xây dựng mẫu nhà của chúng

183
00:13:15,140 --> 00:13:21,195
tôi, chúng tôi sẽ giới thiệu trên chế độ xem nhà một món ăn đã chọn,

184
00:13:21,195 --> 00:13:24,545
một chương trình khuyến mãi hiện tại được lựa chọn bởi nhà hàng,

185
00:13:24,545 --> 00:13:29,785
và một nhà lãnh đạo công ty được lựa chọn từ danh sách độc giả.

186
00:13:29,785 --> 00:13:34,260
Người lãnh đạo doanh nghiệp được giới thiệu trên trang đầu

187
00:13:34,260 --> 00:13:38,550
sẽ là một phần trong bài tập của bạn theo sau bài học cụ thể này.

188
00:13:38,550 --> 00:13:40,380
Nhưng chúng tôi sẽ bao gồm bây giờ,

189
00:13:40,380 --> 00:13:45,775
chúng tôi có một món ăn đặc trưng và khuyến mãi đặc trưng trên trang nhất.

190
00:13:45,775 --> 00:13:50,170
Vì vậy, có nghĩa là tôi cần một dịch vụ khuyến mãi mà trả về

191
00:13:50,170 --> 00:13:55,250
tập hợp các chương trình khuyến mãi đang được thực hiện bởi nhà hàng đặc biệt này.

192
00:13:55,250 --> 00:14:01,095
Vì vậy, hãy để tôi thêm vào một dịch vụ khuyến mãi cho ứng dụng của tôi.

193
00:14:01,095 --> 00:14:04,005
Vì vậy, để làm điều đó, trong thư mục được chia sẻ,

194
00:14:04,005 --> 00:14:12,140
tôi sẽ tạo ra một tập tin mới gọi là promotion.ts.

195
00:14:12,560 --> 00:14:18,410
Trong chương trình khuyến mãi, tôi sẽ tạo ra một lớp học,

196
00:14:18,870 --> 00:14:29,125
chương trình khuyến mãi và trả lại chương trình khuyến mãi này ở đây.

197
00:14:29,125 --> 00:14:32,460
Vì vậy, lớp khuyến mãi này chứa những gì?

198
00:14:32,460 --> 00:14:36,529
Nó chứa một tài sản id,

199
00:14:36,529 --> 00:14:43,010
sau đó nó chứa tên cho việc quảng bá của nhà hàng.

200
00:14:43,010 --> 00:14:47,310
Vì vậy, ví dụ, chương trình khuyến mãi có thể giống như buffet cuối tuần.

201
00:14:47,310 --> 00:14:52,320
Hoặc 10% mỗi ngày vào

202
00:14:52,320 --> 00:14:57,845
giờ ăn trưa và những thứ như thế có thể được giới thiệu trên trang chủ nhà hàng của bạn ở đó.

203
00:14:57,845 --> 00:15:01,280
Vì vậy, tên sau đó tôi cũng sẽ bao gồm một hình ảnh,

204
00:15:01,280 --> 00:15:05,635
đó là để được của chuỗi loại URL hình ảnh,

205
00:15:05,635 --> 00:15:10,625
sau đó nhãn đó sẽ là một chuỗi.

206
00:15:10,625 --> 00:15:13,895
Giá cả cũng là một chuỗi.

207
00:15:13,895 --> 00:15:15,330
Bây giờ, lao động ngụ ý,

208
00:15:15,330 --> 00:15:17,260
bạn không thấy tôi sử dụng chúng vào lúc này,

209
00:15:17,260 --> 00:15:25,780
chúng tôi sẽ đưa chúng vào sử dụng trong một trong những bài tập sau này đặc trưng Boolean.

210
00:15:25,780 --> 00:15:29,965
Vì vậy, bạn sẽ thấy cờ nổi bật một lần nữa xuất hiện trong chương trình khuyến mãi cũng,

211
00:15:29,965 --> 00:15:34,960
và sau đó mô tả chuỗi.

212
00:15:34,960 --> 00:15:38,380
Vì vậy, bạn thấy rằng chương trình khuyến mãi có cấu trúc khá

213
00:15:38,380 --> 00:15:42,840
giống với cấu trúc món ăn mà chúng ta đã thấy trước đó.

214
00:15:42,840 --> 00:15:46,010
Vì vậy, đây là lớp khuyến mãi ở đây.

215
00:15:46,010 --> 00:15:48,090
Bây giờ, cùng với lớp khuyến mãi,

216
00:15:48,090 --> 00:15:50,980
tôi cần phải tạo ra một lớp khác

217
00:15:50,980 --> 00:16:00,615
xuất khẩu tập hợp các chương trình khuyến mãi nói liên tục với chương trình khuyến mãi ở đây.

218
00:16:00,615 --> 00:16:04,240
Vì vậy, ở đây, tôi sẽ nhập

219
00:16:06,920 --> 00:16:11,024
các lớp khuyến mãi

220
00:16:11,024 --> 00:16:18,400
từ các tập tin promotion.ts,

221
00:16:18,400 --> 00:16:25,290
và sau đó tôi sẽ xuất một hằng số được gọi là khuyến mãi.

222
00:16:25,290 --> 00:16:32,395
Vì vậy, bạn thấy rằng tôi đang sử dụng một cấu trúc rất giống với các món ăn ở đây.

223
00:16:32,395 --> 00:16:36,290
Vì vậy, bạn bắt đầu thấy rằng,

224
00:16:36,660 --> 00:16:40,790
cấu trúc mà chúng tôi sử dụng trước đó cho

225
00:16:40,790 --> 00:16:46,465
các chương trình khuyến mãi cho các món ăn cũng hữu ích cho việc tuyên bố chương trình khuyến mãi.

226
00:16:46,465 --> 00:16:47,910
Nếu bạn có một cấu trúc khác nhau,

227
00:16:47,910 --> 00:16:50,990
bạn sẽ thấy rằng với các nhà lãnh đạo cấu trúc sẽ có một chút

228
00:16:50,990 --> 00:16:55,315
khác biệt đối với đối tượng JavaScript ở đây. Các chương trình khuyến mãi.

229
00:16:55,315 --> 00:17:00,160
Bây giờ, chi tiết của một chương trình khuyến mãi cụ thể

230
00:17:00,160 --> 00:17:02,790
mà tôi đã đưa ra trong hướng dẫn, vì vậy tôi sẽ đề nghị bạn sao chép và dán nó từ

231
00:17:02,790 --> 00:17:05,550
đó thay vì tôi gõ toàn bộ điều ở đây.

232
00:17:05,550 --> 00:17:07,390
Vì vậy, hãy để tôi đi trước và sao chép và dán

233
00:17:07,390 --> 00:17:11,800
đối tượng JavaScript vào mảng đối tượng JavaScript này ở đây,

234
00:17:11,800 --> 00:17:13,510
vì vậy bạn đi.

235
00:17:13,510 --> 00:17:20,475
Chương trình khuyến mãi chỉ có một đối tượng duy nhất tại thời điểm này.

236
00:17:20,475 --> 00:17:22,715
Trong tương lai, chúng ta có thể thêm nhiều hơn.

237
00:17:22,715 --> 00:17:26,375
Tại thời điểm này, tôi chỉ có một vì vậy tôi chỉ cần thêm nó vào đó,

238
00:17:26,375 --> 00:17:31,265
và tôi sẽ sử dụng nó và đó là chương trình khuyến mãi đặc trưng cho nhà hàng của tôi ở đó.

239
00:17:31,265 --> 00:17:33,045
Đây chỉ là chương trình khuyến mãi,

240
00:17:33,045 --> 00:17:35,820
vì vậy hãy để tôi cập nhật chương trình khuyến mãi,

241
00:17:35,820 --> 00:17:37,465
đó là những gì tôi cần.

242
00:17:37,465 --> 00:17:42,120
Vì vậy, tôi chỉ cần lưu các thay đổi vào tập tin quảng cáo.

243
00:17:42,120 --> 00:17:46,820
Tiếp theo, tôi sẽ tạo ra một dịch vụ khác gọi là dịch vụ khuyến mãi.

244
00:17:46,820 --> 00:17:53,285
Vì vậy, để làm điều đó, chúng ta hãy đi đến dòng lệnh tại dấu nhắc lệnh loại

245
00:17:53,285 --> 00:18:02,005
ng tạo ra khảo sát dịch vụ/khuyến mãi.

246
00:18:02,005 --> 00:18:05,105
Vì vậy, các dịch vụ khuyến mãi được tạo ra ở đó.

247
00:18:05,105 --> 00:18:08,500
Vì vậy, bây giờ PromotionService đã được đưa ra.

248
00:18:08,500 --> 00:18:13,575
Vì vậy, hãy thêm vào các tính năng cho PromotionService.

249
00:18:13,575 --> 00:18:18,070
Vì vậy, đi đến PromotionService,

250
00:18:18,070 --> 00:18:25,690
bạn thấy rằng PromotionService bây giờ được bao gồm trong thư mục dịch vụ của bạn ở đây,

251
00:18:25,690 --> 00:18:28,615
vì vậy chúng tôi cần phải chuẩn bị một PromotionService.

252
00:18:28,615 --> 00:18:30,715
Vì vậy, trong PromotionService,

253
00:18:30,715 --> 00:18:33,170
tôi sẽ nhập khẩu

254
00:18:37,170 --> 00:18:48,355
chương trình khuyến mãi từ chia sẻ/khuyến mãi,

255
00:18:48,355 --> 00:18:55,010
lớp khuyến mãi, và cũng nhập khẩu

256
00:18:57,000 --> 00:19:09,985
chương trình khuyến mãi từ lớp chia sẻ/chương trình khuyến mãi ở đó.

257
00:19:09,985 --> 00:19:11,885
Các chương trình khuyến mãi liên tục từ đó.

258
00:19:11,885 --> 00:19:14,590
Bây giờ, giống như chúng tôi đã có cho dịch vụ món ăn,

259
00:19:14,590 --> 00:19:19,840
chúng tôi cần phải tạo ra ba phương pháp bên trong PromotionsService.

260
00:19:19,840 --> 00:19:25,080
Vì vậy, những gì tôi sẽ làm là để tiết kiệm cho mình

261
00:19:27,450 --> 00:19:29,750
những rắc rối, tôi sẽ đi vào dish.service, và sau đó chỉ cần sao chép ba,

262
00:19:29,750 --> 00:19:33,445
và sau đó dán nó vào dịch vụ quảng cáo của tôi,

263
00:19:33,445 --> 00:19:35,570
sau đó chỉ cần chỉnh sửa mã.

264
00:19:35,570 --> 00:19:38,965
Được rồi, vì vậy từ các dịch vụ

265
00:19:38,965 --> 00:19:46,505
khuyến mãi, tôi cần phải trả lại Get

266
00:19:46,505 --> 00:19:54,340
Promotion và đây là loại khuyến mãi và sau đó điều này sẽ trở lại Khuyến mãi,

267
00:19:54,340 --> 00:20:00,670
và sau đó nhận được thứ hai sẽ được khuyến mãi

268
00:20:00,670 --> 00:20:08,505
mà một lần nữa nhận được id của chương trình khuyến mãi,

269
00:20:08,505 --> 00:20:10,615
vì vậy tôi sẽ trả lại

270
00:20:10,615 --> 00:20:20,830
khuyến mãi. promo.id là id

271
00:20:20,830 --> 00:20:26,780
Sau đó khuyến mãi GetFeatures.

272
00:20:26,780 --> 00:20:31,860
Vì vậy, bạn có thể thấy rằng cấu trúc của

273
00:20:31,860 --> 00:20:39,920
chương trình khuyến mãi là rất giống với chương trình phục vụ món ăn

274
00:20:39,920 --> 00:20:41,875
và điều này sẽ không phải là loại

275
00:20:41,875 --> 00:20:52,145
khuyến mãi, và điều này sẽ trở lại chương trình khuyến mãi.

276
00:20:52,145 --> 00:20:55,030
PromotionService của tôi đã sẵn sàng.

277
00:20:55,030 --> 00:20:59,695
Bây giờ, tôi sẽ đi vào thành phần nhà, và chuẩn bị điều đó,

278
00:20:59,695 --> 00:21:02,115
để trong thành phần nhà của tôi,

279
00:21:02,115 --> 00:21:07,560
tôi sẽ hiển thị một món ăn đặc trưng và một chương trình khuyến mãi đặc trưng.

280
00:21:07,560 --> 00:21:10,820
Các tính năng/món ăn và tính năng/khuyến mãi sẽ được hiển thị trong

281
00:21:10,820 --> 00:21:15,690
thành phần nhà bằng cách sử dụng các thành phần thẻ vật liệu góc cạnh.

282
00:21:15,690 --> 00:21:19,675
Vì vậy, trước tiên chúng ta cần phải có dữ liệu vào thành phần nhà của chúng tôi,

283
00:21:19,675 --> 00:21:24,690
vì vậy đó là những gì chúng ta sẽ làm trong tập tin kịch bản kiểu thành phần nhà ở đó.

284
00:21:24,690 --> 00:21:29,630
Vì vậy, đi đến các thành phần nhà tập tin kịch bản kiểu, thành phần nhà.

285
00:21:29,630 --> 00:21:44,330
Ở đây, tôi cần nhập khẩu các món ăn

286
00:21:44,330 --> 00:21:52,060
từ chia sẻ/món ăn và cũng là món ăn

287
00:21:52,060 --> 00:22:07,430
tương hợp.service từ dịch vụ/dish.service.

288
00:22:12,330 --> 00:22:17,495
Được rồi, bây giờ tôi cũng sẽ làm điều tương tự cho chương trình khuyến mãi,

289
00:22:17,495 --> 00:22:21,465
vì vậy tôi sẽ chỉ sao chép và dán nó vào đây,

290
00:22:21,465 --> 00:22:23,120
và sau đó chỉnh sửa cái này,

291
00:22:23,120 --> 00:22:26,735
vì vậy đây sẽ là chương trình khuyến mãi,

292
00:22:26,735 --> 00:22:31,315
đây sẽ là chương trình khuyến mãi,

293
00:22:31,315 --> 00:22:42,350
và sau đó là chương trình khuyến mãi, và sau đó nó sẽ là chương trình khuyến mãi.

294
00:22:42,790 --> 00:22:46,800
Vì vậy, với điều này, chúng tôi có cả các dịch vụ món ăn và

295
00:22:46,800 --> 00:22:50,205
món ăn và dịch vụ khuyến mãi có sẵn cho chúng tôi,

296
00:22:50,205 --> 00:22:52,485
trong thành phần nhà của chúng tôi.

297
00:22:52,485 --> 00:22:54,660
Đến bây giờ với nhà xây dựng.

298
00:22:54,660 --> 00:23:01,180
Bây giờ hãy tiêm hai dịch vụ ở đây,

299
00:23:02,280 --> 00:23:12,590
và làm cho chúng có sẵn cho các ứng dụng của chúng tôi hoặc dịch vụ món ăn,

300
00:23:25,490 --> 00:23:30,240
và dịch vụ khuyến mãi được tiêm ở đây.

301
00:23:30,240 --> 00:23:34,610
Vì vậy, với điều này, chúng tôi có quyền truy cập vào cả hai dịch vụ.

302
00:23:34,610 --> 00:23:38,650
Vì vậy, bây giờ trong phương pháp NgonInit,

303
00:23:38,650 --> 00:23:43,779
tôi sẽ lấy hai món ăn đặc trưng.

304
00:23:43,779 --> 00:23:51,770
Vì vậy, tôi sẽ nói This.Dishservice.getFeaturedDish

305
00:23:51,770 --> 00:23:59,520
và cũng khuyến mãi,

306
00:24:03,690 --> 00:24:11,510
PromotionService và GetFeaturedPromotion.

307
00:24:14,400 --> 00:24:18,820
Chỉ cần để được hoàn thành,

308
00:24:18,820 --> 00:24:23,185
để tôi khai báo món ăn ở đây là của

309
00:24:23,185 --> 00:24:32,025
loại Dish và khuyến mãi như của loại Khuyến mãi ở đây.

310
00:24:32,025 --> 00:24:38,830
Vì vậy, điều đó nên làm rõ tất cả các giá trị mà chúng tôi đang sử dụng bên trong đây.

311
00:24:38,830 --> 00:24:46,665
Vì vậy, với điều này, chúng tôi hoàn thành cập nhật cho tập tin typescript thành phần nhà của chúng tôi.

312
00:24:46,665 --> 00:24:49,710
Bây giờ chúng ta hãy chuyển sang tập tin mẫu,

313
00:24:49,710 --> 00:24:55,815
và sau đó thêm vào hai thẻ để hiển thị các món ăn đặc trưng và khuyến mãi đặc trưng.

314
00:24:55,815 --> 00:25:00,310
Bây giờ, vì điều này, tôi đã đưa cho bạn mã trong hướng dẫn.

315
00:25:00,310 --> 00:25:02,995
Vì vậy, tôi sẽ chỉ sao chép mã đó và dán nó vào đây.

316
00:25:02,995 --> 00:25:05,640
Bạn đã biết làm thế nào để tạo thẻ,

317
00:25:05,640 --> 00:25:10,590
vì vậy bạn sẽ có thể dễ dàng làm theo mã mà tôi dán ở đây.

318
00:25:10,590 --> 00:25:17,095
Vì vậy, mẫu thành phần nhà cũng được cập nhật,

319
00:25:17,095 --> 00:25:20,830
vì vậy bạn có thể thấy rằng nó có hai thẻ ở đây.

320
00:25:20,830 --> 00:25:26,550
Đối với một, hiển thị các món ăn và một trong những khác hiển thị các chương trình khuyến mãi ở đây,

321
00:25:26,550 --> 00:25:33,030
và kèm theo bên trong một div FXLayout đây.

322
00:25:33,030 --> 00:25:38,175
Vì vậy, chúng ta hãy lưu các thay đổi và sau đó xem nhanh ứng dụng của chúng tôi.

323
00:25:38,175 --> 00:25:41,095
Sau khi tạo dịch vụ khuyến mãi,

324
00:25:41,095 --> 00:25:45,470
chúng tôi cũng cần phải bao gồm dịch vụ khuyến mãi trong AppModule

325
00:25:45,470 --> 00:25:47,750
và làm cho nó có sẵn cho ứng dụng của chúng tôi.

326
00:25:47,750 --> 00:25:49,840
Vì vậy, tôi sẽ đi vào đây,

327
00:25:49,840 --> 00:25:53,350
và sau đó nhập

328
00:25:53,350 --> 00:26:00,950
dịch vụ khuyến mãi ở đây.

329
00:26:03,150 --> 00:26:07,915
Sau đó, tuyên bố các dịch vụ khuyến mãi

330
00:26:07,915 --> 00:26:16,030
là một trong những nhà cung cấp

331
00:26:16,030 --> 00:26:19,720
trong tập tin AppModule.Ts của tôi ở đây.

332
00:26:19,720 --> 00:26:21,580
Vì vậy, trong tập tin AppModule,

333
00:26:21,580 --> 00:26:23,415
tôi yêu cầu cả hai,

334
00:26:23,415 --> 00:26:25,480
và sau đó lưu các thay đổi.

335
00:26:25,480 --> 00:26:27,055
Đi đến trình duyệt,

336
00:26:27,055 --> 00:26:29,455
bây giờ bạn có thể thấy rằng trong trình duyệt,

337
00:26:29,455 --> 00:26:34,150
thành phần nhà bây giờ hiển thị hai thẻ,

338
00:26:34,150 --> 00:26:40,580
một cho món ăn đặc trưng và một cho chương trình khuyến mãi đặc trưng ở đây.

339
00:26:40,580 --> 00:26:43,850
Vì vậy, bạn có thể thấy rằng hai chiếc xe được hiển thị ở đây.

340
00:26:43,850 --> 00:26:50,505
Bây giờ tôi có thể điều hướng đến trang Menu,

341
00:26:50,505 --> 00:26:54,405
và sau đó cũng đến trang Liên hệ.

342
00:26:54,405 --> 00:26:56,690
Trang Giới thiệu vẫn không có ở đó,

343
00:26:56,690 --> 00:27:02,070
bạn sẽ điền vào trang Giới thiệu như là một phần của nhiệm vụ thứ hai của bạn.

344
00:27:02,070 --> 00:27:07,490
Hãy nhìn vào cùng một ứng dụng trên một kích thước màn hình nhỏ hơn,

345
00:27:07,490 --> 00:27:11,200
vì vậy đây là một màn hình iPhone 6 Plus.

346
00:27:11,200 --> 00:27:16,225
Hãy nhìn vào thành phần nhà và màn hình iPhone 6 Plus.

347
00:27:16,225 --> 00:27:24,490
Bạn có thể thấy món ăn đặc trưng và khuyến mãi đặc trưng trên trang chủ đó.

348
00:27:24,490 --> 00:27:29,820
Sau đó, trình đơn mà chúng tôi đã thấy trước đó,

349
00:27:29,820 --> 00:27:35,150
và cũng là trang Liên hệ được hiển thị ở đây.

350
00:27:35,150 --> 00:27:41,395
Vì vậy, bạn có thể thấy rằng bây giờ ứng dụng đơn trang của chúng tôi được cấu hình nhiều hơn.

351
00:27:41,395 --> 00:27:43,120
Ngoại trừ Giới thiệu,

352
00:27:43,120 --> 00:27:46,875
mà chúng tôi sẽ làm trong nhiệm vụ thứ hai.

353
00:27:46,875 --> 00:27:54,345
Một thay đổi nhỏ nữa mà bạn có thể làm trong tập tin HTML thành phần tiêu đề của bạn,

354
00:27:54,345 --> 00:27:57,470
là cùng với các chỉ thị liên kết router,

355
00:27:57,470 --> 00:28:06,880
Angular Route cũng hỗ trợ thêm một chỉ thị được gọi là RouteLinkActive.

356
00:28:06,880 --> 00:28:14,660
Điều này cho phép chúng ta áp dụng một số lớp cho các yếu tố cụ thể ở đây.

357
00:28:14,660 --> 00:28:16,305
Vì vậy, trong trường hợp này,

358
00:28:16,305 --> 00:28:20,090
nếu liên kết này trở nên hoạt động hơn bất cứ điều gì tôi chỉ định ở đây,

359
00:28:20,090 --> 00:28:24,980
sẽ được áp dụng như một lớp cho mục cụ thể này ở đó.

360
00:28:24,980 --> 00:28:28,309
Vì vậy, tôi sẽ chỉ định một lớp được gọi là hoạt động.

361
00:28:28,309 --> 00:28:32,280
Vì vậy, ở đây, tôi chỉ định RouterLinkActive với hoạt động.

362
00:28:32,280 --> 00:28:35,265
Vì vậy, nếu tôi định nghĩa một lớp CSS được gọi là hoạt động,

363
00:28:35,265 --> 00:28:39,300
sau đó lớp sẽ được áp dụng cho liên kết này,

364
00:28:39,300 --> 00:28:46,975
bất cứ khi nào quan điểm cụ thể này đang được hiển thị trên trang ứng dụng ở đây.

365
00:28:46,975 --> 00:28:53,250
Tôi sẽ sao chép cùng một điều và áp dụng nó cho tất cả các nút còn lại,

366
00:28:53,250 --> 00:28:56,735
nơi tôi đã xác định liên kết router.

367
00:28:56,735 --> 00:28:59,600
Vì vậy, tôi sẽ áp dụng lớp RouterLinkActive,

368
00:28:59,600 --> 00:29:04,195
vào Trang chủ, Menu và Liên hệ với chúng tôi.

369
00:29:04,195 --> 00:29:08,535
Bây giờ, điều này cũng có nghĩa là tôi nên xác định một lớp CSS hoạt động.

370
00:29:08,535 --> 00:29:14,360
Vì vậy, để làm điều đó, tôi sẽ đi vào các thành phần tiêu đề tập tin SESS,

371
00:29:14,360 --> 00:29:16,590
và sau đó xác định một lớp hoạt động ở đây,

372
00:29:16,590 --> 00:29:21,400
vì vậy tôi sẽ xác định các lớp hoạt động ngay tại đó.

373
00:29:21,400 --> 00:29:22,870
Để xác định các lớp hoạt động,

374
00:29:22,870 --> 00:29:31,220
tôi sẽ thêm vào một biến màu sắc ở đây gọi là background-moredark.

375
00:29:33,030 --> 00:29:39,080
Sau đó, màu tương ứng là 4527A0,

376
00:29:39,900 --> 00:29:47,480
đây là một phiên bản tối hơn của màu tối nền này, 4527A0.

377
00:29:47,480 --> 00:29:50,055
Sau đó, đối với hoạt động của tôi,

378
00:29:50,055 --> 00:29:52,720
những gì tôi sẽ làm là, từ lớp hoạt động,

379
00:29:52,720 --> 00:29:57,725
tôi sẽ cho phép lớp xác định một

380
00:29:57,725 --> 00:29:59,560
nền, thiết lập nền của

381
00:29:59,560 --> 00:30:09,410
phần tử đó để màu nền hơn.

382
00:30:10,170 --> 00:30:18,270
Vì vậy, khi xem cụ thể đó được chọn và hiển thị trong trang,

383
00:30:18,270 --> 00:30:21,630
sau đó lớp hoạt động này sẽ được áp dụng cho

384
00:30:21,630 --> 00:30:24,670
rằng A tag cụ thể

385
00:30:24,670 --> 00:30:30,340
có bởi chỉ thị hoạt động liên kết router mà chúng tôi đã áp dụng ở đây.

386
00:30:30,340 --> 00:30:34,750
Bây giờ, những gì thay đổi này gây ra trên trang web của chúng tôi.

387
00:30:34,750 --> 00:30:36,460
Bây giờ, đi đến trang web của chúng

388
00:30:36,460 --> 00:30:40,685
tôi, chúng ta sẽ thấy điều này giới thiệu trên trang web của chúng tôi.

389
00:30:40,685 --> 00:30:43,390
Đi đến ứng dụng của chúng tôi,

390
00:30:43,390 --> 00:30:45,360
bây giờ bạn thấy rằng khi chúng tôi đang ở trong

391
00:30:45,360 --> 00:30:52,125
chế độ xem nhà trong thành phần nhà được hiển thị ở đây, chế độ xem tương ứng của nó.

392
00:30:52,125 --> 00:30:59,870
Sau đó, nút Home ở đây có một màu nền khác nhau được

393
00:30:59,870 --> 00:31:03,670
áp dụng bởi vì các lớp hoạt động đã được thêm vào bởi vì chúng tôi

394
00:31:03,670 --> 00:31:08,150
xác định RouterLinkActive để hoạt động ở đây.

395
00:31:08,150 --> 00:31:09,510
Vì vậy, lớp đó được áp dụng.

396
00:31:09,510 --> 00:31:11,985
Tương tự như vậy, khi bạn chọn menu,

397
00:31:11,985 --> 00:31:17,205
sau đó bạn thấy rằng menu được đánh dấu trong tiêu đề,

398
00:31:17,205 --> 00:31:20,025
và chế độ xem menu được hiển thị ở đây,

399
00:31:20,025 --> 00:31:21,795
và tương tự cho nội dung.

400
00:31:21,795 --> 00:31:29,035
Bây giờ, điều này cho phép chúng ta nhìn thấy trong nháy mắt mà trả tiền xem VR đặc biệt,

401
00:31:29,035 --> 00:31:31,760
trong ứng dụng đơn trang của chúng tôi.

402
00:31:31,760 --> 00:31:38,145
Vì vậy, đây là một chút bổ sung cung cấp tăng cường cho giao diện người dùng,

403
00:31:38,145 --> 00:31:42,255
cho phép chúng ta nhìn thấy một số tính năng thú vị.

404
00:31:42,255 --> 00:31:46,004
Mặc dù, nó không thêm nhiều vào các chức năng của ứng dụng,

405
00:31:46,004 --> 00:31:54,370
nhưng chỉ cần thêm một số tính năng nhỏ sẽ là một bổ sung hữu ích cho ứng dụng của bạn.

406
00:31:54,370 --> 00:31:58,615
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.

407
00:31:58,615 --> 00:32:02,275
Trong bài tập này, chúng tôi đã làm việc để tích hợp

408
00:32:02,275 --> 00:32:07,495
các thành phần liên lạc vào ứng dụng đơn trang của chúng tôi.

409
00:32:07,495 --> 00:32:15,800
Chúng tôi cũng thiết kế một vài thẻ mà chúng tôi đưa vào thành phần nhà,

410
00:32:15,800 --> 00:32:20,180
và thêm vào một vài tính năng mới cho ứng dụng của chúng tôi.

411
00:32:20,180 --> 00:32:28,310
Đây là thời điểm tốt để bạn lưu các thay đổi vào kho lưu trữ Git của bạn với thông điệp,

412
00:32:28,310 --> 00:32:31,520
Đơn Trang Ứng dụng Phần 1.