1
00:00:03,950 --> 00:00:06,915
Trong bài tập trước,

2
00:00:06,915 --> 00:00:12,510
chúng tôi giàn giáo ra ứng dụng Angular cơ bản đầu tiên của chúng tôi.

3
00:00:12,510 --> 00:00:16,430
Như tôi đã đề cập, chúng tôi sẽ làm việc trên ứng dụng Angular đó và phát triển

4
00:00:16,430 --> 00:00:20,350
nó hơn nữa trong suốt phần còn lại của khóa học này.

5
00:00:20,350 --> 00:00:24,230
Bây giờ, trước khi chúng tôi bắt đầu làm việc trên ứng dụng Angular của chúng tôi,

6
00:00:24,230 --> 00:00:29,509
hãy cấu hình ứng dụng Angular của chúng tôi để sử dụng một vài mô-đun bổ sung, cho

7
00:00:29,509 --> 00:00:34,035
phép chúng tôi thiết kế các mẫu cho ứng dụng Angular của chúng tôi.

8
00:00:34,035 --> 00:00:40,810
Chúng tôi sẽ sử dụng mô-đun Angular Material để thiết kế các bố cục giao diện người dùng.

9
00:00:40,810 --> 00:00:47,420
Mô-đun Vật liệu góc cung cấp cho chúng tôi một số thành phần bố trí thú vị

10
00:00:47,420 --> 00:00:54,500
mà chúng tôi có thể sử dụng trong việc thiết kế các mẫu thành phần Angular của chúng tôi.

11
00:00:54,500 --> 00:01:01,915
Ngoài ra, chúng tôi sẽ sử dụng bố cục flex dựa trên bố cục CSS flex, cho

12
00:01:01,915 --> 00:01:08,015
phép chúng tôi thực hiện thiết kế đáp ứng trong ứng dụng Angular của chúng tôi.

13
00:01:08,015 --> 00:01:09,520
Vì vậy, trong bài tập này,

14
00:01:09,520 --> 00:01:11,330
chúng ta sẽ làm những cấu hình này.

15
00:01:11,330 --> 00:01:17,460
Trên đường đi, chúng ta sẽ tìm hiểu kiến thức ngắn gọn đầu tiên về các thành phần,

16
00:01:17,460 --> 00:01:23,980
ngay cả trước khi chúng ta tiếp tục kiểm tra các thành phần chi tiết hơn trong bài học tiếp theo.

17
00:01:23,980 --> 00:01:31,810
Để bắt đầu, chúng ta hãy bắt đầu hành trình của chúng tôi với một truy cập nhanh vào tệp app.component.ts.

18
00:01:31,810 --> 00:01:33,769
Đây là tệp hỗ trợ

19
00:01:33,769 --> 00:01:38,390
thành phần gốc tạo thành một phần của ứng dụng Angular của chúng tôi.

20
00:01:38,390 --> 00:01:40,765
Bây giờ, hãy nhìn vào thành phần gốc này,

21
00:01:40,765 --> 00:01:45,090
có một vài điều sẽ trở nên rất rõ ràng đối với bạn ngay cả khi không có nhiều lời giải thích.

22
00:01:45,090 --> 00:01:49,715
Điều đầu tiên mà tôi muốn thu hút sự chú ý của bạn là tuyên bố nhập khẩu này.

23
00:01:49,715 --> 00:01:56,300
Như bạn có thể thấy, đây là nhập khẩu lớp thành phần từ thư viện lõi Angular.

24
00:01:56,300 --> 00:02:01,185
Sau đó, chúng tôi đang chuẩn bị lớp AppComponent của chúng tôi ở đây,

25
00:02:01,185 --> 00:02:03,280
và xuất khẩu lớp đó.

26
00:02:03,280 --> 00:02:07,160
Vì vậy, trong lớp AppComponent này mà chúng tôi đã tuyên bố,

27
00:02:07,160 --> 00:02:12,080
chúng tôi có một biến mà chúng tôi đã tuyên bố ở đây gọi

28
00:02:12,080 --> 00:02:15,330
là title, mà hiện đang được gán để là một chuỗi.

29
00:02:15,330 --> 00:02:17,910
Bây giờ, hãy nhìn nhanh vào biến này,

30
00:02:17,910 --> 00:02:20,360
bạn ngay lập tức bắt đầu tự hỏi,

31
00:02:20,360 --> 00:02:24,740
làm thế nào là điều này liên quan đến những gì chúng ta đã thấy trong trình duyệt,

32
00:02:24,740 --> 00:02:29,585
khi bạn thấy ứng dụng Angular của chúng tôi được hiển thị trong trình duyệt,

33
00:02:29,585 --> 00:02:33,740
ứng dụng Angular đã hiển thị chính xác những từ này trong trình duyệt.

34
00:02:33,740 --> 00:02:38,630
Thật vậy, biến này đóng một vai trò quan trọng trong việc

35
00:02:38,630 --> 00:02:44,250
đưa ra quan điểm mà bạn đã thấy trong trình duyệt của chúng tôi.

36
00:02:44,250 --> 00:02:46,730
Bây giờ, ngoài ra, bạn cũng thấy rằng

37
00:02:46,730 --> 00:02:53,790
lớp thành phần này được gắn thêm với một decorator ở đây.

38
00:02:53,790 --> 00:02:58,395
Vì vậy, một lần nữa, đây là một trang trí khác mà bạn sẽ gặp phải trong Angular.

39
00:02:58,395 --> 00:03:01,590
Vì vậy, điều này như chúng ta thấy là một trang trí thành phần.

40
00:03:01,590 --> 00:03:08,240
Các trang trí thành phần nội bộ có một đối tượng JavaScript như một tham số ở đây,

41
00:03:08,240 --> 00:03:14,700
và các thuộc tính đầu tiên mà bạn thấy ở đây gọi là selector: app-root.

42
00:03:14,700 --> 00:03:19,100
Bây giờ, nếu bạn nhớ lại khi chúng tôi nhìn vào tập tin index.HTML,

43
00:03:19,100 --> 00:03:23,275
chúng tôi thấy rằng chúng tôi đã bao gồm một phần tử có gọi là app-root.

44
00:03:23,275 --> 00:03:26,865
Bây giờ, bạn bắt đầu thấy nguồn gốc ứng dụng đó phát sinh từ đâu.

45
00:03:26,865 --> 00:03:31,250
Vì vậy, đây là chọn cho các thành phần mà chúng tôi khai báo ở đây,

46
00:03:31,250 --> 00:03:36,020
đó là những gì được sử dụng trong lớp mẫu của chúng tôi để xác

47
00:03:36,020 --> 00:03:41,960
định nơi xem tương ứng với thành phần này sẽ được hiển thị trong trình duyệt.

48
00:03:41,960 --> 00:03:47,845
Thuộc tính thứ hai mà bạn xác định ở đây là TemplateURL.

49
00:03:47,845 --> 00:03:50,890
Điều này trỏ đến một tập tin,

50
00:03:50,890 --> 00:03:53,030
một tập tin HTML như bạn có thể thấy,

51
00:03:53,030 --> 00:03:57,945
trong đó có các mẫu tương ứng với thành phần cụ thể này.

52
00:03:57,945 --> 00:04:02,335
Mẫu xác định chế độ xem cho thành phần này.

53
00:04:02,335 --> 00:04:07,565
Thuộc tính thứ ba mà bạn xác định ở đây như bạn có thể thấy, nói, StyleUrls,

54
00:04:07,565 --> 00:04:14,450
mà như bạn nhận thấy ở đây được gán cho các tập tin app.component.scss.

55
00:04:14,450 --> 00:04:19,130
Vì vậy, tập tin này nên chứa tất cả các mã scss có thể được

56
00:04:19,130 --> 00:04:24,310
sử dụng cho phong cách CSS cho mẫu thành phần của chúng tôi.

57
00:04:24,310 --> 00:04:29,260
Vì vậy, đây là một truy cập nhanh vào các tập tin app.component.t.

58
00:04:29,260 --> 00:04:33,365
Bây giờ, chúng ta hãy đi đến tệp App.Component.html,

59
00:04:33,365 --> 00:04:36,905
và xem nhanh mẫu.

60
00:04:36,905 --> 00:04:40,480
Đi vào tệp App.Component.html,

61
00:04:40,480 --> 00:04:43,635
bạn thấy rằng tệp app.component này,

62
00:04:43,635 --> 00:04:51,384
mã HTML ở đây chỉ chứa một thẻ h1 với một cái gì đó ở đây với một dấu ngoặc kép.

63
00:04:51,384 --> 00:04:58,310
Bây giờ, rõ ràng, đây không phải là một cái gì đó mà bạn đang quen với kiến thức của bạn về HTML,

64
00:04:58,310 --> 00:05:01,755
hoặc CSS hoặc JavaScript mà bạn đã thấy trước đó.

65
00:05:01,755 --> 00:05:04,325
Đây là cú pháp góc.

66
00:05:04,325 --> 00:05:07,055
Đây là những gì chúng tôi gọi là nội suy.

67
00:05:07,055 --> 00:05:12,350
Điều này đang sử dụng liên kết dữ liệu một chiều của Angular.

68
00:05:12,350 --> 00:05:16,775
Tôi sẽ đưa ra một vài điều khoản với anh vào lúc này. Hãy

69
00:05:16,775 --> 00:05:20,690
giữ các điều khoản này, chúng tôi sẽ quay lại để xem xét

70
00:05:20,690 --> 00:05:25,185
chi tiết hơn trong các bài học còn lại của khóa học này.

71
00:05:25,185 --> 00:05:28,140
Điều đầu tiên như tôi đã đề cập là nội suy,

72
00:05:28,140 --> 00:05:33,290
thứ hai mà tôi đề cập là ràng buộc dữ liệu một chiều.

73
00:05:33,680 --> 00:05:42,200
Ngoài ra, bạn ngay lập tức thấy rằng đây là biến mà bạn thấy trong

74
00:05:42,200 --> 00:05:48,560
tệp đồng hành, TypeScript, định nghĩa mã TypeScript tương ứng với thành phần App.

75
00:05:48,560 --> 00:05:51,640
Vì vậy, một khi bạn chỉ định một cái gì đó như

76
00:05:51,640 --> 00:05:58,970
thế này ở đây, ngụ ý là bất cứ giá trị cho tiêu đề này sẽ được thay thế tại chỗ ở

77
00:05:58,970 --> 00:06:08,170
đây và sẽ được sử dụng như là mã HTML bên trong cho thẻ h1 này ở đây.

78
00:06:08,170 --> 00:06:11,600
Đó là mục đích của việc đưa vào đây.

79
00:06:11,600 --> 00:06:15,140
Bây giờ chúng ta sẽ tiếp tục cài đặt một số

80
00:06:15,140 --> 00:06:22,410
mô-đun quan hệ góc khác mà sẽ cho phép chúng tôi thiết kế các mẫu.

81
00:06:22,410 --> 00:06:25,985
Sau đó, chúng tôi sẽ trở lại tập tin App.Component.html này.

82
00:06:25,985 --> 00:06:31,375
Sau đó thiết kế lại mẫu này một chút sau đó trong bài tập này.

83
00:06:31,375 --> 00:06:38,330
Để giúp chúng tôi thiết kế chế độ xem đáp ứng trong ứng dụng Angular của

84
00:06:38,330 --> 00:06:40,340
chúng tôi, chúng tôi sẽ có sự giúp đỡ của một vài

85
00:06:40,340 --> 00:06:45,360
mô-đun liên quan cho Angular được gọi là mô-đun Vật liệu góc.

86
00:06:45,360 --> 00:06:49,705
Mô-đun Vật liệu góc cung cấp cho chúng tôi một số thành phần.

87
00:06:49,705 --> 00:06:53,795
Các thành phần bố trí mà chúng tôi có thể sử dụng trong việc thiết kế

88
00:06:53,795 --> 00:06:59,595
các mẫu mới cho các thành phần Angular của chúng tôi.

89
00:06:59,595 --> 00:07:06,290
Mô-đun Vật liệu góc nếu bạn muốn so sánh điều này có phần giống như những gì Bootstrap

90
00:07:06,290 --> 00:07:14,055
cung cấp cho chúng tôi để thiết kế các trang web của chúng tôi mà chúng tôi đã kiểm tra trong khóa học trước đó.

91
00:07:14,055 --> 00:07:19,850
Ngoài ra, tôi sẽ sử dụng một mô-đun khác được gọi là mô-đun bố trí Angular flex.

92
00:07:19,850 --> 00:07:26,195
Mô-đun layout flex cung cấp hỗ trợ cho việc sử dụng CSS

93
00:07:26,195 --> 00:07:33,440
flex layout trong các mẫu Angular của chúng tôi cho các thành phần Angular của chúng tôi.

94
00:07:33,440 --> 00:07:36,620
Bây giờ, hai mô-đun này cần phải được

95
00:07:36,620 --> 00:07:40,195
cài đặt một cách rõ ràng và sau đó nhập khẩu vào ứng dụng Angular của

96
00:07:40,195 --> 00:07:43,530
chúng tôi, đó là những gì chúng ta sẽ làm trong bước tiếp theo.

97
00:07:43,530 --> 00:07:45,645
Nhưng trước khi chúng tôi đi về phía trước,

98
00:07:45,645 --> 00:07:48,910
một câu hỏi mà bạn có thể tự hỏi là,

99
00:07:48,910 --> 00:07:58,350
tại sao không sử dụng Bootstrap để thực hiện việc thiết kế các mẫu cho ứng dụng Angular của chúng tôi?

100
00:07:58,350 --> 00:08:05,220
Thật vậy, bạn cũng có thể sử dụng Bootstrap để thiết kế các mẫu cho ứng dụng Angular của chúng tôi.

101
00:08:05,220 --> 00:08:07,310
Nhưng bạn chỉ có thể sử dụng

102
00:08:07,310 --> 00:08:12,850
các thành phần CSS một phần của Bootstrap trong ứng dụng Angular của bạn.

103
00:08:12,850 --> 00:08:16,800
Các thành phần dựa trên jQuery.

104
00:08:16,800 --> 00:08:21,709
Các thành phần JavaScript không thể được sử dụng rõ ràng có thể có một số xung đột

105
00:08:21,709 --> 00:08:27,870
giữa các thành phần dựa trên jQuery từ Bootstrap và mã Angular chính nó.

106
00:08:27,870 --> 00:08:33,800
Vì vậy, tốt nhất là tránh sử dụng các thành phần JavaScript từ Bootstrap

107
00:08:33,800 --> 00:08:40,925
trong trường hợp bạn chọn sử dụng Bootstrap làm cách để thiết kế các mẫu Angular của bạn.

108
00:08:40,925 --> 00:08:42,980
Nhưng mặt khác,

109
00:08:42,980 --> 00:08:47,000
tôi cũng nghĩ rằng điều này sẽ cung cấp cho chúng ta một cơ hội tốt để học có được một

110
00:08:47,000 --> 00:08:54,350
khung bố trí giao diện người dùng khác là khung vật liệu Angular.

111
00:08:54,350 --> 00:08:58,640
Vì vậy, đó là lý do tại sao tôi chọn sử dụng khung vật liệu Angular

112
00:08:58,640 --> 00:09:03,745
và bố cục Angular flex trong khóa học cụ thể này.

113
00:09:03,745 --> 00:09:07,540
Bây giờ, khi chúng ta trải qua phần còn lại của khóa học này,

114
00:09:07,540 --> 00:09:10,450
tôi sẽ không giải thích rõ ràng cách sử dụng

115
00:09:10,450 --> 00:09:14,980
các thành phần vật liệu góc hoặc cách sử dụng Angular Flex-Layout.

116
00:09:14,980 --> 00:09:20,615
Thay vào đó, chúng ta sẽ học chúng bằng cách xem xét các ví dụ.

117
00:09:20,615 --> 00:09:22,620
Chúng tôi sẽ sử dụng hai,

118
00:09:22,620 --> 00:09:29,135
cả hai thành phần vật liệu góc tốt nhất và hỗ trợ Angular Flex-Layout,

119
00:09:29,135 --> 00:09:36,715
khi chúng tôi thiết kế các mẫu của chúng tôi cho các thành phần góc của chúng tôi trong khóa học đặc biệt này.

120
00:09:36,715 --> 00:09:41,495
Vì vậy, bằng quá trình sử dụng các thành phần này,

121
00:09:41,495 --> 00:09:44,025
bạn cũng sẽ trên đường đi,

122
00:09:44,025 --> 00:09:47,650
tìm hiểu làm thế nào để sử dụng cả vật liệu góc và góc

123
00:09:47,650 --> 00:09:51,495
Flex-Layout trong ứng dụng Angular của bạn.

124
00:09:51,495 --> 00:09:54,685
Tôi nghĩ rằng bằng cách thực hiện các bài tập,

125
00:09:54,685 --> 00:09:57,060
bạn sẽ học được nhiều hơn về Vật liệu góc.

126
00:09:57,060 --> 00:10:01,505
Bây giờ, để giải thích các khía cạnh khái niệm về lý do tại sao

127
00:10:01,505 --> 00:10:07,440
các thành phần vật liệu góc làm việc theo cách họ làm hoặc làm thế nào Grid hoạt động ví dụ,

128
00:10:07,440 --> 00:10:09,915
hoặc làm thế nào một thiết kế đáp ứng hoạt động,

129
00:10:09,915 --> 00:10:14,150
chúng tôi đã kiểm tra một số trong các khóa học trước đó trên Bootstrap.

130
00:10:14,150 --> 00:10:17,935
Vì vậy, các khái niệm tương tự cũng sẽ đến với sự trợ giúp của chúng tôi.

131
00:10:17,935 --> 00:10:23,260
Thay vào đó, chúng ta sẽ xem xét cơ chế sử dụng cả vật liệu góc và góc

132
00:10:23,260 --> 00:10:30,385
Flex-Layout trong ứng dụng Angular của chúng tôi trong khóa học cụ thể này.

133
00:10:30,385 --> 00:10:33,005
Để bắt đầu sử dụng vật liệu góc,

134
00:10:33,005 --> 00:10:37,655
tất nhiên điều đầu tiên bạn cần làm là cài đặt mô-đun Vật liệu góc.

135
00:10:37,655 --> 00:10:46,230
Vì vậy, tại dấu nhắc nhập npm install —save @angular /material.

136
00:10:48,950 --> 00:10:51,240
Vì vậy, như bạn có thể thấy,

137
00:10:51,240 --> 00:10:55,390
chúng tôi chỉ định tất cả các mô-đun Angular liên quan với @angular,

138
00:10:55,390 --> 00:10:58,650
vì vậy bạn sẽ thấy cũng điều tương tự cho Flex-Layout.

139
00:10:58,650 --> 00:11:03,980
Chúng tôi đang cài đặt phiên bản 6.4.7 của mô-đun Vật liệu góc.

140
00:11:03,980 --> 00:11:09,440
Ngoài ra, mô-đun vật liệu yêu cầu lắp đặt CDK.

141
00:11:09,440 --> 00:11:12,730
Vì vậy, chúng tôi cũng sẽ cài đặt đó bằng cách làm

142
00:11:12,730 --> 00:11:21,100
npm cài đặt @angular /cdk @6 .4.7 —save,

143
00:11:21,100 --> 00:11:25,035
và cài đặt cùng với Góc vật liệu.

144
00:11:25,035 --> 00:11:31,495
Vì vậy, Vật liệu góc sử dụng cdk góc cho các thành phần của nó.

145
00:11:31,495 --> 00:11:35,595
Ngoài ra, khi bạn đang sử dụng Angular Material,

146
00:11:35,595 --> 00:11:43,035
bạn cũng cần nhập mô-đun hoạt hình Angular vào ứng dụng Angular của bạn.

147
00:11:43,035 --> 00:11:46,445
Bắt đầu với phiên bản Angular bốn,

148
00:11:46,445 --> 00:11:49,740
hỗ trợ hoạt hình Angular đã được trích xuất

149
00:11:49,740 --> 00:11:53,695
ra khỏi các mô-đun cốt lõi vào mô-đun riêng biệt của nó.

150
00:11:53,695 --> 00:11:56,130
Vì vậy, có nghĩa là nếu bạn cần phải

151
00:11:56,130 --> 00:11:58,900
sử dụng các hình ảnh động trong ứng dụng Angular của bạn,

152
00:11:58,900 --> 00:12:04,370
bạn cần phải cài đặt một cách rõ ràng các mô-đun hình ảnh động Angular.

153
00:12:04,370 --> 00:12:07,275
Vì vậy, chúng ta hãy đi trước và cài đặt nó quá.

154
00:12:07,275 --> 00:12:08,325
Vì vậy, bạn sẽ nói

155
00:12:08,325 --> 00:12:18,940
npm cài đặt —save @angular /animation @6 .1.7.

156
00:12:20,040 --> 00:12:23,290
Ngoài ra, một mô-đun khác mà tôi sẽ cài đặt

157
00:12:23,290 --> 00:12:33,130
cùng nhau được gọi là HammerJS.

158
00:12:33,130 --> 00:12:36,940
Mô-đun HammerJS được Angular sử dụng

159
00:12:36,940 --> 00:12:40,700
để hỗ trợ một số cử chỉ trong ứng dụng Angular của bạn.

160
00:12:40,700 --> 00:12:45,750
Vì vậy, đó là lý do tại sao chúng tôi cài đặt HammerJS cũng trong ứng dụng của chúng tôi,

161
00:12:45,750 --> 00:12:51,830
và phiên bản hiện tại của HammerJS mà chúng tôi đang sử dụng là 2.0.8.

162
00:12:51,830 --> 00:12:56,050
Bây giờ, chúng tôi đã cài đặt bất cứ điều gì chúng tôi cần

163
00:12:56,050 --> 00:13:01,185
cho mô-đun vật liệu góc được sử dụng trong ứng dụng Angular của chúng tôi.

164
00:13:01,185 --> 00:13:04,605
Tiếp theo, tôi sẽ chuyển sang cài đặt

165
00:13:04,605 --> 00:13:09,415
Angular Flex-Layout trong ứng dụng Angular của tôi.

166
00:13:09,415 --> 00:13:11,460
Vì vậy, để làm điều đó, tôi pad nhắc

167
00:13:11,460 --> 00:13:19,000
npm cài đặt —save @angular/flex-layout

168
00:13:19,000 --> 00:13:22,970
và chúng tôi sẽ cài đặt phiên bản mới nhất của điều đó.

169
00:13:24,760 --> 00:13:31,720
Vì vậy, bây giờ chúng ta có tất cả các mảnh mà chúng ta cần cho ứng dụng Angular của chúng tôi cài đặt, chúng ta

170
00:13:31,720 --> 00:13:36,290
hãy đi trước và sau đó cấu hình ứng dụng Angular

171
00:13:36,290 --> 00:13:41,025
của chúng tôi để sử dụng các mô-đun mới mà chúng tôi cài đặt vào ứng dụng Angular của chúng tôi.

172
00:13:41,025 --> 00:13:46,205
Điều đầu tiên mà chúng tôi sẽ làm là đi đến tập tin index.HTML,

173
00:13:46,205 --> 00:13:51,975
và sau đó chúng tôi sẽ cấu hình các tập tin index.HTML để sử dụng các biểu tượng vật liệu góc.

174
00:13:51,975 --> 00:13:55,800
Vì vậy, để bao gồm các biểu tượng vật liệu góc để chúng có thể được

175
00:13:55,800 --> 00:13:59,580
sử dụng trong các mẫu của ứng dụng Angular của bạn, vì vậy,

176
00:13:59,580 --> 00:14:04,020
hãy để tôi đi ngay ở đó trong đầu của index.HTML,

177
00:14:04,020 --> 00:14:11,905
và sau đó tạo một liên kết mới với

178
00:14:11,905 --> 00:14:47,075
href=” https://fonts.googleapis.com/icon?family=Material+Icons "và đây là một phong cách tờ.

179
00:14:47,075 --> 00:14:52,110
Vì vậy, với điều này, bây giờ tôi có thể sử dụng các biểu tượng vật liệu góc trong

180
00:14:52,110 --> 00:14:58,865
ứng dụng Angular của tôi bất cứ nơi nào tôi chọn để làm như vậy trong các mẫu.

181
00:14:58,865 --> 00:15:04,530
Bước tiếp theo là đi đến ứng dụng module.t và

182
00:15:04,530 --> 00:15:09,825
sau đó nhập ba mô-đun mà chúng tôi vừa cài đặt.

183
00:15:09,825 --> 00:15:14,345
Vì vậy, một trong những đầu tiên mà tôi sẽ nhập khẩu được gọi là

184
00:15:14,345 --> 00:15:29,460
BrowserAnimationsModule mà tôi sẽ nhập khẩu từ

185
00:15:38,170 --> 00:15:47,230
@angular /platform-trình duyệt/hoạt hình. Vì vậy, bây giờ một trong những tiếp theo

186
00:15:47,230 --> 00:15:54,115
mà tôi sẽ nhập khẩu là MaterialToolBarModule.

187
00:15:54,115 --> 00:16:00,370
Vì vậy, điều này nhập khẩu mô-đun @angular /vật liệu/thanh công cụ

188
00:16:00,370 --> 00:16:06,100
có thể được sử dụng trong các mẫu ứng dụng Angular của chúng tôi.

189
00:16:06,100 --> 00:16:14,305
Vì vậy, Vật liệu góc, và cũng

190
00:16:14,305 --> 00:16:26,720
nhập FlexlayoutModule từ @angular /flex-layout.

191
00:16:27,470 --> 00:16:34,050
Vì vậy, một khi chúng tôi có tất cả các mô-đun nhập khẩu sau đó một thay đổi bổ sung mà tôi cần phải

192
00:16:34,050 --> 00:16:40,035
làm là- oh hãy để tôi cũng nhập khẩu Hammer.JS trong khi tôi đang ở ngay đó.

193
00:16:40,035 --> 00:16:43,100
Vì vậy, hãy để tôi nhập

194
00:16:45,260 --> 00:16:51,585
Hammer.JS vào ứng dụng của tôi.

195
00:16:51,585 --> 00:16:53,830
Và một khi tôi ở đó,

196
00:16:53,830 --> 00:16:58,400
sự thay đổi khác mà tôi cần làm là cũng bao gồm

197
00:16:58,400 --> 00:17:04,165
những mô-đun vào đầu vào của trình trang trí mô-đun NG ở đây.

198
00:17:04,165 --> 00:17:06,845
Vì vậy, tôi sẽ đi đến đó và nói mô-đun trình duyệt,

199
00:17:06,845 --> 00:17:13,440
mô-đun hoạt hình trình duyệt ở đó và sau đó sau khi mô-đun HTTP,

200
00:17:13,440 --> 00:17:21,009
tôi sẽ nhập các mô-đun thanh công cụ vật liệu và cũng

201
00:17:21,009 --> 00:17:29,350
là mô-đun bố trí flex như một phần của các đầu vào bên trong trình trang trí mô-đun NG cho mô-đun ứng dụng của tôi.

202
00:17:29,350 --> 00:17:36,215
Vì vậy, với điều này tất cả các cấu hình của tôi để sử dụng mô-đun thanh công cụ vật liệu và

203
00:17:36,215 --> 00:17:38,975
mô-đun bố trí flex góc và cùng với

204
00:17:38,975 --> 00:17:44,680
các mô-đun hình ảnh động trong góc được hoàn thành.

205
00:17:44,680 --> 00:17:50,270
Bây giờ chúng ta hãy bước vào mẫu thành phần và tận dụng thành phần

206
00:17:50,270 --> 00:17:54,570
vật liệu góc đầu tiên của chúng tôi trong việc thiết kế bố cục

207
00:17:54,570 --> 00:18:00,110
cho thành phần ứng dụng của chúng tôi.

208
00:18:00,750 --> 00:18:06,020
Đi đến tập tin mẫu thành phần ứng dụng,

209
00:18:06,020 --> 00:18:09,460
tôi sẽ thay thế điều này bây giờ với

210
00:18:09,460 --> 00:18:17,895
một thành phần vật liệu góc

211
00:18:17,895 --> 00:18:21,480
được gọi là mat-toolbar.

212
00:18:21,480 --> 00:18:24,645
Vì vậy, mat-toolbar cho phép tôi thiết kế

213
00:18:24,645 --> 00:18:29,410
một thanh công cụ mà tôi có thể sử dụng trong ứng dụng góc cạnh của tôi.

214
00:18:29,410 --> 00:18:35,805
Thanh công cụ thường được hiển thị ở đầu trang của bạn trong ứng dụng của bạn.

215
00:18:35,805 --> 00:18:41,395
Vì vậy, đối với thanh công cụ này, tôi sẽ chỉ định màu sắc là chính.

216
00:18:41,395 --> 00:18:44,145
Chúng ta sẽ thấy điều này có nghĩa là gì trong một thời gian ngắn.

217
00:18:44,145 --> 00:18:50,245
Và chúng tôi cũng sẽ đóng thanh công cụ MD này ở đây.

218
00:18:50,245 --> 00:18:56,230
Bây giờ bên trong này tôi sẽ sử dụng một khoảng với

219
00:18:56,230 --> 00:19:05,790
tên của nhà hàng của tôi mà tôi đang thiết kế trang web này.

220
00:19:05,790 --> 00:19:08,150
Vậy, Ristorante Con Fusion.

221
00:19:08,150 --> 00:19:12,650
Bây giờ bạn thấy lý do tại sao tôi đặt tên thư mục này là sự nhầm lẫn.

222
00:19:12,650 --> 00:19:19,765
Vì vậy, những gì là bản cập nhật mà chúng ta cần phải làm cho các thành phần ứng dụng HTML tập tin.

223
00:19:19,765 --> 00:19:29,315
Trong khi chúng tôi đang ở đó, chúng tôi cũng sẽ bao gồm một vài bản cập nhật SCSS vào tập tin Styles.scss của tôi.

224
00:19:29,315 --> 00:19:32,470
Vì vậy, nếu bạn đi xuống vào mã của bạn ở đây,

225
00:19:32,470 --> 00:19:37,000
bạn sẽ tìm thấy tập tin Styles.scss này ở đây.

226
00:19:37,000 --> 00:19:40,450
Vì vậy, đây là nơi bạn có thể bao gồm tất cả các phong cách toàn cầu trong

227
00:19:40,450 --> 00:19:44,810
tập tin này và điều này sẽ có sẵn cho tất cả các thành phần để sử dụng.

228
00:19:44,810 --> 00:19:51,970
Mỗi thành phần có tệp SCSS riêng của mình nơi bạn có thể bao gồm

229
00:19:51,970 --> 00:19:54,620
tùy chỉnh cấp thành phần hoặc

230
00:19:54,620 --> 00:20:00,280
mã SCSS cấp thành phần được sử dụng trong đó thành phần cụ thể.

231
00:20:00,280 --> 00:20:03,090
Chúng tôi sẽ sử dụng cả hai cách tiếp cận trong

232
00:20:03,090 --> 00:20:07,980
ứng dụng góc cạnh này mà chúng tôi đang phát triển trong khóa học này.

233
00:20:07,980 --> 00:20:13,530
Nhưng ngay bây giờ tôi sẽ cập nhật các

234
00:20:13,530 --> 00:20:20,270
tập tin styles.scss chính với một số mã sẽ hữu ích cho toàn bộ ứng dụng góc cạnh của tôi.

235
00:20:20,270 --> 00:20:22,185
Điều đầu tiên mà tôi sẽ làm,

236
00:20:22,185 --> 00:20:28,160
là nhập một chủ đề được xây dựng sẵn có thông qua tài liệu góc cạnh.

237
00:20:28,160 --> 00:20:33,380
Chủ đề được xây dựng sẵn trong vật liệu góc cạnh cung cấp cho chúng ta một cách xác

238
00:20:33,380 --> 00:20:36,000
định màu sắc nhất định và cách một số thứ được bố trí

239
00:20:36,000 --> 00:20:39,265
trong các thành phần vật liệu góc cạnh của tôi.

240
00:20:39,265 --> 00:20:44,800
Các màu sắc sẽ có sẵn thông qua khung được xây dựng sẵn màu chính của chúng tôi

241
00:20:44,800 --> 00:20:49,050
, màu nhấn và màu cảnh báo.

242
00:20:49,050 --> 00:20:53,000
Bây giờ chủ đề cụ thể mà tôi sẽ sử dụng được gọi là màu tím sâu.

243
00:20:53,000 --> 00:20:56,870
Vì vậy, trong trường hợp này màu chính sẽ là màu tím sâu.

244
00:20:56,870 --> 00:21:01,860
Màu nhấn sẽ có màu hổ phách và màu cảnh báo sẽ có màu đỏ trong trường hợp này.

245
00:21:01,860 --> 00:21:07,880
Bây giờ bạn có thể xây dựng các chủ đề vật liệu góc cạnh

246
00:21:07,880 --> 00:21:10,970
của riêng bạn mà bạn có thể sử dụng trong ứng dụng của bạn nhưng tôi sẽ

247
00:21:10,970 --> 00:21:14,385
để lại đó như một bài tập cho bạn để khám phá một mình.

248
00:21:14,385 --> 00:21:17,930
Ngay bây giờ trong ứng dụng góc cạnh của tôi, tôi sẽ sử dụng một trong

249
00:21:17,930 --> 00:21:21,510
những thứ được xây dựng sẵn gọi là hổ phách màu tím sâu.

250
00:21:21,510 --> 00:21:25,575
Vì vậy, để làm điều đó đi đến các tập tin Styles.scss,

251
00:21:25,575 --> 00:21:28,870
tôi sẽ nhập

252
00:21:32,190 --> 00:21:38,080
tài liệu góc

253
00:21:38,080 --> 00:21:48,640
được xây dựng sẵn chủ đề sâu màu tím amber.CSS.

254
00:21:48,640 --> 00:21:54,015
Vì vậy, một chủ đề được xây dựng sẵn này tôi sẽ sử dụng trong ứng dụng góc cạnh của tôi.

255
00:21:54,015 --> 00:21:58,335
Bạn sẽ sớm thấy chủ đề được xây dựng sẵn này hoạt động như thế nào

256
00:21:58,335 --> 00:22:03,060
trong ứng dụng góc cạnh trong các mẫu mà chúng tôi thiết kế cho ứng dụng góc cạnh của chúng tôi.

257
00:22:03,060 --> 00:22:08,360
Ngoài ra, tôi sẽ cấu hình một số thuộc tính cho

258
00:22:08,360 --> 00:22:16,530
cơ thể của tôi của trang index.HTML vì vậy tôi sẽ chỉ định padding là zero,

259
00:22:16,530 --> 00:22:23,230
lề là zero, và sau đó gia đình phông chữ mà tôi sẽ

260
00:22:23,230 --> 00:22:30,360
sử dụng là rubato hoặc sans serif trong ứng dụng của tôi.

261
00:22:30,360 --> 00:22:34,320
Bạn có thể chọn để sử dụng bất cứ điều gì bạn muốn trong các ứng dụng góc cạnh của bạn.

262
00:22:34,320 --> 00:22:38,095
Tôi đã chọn để sử dụng hai trong ứng dụng góc cạnh của tôi.

263
00:22:38,095 --> 00:22:40,130
Hãy lưu các thay đổi,

264
00:22:40,130 --> 00:22:46,495
và chúng ta hãy đi và xem nhanh ứng dụng góc cạnh của chúng tôi trong trình duyệt.

265
00:22:46,495 --> 00:22:48,040
Trước khi bạn làm điều đó,

266
00:22:48,040 --> 00:22:53,080
hãy đảm bảo rằng dịch vụ NG của bạn đang chạy trong

267
00:22:53,080 --> 00:22:58,940
một trong các cửa sổ thiết bị đầu cuối trong máy tính của bạn.

268
00:22:58,940 --> 00:23:04,870
Máy chủ phát triển nên được liên tục chạy để nó sẽ tự động thực hiện

269
00:23:04,870 --> 00:23:07,040
decompilation và sau đó tải

270
00:23:07,040 --> 00:23:11,975
phiên bản cập nhật của ứng dụng góc vào cửa sổ trình duyệt.

271
00:23:11,975 --> 00:23:14,290
Đi đến trình duyệt,

272
00:23:14,290 --> 00:23:17,925
bây giờ bạn thấy những thay đổi mà chúng tôi đã thực hiện đối với

273
00:23:17,925 --> 00:23:24,090
các ứng dụng góc được phản ánh vào chế độ xem trong

274
00:23:24,090 --> 00:23:30,085
trình duyệt của tôi, vì vậy bạn có thể thấy rằng bây giờ chúng tôi có một thanh công cụ ở phía trên cùng với

275
00:23:30,085 --> 00:23:37,095
các từ ngữ mà chúng tôi bao gồm trong các thành phần ứng dụng tập tin mẫu ở đó.

276
00:23:37,095 --> 00:23:41,290
Và bạn có thể thấy màu sắc đã được áp dụng cho thanh công cụ.

277
00:23:41,290 --> 00:23:42,580
Vì vậy, màu sắc, màu chính,

278
00:23:42,580 --> 00:23:46,180
vì vậy đây là màu tím sâu được áp dụng cho thanh công cụ.

279
00:23:46,180 --> 00:23:52,000
Bây giờ chủ đề mà chúng tôi đã xác định sẽ thêm màu tím hoặc màu hổ phách sâu,

280
00:23:52,000 --> 00:23:56,590
tùy thuộc vào những gì được sử dụng bởi các thành phần vật liệu góc cạnh cụ thể

281
00:23:56,590 --> 00:24:01,750
mà chúng tôi sử dụng trong các mẫu ứng dụng góc cạnh của chúng tôi.

282
00:24:01,750 --> 00:24:05,285
Với điều này, chúng tôi hoàn thành bài tập này.

283
00:24:05,285 --> 00:24:09,470
Trong bài tập này, chúng tôi đã cấu hình ứng dụng góc cạnh của chúng tôi để

284
00:24:09,470 --> 00:24:13,880
sử dụng vật liệu góc cạnh và bố cục uốn cong góc cạnh.

285
00:24:13,880 --> 00:24:16,410
Chúng tôi cũng đã sử dụng

286
00:24:16,410 --> 00:24:22,150
thành phần vật liệu góc đầu tiên của chúng tôi trong tập tin mẫu thành phần ứng dụng.

287
00:24:22,150 --> 00:24:29,605
Và chúng tôi đã sử dụng chủ đề tích hợp từ vật liệu góc cạnh cho ứng dụng góc cạnh của chúng tôi.

288
00:24:29,605 --> 00:24:34,530
Lưu tất cả các thay đổi và sau đó đây là thời điểm tốt

289
00:24:34,530 --> 00:24:39,880
để bạn thực hiện một cam kết git với thông điệp cấu hình góc cạnh.