1
00:00:03,920 --> 00:00:10,619
Trước khi chúng tôi tiến lên phía trước với phần còn lại của bài tập và bài tập trong khóa học này,

2
00:00:10,619 --> 00:00:13,245
tôi nghĩ rằng đây sẽ là thời điểm tốt cho tôi để

3
00:00:13,245 --> 00:00:16,450
cung cấp cho ứng dụng góc cạnh của tôi một cấu trúc đẹp.

4
00:00:16,450 --> 00:00:19,660
Vì vậy, đây là nơi tôi sẽ thêm vào đầu trang và chân trang

5
00:00:19,660 --> 00:00:22,875
cho ứng dụng góc cạnh của tôi để cách

6
00:00:22,875 --> 00:00:29,635
giao diện người dùng được trả lại hấp dẫn hơn rất nhiều so với những gì nó đã được cho đến nay.

7
00:00:29,635 --> 00:00:34,010
Vì vậy, chúng ta hãy xem làm thế nào chúng ta có thể xây dựng nhiều thành phần để

8
00:00:34,010 --> 00:00:38,150
chiếm các phần khác nhau của màn hình trong ứng dụng góc cạnh của chúng tôi.

9
00:00:38,150 --> 00:00:43,445
Vì vậy, ở đây, bạn sẽ thấy rằng ứng dụng góc cạnh của tôi bây giờ sẽ bao gồm một tiêu đề,

10
00:00:43,445 --> 00:00:46,830
đó là một thành phần riêng biệt, chân trang,

11
00:00:46,830 --> 00:00:48,400
đó là một thành phần khác,

12
00:00:48,400 --> 00:00:50,145
và sau đó ở giữa hai,

13
00:00:50,145 --> 00:00:54,860
tôi sẽ có một phần của ứng dụng góc cạnh của tôi

14
00:00:54,860 --> 00:01:00,080
sẽ được kiểm soát sau này bằng cách sử dụng bộ định tuyến góc cạnh.

15
00:01:00,080 --> 00:01:06,740
Vì vậy, bạn thấy đấy, tôi đang thiết lập sân khấu cho những gì sẽ diễn ra sau này trong khóa học này.

16
00:01:06,740 --> 00:01:08,840
Vì vậy, trên đường đi,

17
00:01:08,840 --> 00:01:14,195
chúng tôi cũng sẽ sử dụng Font Awesome Icons trong ứng dụng góc cạnh của chúng tôi.

18
00:01:14,195 --> 00:01:16,540
Tôi chỉ thích các biểu tượng Font Awesome,

19
00:01:16,540 --> 00:01:18,890
vì vậy tôi nghĩ rằng đây sẽ là một nơi tốt để

20
00:01:18,890 --> 00:01:23,005
giới thiệu các biểu tượng này vào ứng dụng góc cạnh của tôi.

21
00:01:23,005 --> 00:01:28,715
Để tiếp tục, chúng ta hãy cài đặt phông chữ awesome vào ứng dụng góc cạnh của chúng tôi.

22
00:01:28,715 --> 00:01:31,920
Vì vậy, để làm điều đó, tôi sẽ sử dụng NPM để đi,

23
00:01:31,920 --> 00:01:34,320
và lấy font-awesome cho tôi,

24
00:01:34,320 --> 00:01:41,475
vì vậy NPM cài đặt font-awesome 4.7.0, và tiết kiệm.

25
00:01:41,475 --> 00:01:44,055
Sau đó, hãy để font-awesome được cài đặt.

26
00:01:44,055 --> 00:01:48,435
Vì vậy, một khi font-awesome được vào ứng dụng góc của chúng tôi,

27
00:01:48,435 --> 00:01:50,570
và sau đó trở thành một phần của các mô-đun nút

28
00:01:50,570 --> 00:01:53,055
được bao gồm trong ứng dụng góc của chúng tôi,

29
00:01:53,055 --> 00:01:58,465
bước tiếp theo là để làm cho nó có sẵn cho ứng dụng góc của chúng tôi.

30
00:01:58,465 --> 00:02:03,355
Chúng ta cần phải tích hợp font-awesome vào ứng dụng góc cạnh của chúng tôi.

31
00:02:03,355 --> 00:02:04,710
Vì vậy, để làm điều đó,

32
00:02:04,710 --> 00:02:06,510
đi đến thư mục nguồn,

33
00:02:06,510 --> 00:02:14,280
và sau đó tạo một tập tin có tên _variables.scss trong thư mục nguồn.

34
00:02:14,280 --> 00:02:18,400
Trong tập tin variables.scss,

35
00:02:18,400 --> 00:02:27,860
thêm vào $fa-font-path: và

36
00:02:27,860 --> 00:02:33,810
sau đó trong dấu ngoặc kép, đặt.. /node_modules/font-awesome/fonts.

37
00:02:38,510 --> 00:02:45,080
Vì vậy, chúng tôi đang chỉ định đường dẫn phông chữ cho các tập tin tuyệt vời phông chữ của chúng tôi ở đây.

38
00:02:45,330 --> 00:02:51,245
Sau đó, mở tập tin Styles.scss,

39
00:02:51,245 --> 00:02:53,995
và sau đó trong tập tin Styles.scss,

40
00:02:53,995 --> 00:02:56,720
chúng tôi sẽ thêm vào một vài dòng có.

41
00:02:56,720 --> 00:03:05,335
Đầu tiên, chúng tôi sẽ nhập các biến mà chúng tôi vừa khai báo bằng cách nói @import,

42
00:03:05,335 --> 00:03:08,550
và trong dấu ngoặc kép biến,

43
00:03:08,550 --> 00:03:14,025
sau đó chúng tôi sẽ nhập các tập tin font-awesome ở đó,

44
00:03:14,025 --> 00:03:15,790
sau đó chúng tôi sẽ nói

45
00:03:16,040 --> 00:03:30,020
@import.. /node_modules/Font-awesome/SCSS/Font-awesome. Chúng tôi đang nhập khẩu

46
00:03:30,020 --> 00:03:36,540
phiên bản SCSS của nó bởi vì chúng tôi đang sử dụng SCSS trong ứng dụng góc cạnh của chúng tôi.

47
00:03:36,670 --> 00:03:41,850
Một khi chúng tôi đã sửa đổi các phong cách cho các tập tin CSS,

48
00:03:41,850 --> 00:03:43,680
chúng ta hãy lưu các thay đổi.

49
00:03:43,680 --> 00:03:46,580
Tại thời điểm này, chúng ta có thể cần phải khởi động lại

50
00:03:46,580 --> 00:03:50,840
máy chủ của chúng tôi đã phục vụ lên ứng dụng góc cạnh của chúng tôi.

51
00:03:50,840 --> 00:03:53,590
Vì vậy, nơi bạn gõ dịch vụ NG,

52
00:03:53,590 --> 00:03:58,010
bạn có thể muốn dừng máy chủ đang phục vụ ứng dụng góc cạnh của bạn và

53
00:03:58,010 --> 00:04:03,135
khởi động lại nó để nó sẽ bao gồm những thay đổi mới đã được thực hiện.

54
00:04:03,135 --> 00:04:05,280
Vì vậy, đi đến thiết bị đầu cuối của

55
00:04:05,280 --> 00:04:09,110
tôi, tôi sẽ dừng máy chủ của tôi,

56
00:04:09,110 --> 00:04:15,095
và sau đó khởi động lại máy chủ để nó sẽ đưa vào tài khoản thay đổi mà tôi đã thực hiện.

57
00:04:15,095 --> 00:04:18,530
Bạn sẽ thấy trạng thái hiện tại của

58
00:04:18,530 --> 00:04:21,770
ứng dụng góc cạnh của chúng tôi bằng cách nhìn vào nó trong trình duyệt.

59
00:04:21,770 --> 00:04:25,040
Vì vậy, đây là những gì chúng ta có trong ứng dụng góc cạnh của chúng tôi.

60
00:04:25,040 --> 00:04:28,160
Tôi muốn có thể thêm một đầu trang và chân trang vào

61
00:04:28,160 --> 00:04:33,320
chế độ xem này để tôi có thể sử dụng cả đầu trang và chân trang,

62
00:04:33,320 --> 00:04:36,680
và sau đó là nội dung thực tế giữa đầu trang

63
00:04:36,680 --> 00:04:40,550
và chân trang theo cách tôi xây dựng ứng dụng góc cạnh của tôi.

64
00:04:40,550 --> 00:04:41,690
Vì vậy, để làm điều đó,

65
00:04:41,690 --> 00:04:46,135
tôi sẽ tạo ra hai thành phần mới được gọi là đầu trang và chân trang,

66
00:04:46,135 --> 00:04:51,510
và để họ quản lý một phần của màn hình được phân bổ cho họ.

67
00:04:51,510 --> 00:04:56,290
Đi đến dấu nhắc, hãy để tôi tạo ra một thành phần tiêu đề mới.

68
00:04:56,290 --> 00:04:58,950
Tôi thậm chí có thể nói ng g,

69
00:04:58,950 --> 00:05:02,420
đó là đủ cho CLI góc để

70
00:05:02,420 --> 00:05:06,190
nhận ra rằng nó muốn tạo ra một thành phần.

71
00:05:06,190 --> 00:05:11,310
Vì vậy, tôi nói ng g thành phần tiêu đề,

72
00:05:11,760 --> 00:05:17,370
và cũng ng g thành phần chân.

73
00:05:17,370 --> 00:05:20,900
Vì vậy, bây giờ, tôi có hai thành phần có sẵn cho tôi

74
00:05:20,900 --> 00:05:25,030
để sử dụng trong ứng dụng góc cạnh của tôi.

75
00:05:25,030 --> 00:05:28,445
Làm thế nào tôi sẽ sử dụng hai thành phần này?

76
00:05:28,445 --> 00:05:31,665
Hãy đi đến tệp App component.html,

77
00:05:31,665 --> 00:05:35,360
và sau đó sử dụng hai thành phần này theo cách chúng tôi

78
00:05:35,360 --> 00:05:40,340
soạn toàn bộ màn hình cho ứng dụng góc cạnh của chúng tôi.

79
00:05:40,340 --> 00:05:43,185
Quay trở lại ứng dụng của chúng

80
00:05:43,185 --> 00:05:48,620
tôi, chúng tôi thấy rằng các tập tin module.t ứng dụng

81
00:05:48,620 --> 00:05:51,680
đã bao gồm các tiêu đề và thành phần chân trang

82
00:05:51,680 --> 00:05:54,965
và chúng đã được bao gồm trong các tờ khai ở đây.

83
00:05:54,965 --> 00:05:58,075
Vì vậy, đây là lợi thế của việc sử dụng CLI góc cạnh,

84
00:05:58,075 --> 00:06:01,610
nó sẽ chăm sóc tất cả các nền tảng này cho

85
00:06:01,610 --> 00:06:05,825
bạn để bạn có thể tập trung vào việc xây dựng ứng dụng góc cạnh của bạn.

86
00:06:05,825 --> 00:06:09,340
Vì vậy, đó là lý do tại sao tôi yêu CLI góc cạnh

87
00:06:09,340 --> 00:06:13,490
như một cách tiếp cận để xây dựng ứng dụng góc cạnh của tôi.

88
00:06:13,490 --> 00:06:20,640
Vì vậy, bây giờ, chúng ta hãy đi đến các thành phần ứng dụng tập tin HTML.

89
00:06:20,640 --> 00:06:24,530
Vì vậy, ở đây, bạn thấy rằng chúng tôi đã bao gồm các menu ứng dụng dưới đó.

90
00:06:24,530 --> 00:06:29,430
Tôi sẽ loại bỏ thanh công cụ này từ tập tin HTML thành phần ứng dụng của tôi.

91
00:06:29,430 --> 00:06:37,650
Thanh công cụ đó sẽ trở thành một phần của tiêu đề mẫu cho thành phần tiêu đề của tôi.

92
00:06:37,650 --> 00:06:45,500
Vì vậy, thay vào đó,

93
00:06:45,500 --> 00:06:54,310
tập tin mẫu thành phần ứng dụng của tôi sẽ chỉ chứa các tiêu đề và chân trang ở phía dưới.

94
00:06:56,450 --> 00:06:59,065
Vì vậy, bạn thấy rằng bây giờ,

95
00:06:59,065 --> 00:07:02,480
chúng tôi có quan điểm của ba thành phần.

96
00:07:02,480 --> 00:07:04,370
Đầu trang, menu

97
00:07:04,370 --> 00:07:07,160
và chân trang chiếm toàn bộ màn hình.

98
00:07:07,160 --> 00:07:10,940
Vì vậy, ba thành phần này có được những phần của màn hình cho chính họ.

99
00:07:10,940 --> 00:07:16,970
Hãy lưu các thay đổi và xem nhanh ứng dụng của chúng tôi trong trình duyệt.

100
00:07:16,970 --> 00:07:19,855
Đi đến ứng dụng trong trình duyệt,

101
00:07:19,855 --> 00:07:22,895
bây giờ bạn thấy rằng tiêu đề đã chiếm nó là

102
00:07:22,895 --> 00:07:26,090
một phần của màn hình lên đó, và rõ ràng,

103
00:07:26,090 --> 00:07:28,400
kể từ khi chúng tôi vừa chuẩn bị thành phần,

104
00:07:28,400 --> 00:07:30,245
nó chỉ nói tiêu đề hoạt động

105
00:07:30,245 --> 00:07:31,879
, và sau đó xuống dưới đây,

106
00:07:31,879 --> 00:07:36,180
chân trang cũng đã diễn ra trong trang màn hình.

107
00:07:36,180 --> 00:07:41,630
Bây giờ, bây giờ chúng ta sẽ đi trước và cập nhật các mẫu cho cả tiêu đề và chân trang

108
00:07:41,630 --> 00:07:47,625
để chúng tôi có thể độc đáo xác định giao diện người dùng của chúng tôi cho ứng dụng góc cạnh của chúng tôi.

109
00:07:47,625 --> 00:07:50,735
Hãy bắt đầu công việc trên chân trang của chúng tôi.

110
00:07:50,735 --> 00:07:53,180
Vì vậy, để bắt đầu trên chân trang, chúng

111
00:07:53,180 --> 00:07:55,780
ta hãy đi đến tập tin mẫu của chân trang,

112
00:07:55,780 --> 00:08:02,355
và sau đó chúng ta sẽ thay thế này với mẫu mới được thiết kế của chân trang.

113
00:08:02,355 --> 00:08:03,920
Bây giờ, để thuận tiện cho bạn,

114
00:08:03,920 --> 00:08:07,030
tôi đã cung cấp mã cho bạn trong hướng dẫn.

115
00:08:07,030 --> 00:08:10,690
Nó sẽ là khôn ngoan để sao chép toàn bộ mã từ đó,

116
00:08:10,690 --> 00:08:12,155
và sau đó dán nó vào đây.

117
00:08:12,155 --> 00:08:15,715
Sau đó, kiểm tra xem chân trang này làm gì.

118
00:08:15,715 --> 00:08:20,830
Vì vậy, ở đây, bạn thấy rằng tôi đã dán trong mã cho mẫu chân trang của tôi.

119
00:08:20,830 --> 00:08:24,130
Bây giờ, tôi sẽ trở lại với mã này một chút sau.

120
00:08:24,130 --> 00:08:28,045
Nếu bạn đã thực hiện khóa học trước đó trên Bootstrap,

121
00:08:28,045 --> 00:08:33,580
bạn sẽ thấy rằng đây là cách vật liệu góc cạnh để thực hiện

122
00:08:33,580 --> 00:08:40,185
cùng một loại cấu trúc cho chân trang mà chúng tôi đã thực hiện trong khóa học Bootstrap.

123
00:08:40,185 --> 00:08:43,965
Một số trong những điều này sẽ được nhận ra cho bạn đã,

124
00:08:43,965 --> 00:08:48,260
nhưng hãy để tôi hoàn thành bản cập nhật cho các mẫu chân trang,

125
00:08:48,260 --> 00:08:57,085
và sau đó chúng tôi cũng sẽ thêm trong một vài mã SCSS vào tập tin thành phần.scss chân trang của tôi,

126
00:08:57,085 --> 00:09:02,100
và sau đó có một cái nhìn vào cách chân trang bây giờ hình thành.

127
00:09:02,100 --> 00:09:05,675
Vì vậy, ở đây, tôi đã một lần nữa dán trong mã

128
00:09:05,675 --> 00:09:09,585
từ các hướng dẫn tập thể dục mà theo dõi video này,

129
00:09:09,585 --> 00:09:18,880
để hiển thị các lớp SCSS khác nhau mà tôi đã thêm vào chân trang của tôi.

130
00:09:18,880 --> 00:09:23,320
Vì vậy, tôi có một vài lớp mà tôi đã định nghĩa ở đây,

131
00:09:23,320 --> 00:09:27,380
Tôi sẽ sử dụng chúng để xác định một phần của chân trang của tôi,

132
00:09:27,380 --> 00:09:29,570
và sau đó tương tự lớp chân trang ở đây,

133
00:09:29,570 --> 00:09:32,765
và tôi có một SCSS trộn ở đây,

134
00:09:32,765 --> 00:09:37,165
và một số biến ở đây

135
00:09:37,165 --> 00:09:41,450
xác định màu sắc khác nhau mà tôi sẽ sử dụng trong ứng dụng góc cạnh của tôi.

136
00:09:41,450 --> 00:09:44,145
Vì vậy, chúng ta hãy lưu những thay đổi mà chúng tôi đã thực hiện. Chúng

137
00:09:44,145 --> 00:09:49,755
ta hãy nhìn vào chân trang trong hóa thân hiện tại của nó,

138
00:09:49,755 --> 00:09:55,740
và sau đó chúng tôi sẽ trở lại và trả một truy cập nhanh vào mã mà tôi đã bao gồm cả

139
00:09:55,740 --> 00:10:02,345
trong các thành phần chân trang mẫu tập tin và mã SCSS ở đây.

140
00:10:02,345 --> 00:10:06,835
Đi đến ứng dụng góc cạnh của chúng tôi trong trình duyệt, wallah, ở

141
00:10:06,835 --> 00:10:11,545
đó bạn có chân trang mới cho ứng dụng góc cạnh của chúng tôi.

142
00:10:11,545 --> 00:10:14,295
Vì vậy, bạn có thể thấy rằng tôi có một vài điều ở đây.

143
00:10:14,295 --> 00:10:19,840
Đây ở cạnh trái là các liên kết khác nhau

144
00:10:19,840 --> 00:10:25,975
đến các trang khác nhau mà sẽ tạo thành một phần của ứng dụng Angular của tôi.

145
00:10:25,975 --> 00:10:30,620
Chúng ta sẽ xem làm thế nào chúng ta làm điều đó như một phần của vài bài tập tiếp theo.

146
00:10:30,620 --> 00:10:35,110
Bây giờ, ở đây tôi đang sử dụng các thành phần nút

147
00:10:35,110 --> 00:10:39,795
là một phần của tài liệu Angular để xác định các liên kết ở đây,

148
00:10:39,795 --> 00:10:41,870
sau đó tôi có địa chỉ ở đây,

149
00:10:41,870 --> 00:10:46,810
và sau đó tôi cũng sử dụng một lần nữa nút để xác định chuỗi các

150
00:10:46,810 --> 00:10:52,110
nút cho các liên kết phương tiện truyền thông xã hội khác nhau cho nhà hàng của tôi ở đây.

151
00:10:52,110 --> 00:10:55,515
Vì vậy, bạn có thể thấy rằng tôi có tất cả những thứ này.

152
00:10:55,515 --> 00:10:57,470
Để tạo ra những, tôi sử dụng

153
00:10:57,470 --> 00:11:01,820
hỗ trợ vật liệu Angular cho các nút hành động nổi nhỏ ở đây,

154
00:11:01,820 --> 00:11:05,155
và cung cấp cho một cấu trúc tốt đẹp cho việc này.

155
00:11:05,155 --> 00:11:07,860
Nếu bạn đã nhìn thấy phiên bản Bootstrap của điều này,

156
00:11:07,860 --> 00:11:14,205
tôi thích điều này tốt hơn nhiều so với phiên bản Bootstrap mà tôi đã tạo ra trong khóa học trước đó.

157
00:11:14,205 --> 00:11:19,730
Vì vậy, chân trang của chúng tôi bây giờ là tốt tại chỗ.

158
00:11:19,730 --> 00:11:22,695
Hãy nhanh chóng xem xét một số mã ở chân trang.

159
00:11:22,695 --> 00:11:27,890
Bây giờ, tôi sẽ không giải thích rằng trong một toàn bộ rất nhiều chi tiết bởi vì đó là để

160
00:11:27,890 --> 00:11:33,665
đối phó với nhiều hơn với các vật liệu góc hơn là Angular chính nó,

161
00:11:33,665 --> 00:11:36,780
nhưng trên đường đi bằng cách chỉ nhìn vào cấu trúc của mã,

162
00:11:36,780 --> 00:11:39,045
bạn sẽ bắt đầu thấy làm thế nào các

163
00:11:39,045 --> 00:11:45,095
thành phần vật liệu góc này có thể được sử dụng để xác định một cái gì đó như thế này.

164
00:11:45,095 --> 00:11:47,060
Đi đến thành phần chân trang,

165
00:11:47,060 --> 00:11:55,795
bạn thấy rằng tôi có một div bên ngoài ở đây mà tôi đã chỉ định một số bố trí góc,

166
00:11:55,795 --> 00:11:59,280
thuộc tính bố trí flex ở đây,

167
00:11:59,280 --> 00:12:01,895
vì vậy tôi nói rằng hàng FXLayout,

168
00:12:01,895 --> 00:12:06,075
và sau đó FXLayout sm và xs là cột.

169
00:12:06,075 --> 00:12:10,160
Vì vậy, đối với kích thước màn hình nhỏ và thêm nhỏ

170
00:12:10,160 --> 00:12:14,380
sẽ vị trí tất cả các nội dung như cột,

171
00:12:14,380 --> 00:12:16,990
nhưng đối với kích thước màn hình lớn hơn,

172
00:12:16,990 --> 00:12:18,300
nó sẽ vị trí chúng như hàng.

173
00:12:18,300 --> 00:12:21,545
Vì vậy, đây là những gì mang lại cho tôi cấu trúc tốt đẹp cho chân trang của tôi.

174
00:12:21,545 --> 00:12:24,790
Như bạn thấy trong giao diện người dùng div,

175
00:12:24,790 --> 00:12:28,810
Tôi đang định vị tất cả các trung tâm nội dung ở đây,

176
00:12:28,810 --> 00:12:31,495
và xuống dưới đây,

177
00:12:31,495 --> 00:12:33,380
tôi xác định một trong những đầu tiên.

178
00:12:33,380 --> 00:12:40,415
Vì vậy, xoắn toán học này ở đây mà tôi đang sử dụng định nghĩa các liên kết của tôi ở đây.

179
00:12:40,415 --> 00:12:46,235
Vì vậy, trong này tôi đang sử dụng mat như để thành phần vật liệu góc,

180
00:12:46,235 --> 00:12:49,425
và bên trong đó tôi đang sử dụng một với

181
00:12:49,425 --> 00:12:58,990
các thuộc tính nút mat gán cho một để tạo ra các nút ở đây.

182
00:12:58,990 --> 00:13:02,255
Sau đó, tôi sẽ trở lại và thêm

183
00:13:02,255 --> 00:13:07,665
mã thực tế cho các liên kết này trong các bài tập tiếp theo ở đây.

184
00:13:07,665 --> 00:13:12,940
Đây là những gì giúp tôi tạo ra danh sách các liên kết ở phía bên trái.

185
00:13:12,940 --> 00:13:14,920
Đây là địa chỉ mà bạn thấy,

186
00:13:14,920 --> 00:13:17,420
đây là khá đơn giản để xem xét.

187
00:13:17,420 --> 00:13:22,080
Vì vậy, đây là một div mà tôi đang sử dụng FXFlex với 50,

188
00:13:22,080 --> 00:13:24,490
và một trong những khác với FXFlex với 40.

189
00:13:24,490 --> 00:13:29,230
Vì vậy, 40 nghĩa là 40 phần trăm và 50 nghĩa là 50 phần trăm,

190
00:13:29,230 --> 00:13:33,150
và ở đây tôi đang sử dụng FXFlex offset 20 pixel.

191
00:13:33,150 --> 00:13:37,410
Vì vậy, nó di chuyển nội dung này sang phải 20 pixel.

192
00:13:37,410 --> 00:13:41,830
Vì vậy, tôi có một không gian 20 pixel còn lại ở phía bên trái cho

193
00:13:41,830 --> 00:13:47,660
div đặc biệt này chứa các liên kết ở đây.

194
00:13:47,660 --> 00:13:49,400
Sau đó, cuối cùng dưới đây,

195
00:13:49,400 --> 00:13:55,850
tôi có tập hợp các liên kết mà tôi đang sử dụng để

196
00:13:55,850 --> 00:14:02,340
tạo thanh với tất cả các liên kết truyền thông xã hội ở đó.

197
00:14:02,340 --> 00:14:06,330
Vì vậy, tôi đang sử dụng một với nút biểu tượng mat đây.

198
00:14:06,330 --> 00:14:14,850
Vì vậy, đó là những gì tạo ra các nút tròn mà bạn nhìn thấy ở chân trang ở đó.

199
00:14:14,850 --> 00:14:16,150
Bây giờ, đối với mỗi người trong số này,

200
00:14:16,150 --> 00:14:18,640
tôi đang áp dụng các lớp tương ứng ở đây.

201
00:14:18,640 --> 00:14:21,745
Vì vậy, bạn có thể nhận thấy rằng nút Google Plus, nút Facebook,

202
00:14:21,745 --> 00:14:27,590
tất cả các lớp được định nghĩa trong tập tin SCSS của tôi ở đó,

203
00:14:27,590 --> 00:14:31,540
nơi tôi đã chỉ định các màu sắc cho nền và như vậy cho điều này, để

204
00:14:31,540 --> 00:14:38,025
nó phù hợp với màu sắc điển hình mà các trang web truyền thông xã hội sử dụng.

205
00:14:38,025 --> 00:14:43,380
Vì vậy, dành một chút thời gian nhìn vào mã này ở đây,

206
00:14:43,380 --> 00:14:49,435
và sau đó bạn sẽ nhanh chóng nhận được một cảm giác như thế nào chân trang đã được thiết kế.

207
00:14:49,435 --> 00:14:54,520
Tương tự như vậy, đi đến các thành phần chân trang Sass mã ở đây,

208
00:14:54,520 --> 00:14:57,460
vì vậy bạn có thể thấy rằng tôi đã xác định màu sắc khác nhau ở đây.

209
00:14:57,460 --> 00:15:00,970
Tôi đang sử dụng một sự pha trộn với lề thiết lập ở đây,

210
00:15:00,970 --> 00:15:02,045
và sau đó cho chân trang của

211
00:15:02,045 --> 00:15:04,695
tôi, tôi xác định màu nền một cách thích hợp,

212
00:15:04,695 --> 00:15:10,150
và nhận thấy các lớp khác nhau mà tôi đang xác định ở đây

213
00:15:10,150 --> 00:15:12,910
một nút Facebook mà màu sắc và

214
00:15:12,910 --> 00:15:15,910
màu nền tôi đã xác định cho mỗi một trong số họ.

215
00:15:15,910 --> 00:15:18,300
Vì vậy, màu tương ứng của

216
00:15:18,300 --> 00:15:22,835
trang mạng xã hội đó đang được sử dụng làm màu nền cho mỗi một trong số này.

217
00:15:22,835 --> 00:15:25,255
Bây giờ, trong khóa học Bootstrap trước đó,

218
00:15:25,255 --> 00:15:31,200
tôi đã sử dụng Bootstrap Social để đạt được điều tương tự.

219
00:15:31,200 --> 00:15:34,920
Điều đó không hoạt động rất tốt với vật liệu Angular,

220
00:15:34,920 --> 00:15:41,170
vì vậy đó là lý do tại sao tôi chỉ cần tạo ra bộ kính Sass của riêng tôi ở đây,

221
00:15:41,170 --> 00:15:46,380
và sau đó thêm vào mã mà tôi cần phải tạo ra những nút đó.

222
00:15:46,380 --> 00:15:48,840
Nếu bạn cần thêm nhiều nút hơn,

223
00:15:48,840 --> 00:15:51,490
sau đó chỉ cần tạo ra nhiều lớp như thế này là tương ứng với

224
00:15:51,490 --> 00:15:54,695
các nút mà bạn muốn thêm vào ứng dụng của bạn.

225
00:15:54,695 --> 00:15:57,355
Vì vậy, điều đó xây dựng chân trang của chúng tôi.

226
00:15:57,355 --> 00:16:01,995
Bây giờ, tiêu đề là phần tiếp theo mà chúng ta sẽ nhắm mục tiêu.

227
00:16:01,995 --> 00:16:04,770
Đi đến tiêu đề, sẽ mở

228
00:16:04,770 --> 00:16:09,320
tập tin mẫu thành phần tiêu đề và bạn thấy những gì nó chứa.

229
00:16:09,320 --> 00:16:11,565
Chúng tôi sẽ thay thế này bằng

230
00:16:11,565 --> 00:16:16,115
mẫu mà tôi đã đưa ra cho bạn trong các hướng dẫn tiếp theo ở đây.

231
00:16:16,115 --> 00:16:19,495
Vì vậy, chỉ cần đi trước và cắt và dán mã đó vào đây,

232
00:16:19,495 --> 00:16:22,730
bởi vì điều này không có gì để làm cụ thể với góc cạnh.

233
00:16:22,730 --> 00:16:26,620
Vì vậy, đó là lý do tại sao tôi chỉ cho phép bạn cắt và dán mã trực tiếp từ đó,

234
00:16:26,620 --> 00:16:29,060
tiết kiệm thời gian cho chúng tôi.

235
00:16:29,060 --> 00:16:35,300
Bạn có thể thấy rằng bây giờ tôi đã thay thế tiêu đề mẫu với một số mã ở đây.

236
00:16:35,300 --> 00:16:37,230
Tương tự như vậy,

237
00:16:37,230 --> 00:16:43,100
trong khi chúng tôi đang ở đó, chúng tôi cũng sẽ thêm vào một số mã SCSS cho tập tin header.components.scss của tôi ở đây,

238
00:16:43,100 --> 00:16:46,550
chỉ cần đi và sao chép mã từ các hướng dẫn.

239
00:16:46,550 --> 00:16:48,845
Tương tự như vậy, trong khi chúng tôi đang ở đó,

240
00:16:48,845 --> 00:16:55,810
chúng tôi sẽ thêm vào một vài lớp SCSS để tập tin Styles.scss chính của tôi.

241
00:16:55,810 --> 00:16:58,480
Vì vậy, vào tập tin Styles.scss chính này,

242
00:16:58,480 --> 00:17:03,850
tôi sẽ thêm vào màu phụ và một vài lớp khác vào này.

243
00:17:03,850 --> 00:17:09,650
Vì vậy, chúng ta hãy dán vào mã từ các hướng dẫn mà tôi đã cung cấp cho bạn.

244
00:17:09,650 --> 00:17:14,425
Vì vậy, bản cập nhật cho các tập tin Styles.scss bây giờ đã hoàn tất,

245
00:17:14,425 --> 00:17:18,165
vì vậy tôi đã thêm vào trong một số màu sắc ở đây và trộn trong đó,

246
00:17:18,165 --> 00:17:23,230
và sau đó ở dưới cùng tôi đã thêm vào trong một vài lớp học ở đây

247
00:17:23,230 --> 00:17:28,975
giúp tôi khi tôi đang thiết kế mẫu của tôi cho ứng dụng góc cạnh của tôi.

248
00:17:28,975 --> 00:17:30,680
Vì vậy, tất cả những thay đổi này, chúng

249
00:17:30,680 --> 00:17:32,120
ta hãy lưu các thay đổi,

250
00:17:32,120 --> 00:17:36,435
hãy xem nhanh như thế nào tiêu đề của tôi trông giống như bây giờ trong ứng dụng,

251
00:17:36,435 --> 00:17:41,735
và sau đó chúng tôi sẽ trở lại và nhanh chóng truy cập lại mã mà chúng tôi vừa bao gồm ở đây.

252
00:17:41,735 --> 00:17:45,775
Quay trở lại ứng dụng Angular của tôi trong trình duyệt,

253
00:17:45,775 --> 00:17:51,820
bây giờ bạn thấy thanh công cụ xuất hiện lại trong tiêu đề ở đây,

254
00:17:51,820 --> 00:17:56,980
cùng với một vài liên kết trong

255
00:17:56,980 --> 00:18:03,260
đó và sau đó một hình ảnh đại diện cho logo cho nhà hàng của tôi,

256
00:18:03,260 --> 00:18:12,095
và sau đó ở đây, bạn có một cái gì đó mà chúng tôi sử dụng các tập tin jumbotron trong khóa học trước đó.

257
00:18:12,095 --> 00:18:15,890
Tôi sẽ chỉ sử dụng một lớp học gọi là jumbotron để tạo ra điều này

258
00:18:15,890 --> 00:18:20,015
trong ứng dụng Angular cũng,

259
00:18:20,015 --> 00:18:24,545
vì vậy ở phía bên trái tôi có thông tin nhà hàng của tôi và

260
00:18:24,545 --> 00:18:30,280
logo của nhà hàng và để lại cho bản thân mình một số không gian ở đây để thêm một cái gì đó trong tương lai.

261
00:18:30,280 --> 00:18:36,610
Vì vậy, ở đây bạn thấy ứng dụng của tôi bây giờ hình thành với một tiêu đề,

262
00:18:36,610 --> 00:18:38,745
với một số liên kết trong đó.

263
00:18:38,745 --> 00:18:41,070
Bây giờ, chúng ta sẽ sử dụng các liên kết này trong

264
00:18:41,070 --> 00:18:46,145
vài bài tập tiếp theo để thiết lập ứng dụng Angular của tôi,

265
00:18:46,145 --> 00:18:52,220
và sau đó trình đơn ngồi ở giữa và sau đó xuống dưới đây chân trang của tôi.

266
00:18:52,220 --> 00:18:55,100
Đi đến tập tin mẫu thành phần tiêu đề của tôi,

267
00:18:55,100 --> 00:19:00,830
bây giờ bạn có thể xem làm thế nào tôi đã tạo thanh công cụ với các nút bổ sung ở đây.

268
00:19:00,830 --> 00:19:03,740
Vì vậy, bạn nhớ lại rằng chúng tôi đã có thanh công cụ

269
00:19:03,740 --> 00:19:08,035
đã được sử dụng trong tập tin mẫu thành phần ứng dụng,

270
00:19:08,035 --> 00:19:16,845
tôi đã cắt nó từ đó và thay vào đó sử dụng thanh công cụ vào tiêu đề mẫu ở đây.

271
00:19:16,845 --> 00:19:18,915
Bây giờ, bên trong thanh công cụ này,

272
00:19:18,915 --> 00:19:26,260
tôi đã bao gồm một số liên kết với các lớp nút áp dụng cho nó và đây là

273
00:19:26,260 --> 00:19:34,745
những gì cho phép tôi để tạo ra các liên kết trong thanh công cụ như một trình đơn cho ứng dụng web của tôi.

274
00:19:34,745 --> 00:19:40,855
Dưới đây, tôi đã tạo ra một div với container lớp và jumbotron.

275
00:19:40,855 --> 00:19:46,650
Đó là lý do tại sao tôi thêm các lớp chứa và jumbotron vào tập tin SCSS của tôi,

276
00:19:46,650 --> 00:19:50,480
để tôi có thể sử dụng chúng trong các mẫu của tôi ở đây.

277
00:19:50,480 --> 00:19:51,910
Vì vậy, mà một lần nữa,

278
00:19:51,910 --> 00:20:01,025
tôi áp dụng và một số thuộc tính bố trí flex ở đây để giúp tôi thiết kế màn hình ở đó.

279
00:20:01,025 --> 00:20:06,500
Sau đó, bạn có thể thấy làm thế nào tôi đã sử dụng một vài divs ở đây với

280
00:20:06,500 --> 00:20:13,815
các thuộc tính FXFlex áp dụng cho phù hợp để tạo ra giao diện người dùng,

281
00:20:13,815 --> 00:20:16,385
cho ứng dụng của tôi ở đây.

282
00:20:16,385 --> 00:20:22,400
Vì vậy, dành một chút thời gian ở đây để có một cái nhìn nhanh vào mã này ở đây để

283
00:20:22,400 --> 00:20:29,130
hiểu nhanh cách bố trí của tôi cho tiêu đề mẫu của tôi đã được tạo ra.

284
00:20:29,130 --> 00:20:30,620
Nó không phải là phức tạp,

285
00:20:30,620 --> 00:20:32,825
một khi bạn đã hoàn thành khóa học Bootstrap,

286
00:20:32,825 --> 00:20:35,619
điều này không phải là khó hiểu.

287
00:20:35,619 --> 00:20:39,520
Trên đường đi, bạn cũng đang học cách bố trí uốn cong góc cạnh và sau đó

288
00:20:39,520 --> 00:20:44,105
cũng là các thành phần vật liệu góc cạnh ở đây.

289
00:20:44,105 --> 00:20:48,619
Đi đến tập tin SCSS cho các thành phần tiêu đề,

290
00:20:48,619 --> 00:20:52,300
bạn có thể thấy rằng tôi đã thêm vào trong một số màu sắc ở đây và sau đó một hỗn hợp

291
00:20:52,300 --> 00:20:56,100
trong và sau đó cũng được thêm vào trong một lớp jumbotron ở đây.

292
00:20:56,100 --> 00:20:58,275
Bây giờ, lớp chứa không có ở đây,

293
00:20:58,275 --> 00:21:01,315
lớp chứa nằm trong tập tin style chính.

294
00:21:01,315 --> 00:21:03,600
Bởi vì lớp chứa là một cái gì đó mà tôi sẽ

295
00:21:03,600 --> 00:21:06,010
sử dụng cho nhiều người trong số các mẫu có.

296
00:21:06,010 --> 00:21:11,800
Vì vậy, đó là lý do tại sao, tôi đã thêm trong lớp chứa vào tập tin Styles.scss

297
00:21:11,800 --> 00:21:18,020
đó là tập tin phổ biến cho toàn bộ ứng dụng góc cạnh của tôi.

298
00:21:18,020 --> 00:21:21,375
Vì vậy, có tôi đã thêm vào trong một số màu sắc bổ sung ở đây,

299
00:21:21,375 --> 00:21:24,670
và tôi cũng đã tạo ra một hỗn hợp

300
00:21:24,670 --> 00:21:26,759
ở đây, và sau đó thêm vào trong container

301
00:21:26,759 --> 00:21:29,980
, nền chính,

302
00:21:29,980 --> 00:21:33,640
và màu nền giọng, và sau đó tôi cũng đang sử dụng một lớp gọi là flexes spacer,

303
00:21:33,640 --> 00:21:37,575
mà tôi sẽ sử dụng trong một trong các bài tập sau này.

304
00:21:37,575 --> 00:21:41,400
Tất cả các bước này là để chuẩn bị cho những gì sẽ xảy

305
00:21:41,400 --> 00:21:45,150
ra trong một số bài tập tiếp theo.

306
00:21:45,150 --> 00:21:51,920
Ứng dụng Angular của tôi bây giờ đã có một hình dạng tốt về cách giao diện người dùng được đặt ra,

307
00:21:51,920 --> 00:21:58,155
để bây giờ tôi có thể bắt đầu giới thiệu nhiều tính năng mới hơn cho góc cạnh.

308
00:21:58,155 --> 00:22:02,005
Trả thêm một lần nữa vào ứng dụng Angular của tôi trong trình duyệt,

309
00:22:02,005 --> 00:22:08,450
hãy để tôi xem ứng dụng này trông như thế nào ở các kích cỡ màn hình khác nhau.

310
00:22:08,450 --> 00:22:11,430
Vì vậy, đây là kích thước màn hình máy tính để bàn tiêu chuẩn,

311
00:22:11,430 --> 00:22:17,020
vì vậy hãy di chuyển đến kích thước màn hình nhỏ hơn và sau đó xem ứng dụng trông như thế nào.

312
00:22:17,020 --> 00:22:21,690
Vì vậy, đây là một kích thước màn hình iPhone 6 Plus,

313
00:22:21,690 --> 00:22:28,865
vì vậy bạn có thể thấy cách bố trí là khác nhau cho kích thước màn hình nhỏ hơn.

314
00:22:28,865 --> 00:22:35,115
Vì vậy, tiêu đề của tôi là ngay trên đó và trình đơn của tôi ở dưới cùng và chân trang ở đây,

315
00:22:35,115 --> 00:22:38,955
nhận thấy làm thế nào các phần khác nhau của chân trang đã

316
00:22:38,955 --> 00:22:43,485
được đặt ra khác nhau cho kích thước màn hình nhỏ thêm.

317
00:22:43,485 --> 00:22:49,950
Đây là ứng dụng tương tự trong chế độ phong cảnh hoặc iPhone 6 Plus,

318
00:22:49,950 --> 00:22:58,205
vì vậy bạn có thể thấy rằng tiêu đề của tôi được đặt ra như thế và menu ở đó và chân trang.

319
00:22:58,205 --> 00:23:04,230
Vì vậy, điều đó cho bạn thấy rằng tôi đã tận dụng bố cục flex góc

320
00:23:04,230 --> 00:23:10,510
để có thể tạo ra các bố cục khác nhau cho các kích thước màn hình khác nhau.

321
00:23:10,510 --> 00:23:14,395
Vì vậy, một lần nữa, nếu bạn đã tham gia khóa học Bootstrap trước đó,

322
00:23:14,395 --> 00:23:19,420
bạn sẽ bắt đầu thấy cách thiết kế đáp ứng với

323
00:23:19,420 --> 00:23:25,950
bố cục flex góc cũng có thể được sử dụng để đạt được kết quả tương tự.

324
00:23:25,950 --> 00:23:29,790
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.

325
00:23:29,790 --> 00:23:35,140
Trong bài tập này, chúng tôi đã chuẩn bị ứng dụng Angular của chúng tôi và làm cho

326
00:23:35,140 --> 00:23:40,645
nó sẵn sàng cho phần còn lại của các bài tập trong khóa học này.

327
00:23:40,645 --> 00:23:47,300
Đây cũng là thời điểm tốt để bạn thực hiện một cam kết git với tiêu đề tin nhắn và chân trang.