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

2
00:00:04,599 --> 00:00:09,853
Chúng tôi vừa tạo ra ứng dụng Angular đầu tiên của chúng tôi trong bài tập trước đó.

3
00:00:09,853 --> 00:00:13,758
Bạn phải tự hỏi, một ứng dụng Angular điển hình trông như thế nào? Cấu trúc

4
00:00:13,758 --> 00:00:16,345
và kiến trúc của nó là gì, và

5
00:00:16,345 --> 00:00:18,669
làm thế nào để chúng ta xây dựng một ứng dụng Angular?

6
00:00:19,800 --> 00:00:25,560
Hãy nói về những điều này từng bước, bắt đầu với bài giảng này.

7
00:00:27,390 --> 00:00:34,280
Xem nhanh thư mục ứng dụng, trong trình soạn thảo.

8
00:00:34,280 --> 00:00:39,469
Bạn nhận thấy ngay lập tức rằng Angular CLI đã tạo ra một loạt các

9
00:00:40,530 --> 00:00:45,820
tập tin trong các thư mục khác nhau trong ứng dụng của chúng tôi.

10
00:00:47,260 --> 00:00:50,240
Những tệp này chứa những gì?

11
00:00:50,240 --> 00:00:53,930
Làm thế nào để họ tạo thành một ứng dụng Angular?

12
00:00:53,930 --> 00:00:58,832
Hãy kiểm tra chúng từng bước để hiểu kiến trúc điển hình của

13
00:00:58,832 --> 00:01:00,556
một ứng dụng Angular.

14
00:01:00,556 --> 00:01:03,688
Như chúng ta đã nhận ra,

15
00:01:03,688 --> 00:01:08,828
các ứng dụng Angular được xây dựng như là một sự kết hợp

16
00:01:08,828 --> 00:01:13,727
của HTML và một trong hai TypeScript hoặc JavaScript.

17
00:01:13,727 --> 00:01:18,735
Trong khóa học này, chúng tôi sẽ sử dụng TypeScript như là ngôn ngữ của sự lựa chọn để

18
00:01:18,735 --> 00:01:21,169
xây dựng ứng dụng Angular của chúng tôi.

19
00:01:21,169 --> 00:01:25,146
Bản thân Angular bao gồm một số thư viện,

20
00:01:25,146 --> 00:01:30,585
một số thư viện được gọi là thư viện và một số khác là thư viện tùy chọn.

21
00:01:30,585 --> 00:01:35,389
Tùy thuộc vào loại của một ứng dụng Angular mà bạn đang cố gắng để xây dựng,

22
00:01:35,389 --> 00:01:38,910
bạn sẽ bao gồm một số trong số này vào ứng dụng của bạn.

23
00:01:38,910 --> 00:01:44,510
Như chúng ta đã học được, Angular là một framework JavaScript và

24
00:01:44,510 --> 00:01:48,610
chúng tôi sẽ tận dụng nó để xây dựng ứng dụng của chúng tôi.

25
00:01:49,715 --> 00:01:56,800
Để tóm tắt, ứng dụng Angular là mô-đun trong bản chất của nó và sẽ bao gồm

26
00:01:56,800 --> 00:02:03,160
một số thành phần, cùng với các mẫu của họ, bao gồm các ứng dụng.

27
00:02:03,160 --> 00:02:09,090
Không chỉ vậy, các thành phần này, và các phần khác của ứng dụng Angular,

28
00:02:09,090 --> 00:02:13,060
như các dịch vụ, sẽ được tổ chức thành các mô-đun.

29
00:02:13,060 --> 00:02:18,892
Và các mô-đun này, lần lượt, sẽ được sử dụng bởi các mô-đun cấp cao hơn.

30
00:02:18,892 --> 00:02:23,889
Vì vậy, bạn có thể nhìn vào một ứng dụng Angular là một

31
00:02:23,889 --> 00:02:27,822
kiến trúc mô-đun với một mô-đun gốc ở trên cùng,

32
00:02:27,822 --> 00:02:34,966
mà có sự giúp đỡ của các mô-đun khác được tổ chức vào hệ thống phân cấp mô hình của bạn.

33
00:02:34,966 --> 00:02:41,170
Hãy kiểm tra ứng dụng của chúng tôi để hiểu làm thế nào điều này được tạo ra.

34
00:02:41,170 --> 00:02:45,550
Trước khi chúng tôi tiếp tục, mô-đun gốc theo mặc định

35
00:02:45,550 --> 00:02:50,810
trong Angular thường được đặt tên là mô-đun ứng dụng.

36
00:02:50,810 --> 00:02:55,970
Đi đến mã của chúng tôi, chúng ta hãy bắt đầu cuộc hành trình của chúng tôi và index.html.

37
00:02:55,970 --> 00:03:03,519
Vì vậy, trong tập tin index.html này, bạn có thể thấy rằng chúng ta có mã html điển hình ở đây,

38
00:03:03,519 --> 00:03:09,079
cùng với dòng đặc biệt này mà nói app-root.

39
00:03:09,079 --> 00:03:15,270
Bạn ngay lập tức nhận ra chúng, điều này không giống như một thẻ HTML điển hình.

40
00:03:15,270 --> 00:03:20,130
Vì vậy, chúng ta hãy bắt đầu bằng cách tự hỏi mình câu hỏi, điều này

41
00:03:20,130 --> 00:03:25,970
là gì, và tại sao nó được bao gồm trong trang index.html?

42
00:03:25,970 --> 00:03:31,090
Như chúng ta đã thấy, một ứng dụng Angular điển hình

43
00:03:31,090 --> 00:03:35,490
là một hệ thống phân cấp của các mô-đun với một mô-đun gốc.

44
00:03:35,490 --> 00:03:40,660
Ứng dụng Angular của bạn được bootstrapped bằng cách bootstrapping module gốc

45
00:03:40,660 --> 00:03:42,520
để bắt đầu ứng dụng của bạn.

46
00:03:42,520 --> 00:03:46,430
Vậy làm thế nào để chúng ta bootstrap một ứng dụng Angular?

47
00:03:46,430 --> 00:03:53,566
Chúng tôi đã thấy trang index.html, và bạn đã thấy một phần tử có tên là app-root.

48
00:03:53,566 --> 00:03:58,306
Vì vậy, hãy tự hỏi mình một vài câu hỏi nữa.

49
00:03:58,306 --> 00:04:03,102
Một người bạn đồng hành với trang index.html là tệp.t chính.t.

50
00:04:03,102 --> 00:04:07,602
Nếu bạn mở tập tin đó, bạn sẽ thấy rằng nó chứa một tập hợp

51
00:04:07,602 --> 00:04:12,790
các báo cáo nhập khẩu trong TypeScript, như được viết ở đây.

52
00:04:12,790 --> 00:04:16,460
Chúng ta không đi sâu quá nhiều vào các chi tiết, nhưng

53
00:04:16,460 --> 00:04:20,160
tôi sẽ quay lại để giải thích điều này trong một thời gian ngắn.

54
00:04:20,160 --> 00:04:21,652
Nhưng đặc biệt,

55
00:04:21,652 --> 00:04:27,017
hãy để tôi thu hút sự chú ý của bạn đến dòng cụ thể này trong tập tin.t chính. Trong

56
00:04:27,017 --> 00:04:31,600
đó nói PlatformBrowserDynamic () .BootStrapModule

57
00:04:31,600 --> 00:04:36,277
và sau đó lưu ý các tham số ở đây, mà nói (AppModule).

58
00:04:36,277 --> 00:04:41,075
Vì vậy, như tôi đã đề cập, trước đó mô-đun ứng dụng là

59
00:04:41,075 --> 00:04:45,985
tên điển hình được đặt cho mô-đun gốc trong một ứng dụng Angular.

60
00:04:45,985 --> 00:04:48,643
Nếu bạn nhìn vào hệ thống phân cấp tệp,

61
00:04:48,643 --> 00:04:52,867
bạn đã thấy một tệp có tên là app_module.ts.

62
00:04:52,867 --> 00:04:57,131
Chúng tôi sẽ truy cập vào tập tin đó trong một thời gian ngắn để xem những gì nó chứa.

63
00:04:57,131 --> 00:04:59,877
Bây giờ, trở lại với những nhập khẩu này,

64
00:04:59,877 --> 00:05:05,250
bạn có thể thấy rằng chúng ta hãy lấy ví dụ về nhập khẩu đầu tiên ở đây.

65
00:05:05,250 --> 00:05:10,330
Nó nói nhập EnableProdMode từ '@angular /core'.

66
00:05:10,330 --> 00:05:15,740
Vì vậy, những gì điều này xác định là chúng tôi sẽ nhập

67
00:05:15,740 --> 00:05:19,970
mô-đun cụ thể này từ thư viện lõi Angular.

68
00:05:19,970 --> 00:05:24,820
Và tương tự, bạn thấy thứ hai nói nhập khẩu PlatFormBrowserDynamic

69
00:05:24,820 --> 00:05:28,040
từ '@angular /platform-browser-dynamic'.

70
00:05:28,040 --> 00:05:32,500
Vì vậy, từ thư viện này bạn đang nhập mô-đun này vào vị trí.

71
00:05:32,500 --> 00:05:37,896
Bây giờ, mô-đun PlatformBrowserDynamic cho phép bạn khởi động

72
00:05:37,896 --> 00:05:44,100
ứng dụng Angular của bạn bằng cách lấy mô-đun gốc của bạn như là một tham số.

73
00:05:44,100 --> 00:05:51,237
Rõ ràng có rất nhiều tập tin khác trong thư mục này và các thư mục con ở đó.

74
00:05:51,237 --> 00:05:55,534
Chúng ta đừng quan tâm đến bản thân mình quá nhiều về họ vào lúc này.

75
00:05:55,534 --> 00:05:59,900
Chúng tôi sẽ tìm hiểu về một số trong số họ khi chúng tôi đi cùng trong khóa học này.

76
00:05:59,900 --> 00:06:05,868
Bây giờ, Angular CLI giúp tạo ra hệ thống phân cấp của các thư mục và

77
00:06:05,868 --> 00:06:09,848
tập tin, với các cài đặt cần thiết

78
00:06:09,848 --> 00:06:16,768
để bạn có thể khởi động ứng dụng góc cạnh của bạn và bắt đầu.

79
00:06:16,768 --> 00:06:20,233
Làm điều này bằng tay là một nhiệm vụ tẻ nhạt.

80
00:06:20,233 --> 00:06:24,811
Vì vậy, Angular CLI đơn giản hóa việc chuẩn bị

81
00:06:24,811 --> 00:06:29,460
thư mục cho ứng dụng Angular của bạn.

82
00:06:29,460 --> 00:06:36,210
Vì vậy, một lần nữa, đi đến tập tin app_module.ts.

83
00:06:36,210 --> 00:06:41,820
Như tôi đã đề cập, đây là mô-đun gốc cho ứng dụng Angular của bạn.

84
00:06:41,820 --> 00:06:47,912
Bây giờ thông thường, mô-đun gốc sẽ được đặt tên như tập tin app.module,

85
00:06:47,912 --> 00:06:51,915
nhưng đó chỉ là một tên được đề xuất trong Angular.

86
00:06:51,915 --> 00:06:57,627
Bạn sẽ thấy rằng nhiều tập tin cấu thành một ứng dụng Angular,

87
00:06:57,627 --> 00:07:01,297
có những cách đề xuất để đặt tên cho những tập tin đó.

88
00:07:01,297 --> 00:07:05,889
Khi chúng ta đi qua khóa học, chúng ta sẽ tìm hiểu cụ thể về từng

89
00:07:05,889 --> 00:07:06,720
tập tin này.

90
00:07:06,720 --> 00:07:11,032
Vì vậy, tham gia một cái nhìn vào nội dung của app_module.t,

91
00:07:11,032 --> 00:07:15,790
bên trong đó bạn thấy một tập hợp các báo cáo nhập khẩu ở đó.

92
00:07:15,790 --> 00:07:19,213
Lấy một cái nhìn nhanh vào chúng nó nói import {BrowserModule} từ

93
00:07:19,213 --> 00:07:21,740
'@angular -platform-browser'.

94
00:07:21,740 --> 00:07:25,039
Nhập {NGModule} từ '@angular /core'.

95
00:07:25,039 --> 00:07:29,550
Và NGModule là một mô-đun góc cạnh.

96
00:07:29,550 --> 00:07:34,070
Chúng ta sẽ tìm hiểu thêm một chút về nó sau.

97
00:07:34,070 --> 00:07:38,532
Ngoài ra, bạn thấy một tuyên bố nhập khẩu khác ở đây,

98
00:07:38,532 --> 00:07:44,159
cho biết import {AppComponent} from '. /app.component '.

99
00:07:44,159 --> 00:07:47,309
Và nhìn vào các tập tin ở đây,

100
00:07:47,309 --> 00:07:52,141
bạn đã thấy một app.component.tsfileware, và

101
00:07:52,141 --> 00:07:58,863
sau đó một số tập tin khác ở đây, bao gồm một app.component card.html,

102
00:07:58,863 --> 00:08:02,972
một app.component.acss, và các tập tin khác.

103
00:08:02,972 --> 00:08:10,939
Bây giờ, tuyên bố này xác định rằng mô-đun gốc này sẽ bao gồm thành phần này,

104
00:08:10,939 --> 00:08:17,640
và sẽ tạo thành lời khen gốc của ứng dụng Angular của bạn.

105
00:08:17,640 --> 00:08:22,450
Một ứng dụng Angular điển hình, như chúng ta đã thấy, bao gồm một số

106
00:08:22,450 --> 00:08:27,330
mô-đun với mô-đun gốc là mô-đun chính,

107
00:08:27,330 --> 00:08:31,360
giúp bạn khởi động ứng dụng Angular của bạn.

108
00:08:31,360 --> 00:08:38,970
Mô-đun gốc là một mô-đun Angular với một tính năng, hoặc là một lớp.

109
00:08:38,970 --> 00:08:44,690
Vì vậy, đây là nơi bạn thấy việc sử dụng một lớp TypeScript ở đây,

110
00:08:44,690 --> 00:08:49,380
vì vậy nếu bạn đi xuống vào các mô-đun màu đỏ xuống dưới đây bạn sẽ thấy

111
00:08:49,380 --> 00:08:53,485
tuyên bố này được gọi là lớp xuất khẩu AppModule.

112
00:08:53,485 --> 00:08:59,550
TypeScript thêm các lớp vào mã JavaScript điển hình của bạn.

113
00:08:59,550 --> 00:09:03,085
Nếu bạn chỉ quen thuộc với JavaScript ES-5,

114
00:09:03,085 --> 00:09:06,873
thì các lớp học vẫn chưa được giới thiệu ở đó, nhưng

115
00:09:06,873 --> 00:09:11,942
các phiên bản JavaScript mới hơn sẽ giới thiệu sự hỗ trợ cho các lớp học.

116
00:09:11,942 --> 00:09:14,971
TypeScript cũng có hỗ trợ cho các lớp học.

117
00:09:14,971 --> 00:09:18,651
Vì vậy, nếu bạn có kinh nghiệm với lập trình hướng đối tượng,

118
00:09:18,651 --> 00:09:21,139
bạn đã quen thuộc với các lớp học.

119
00:09:21,139 --> 00:09:27,106
Vì vậy, loại phương pháp tiếp cận đó đang được đưa vào JavaScript với sự ra đời

120
00:09:27,106 --> 00:09:31,750
của các lớp học trong TypeScript và các phiên bản tương lai của JavaScript.

121
00:09:31,750 --> 00:09:37,028
Ngoài ra bạn sẽ nhận thấy rằng lớp này có

122
00:09:37,028 --> 00:09:42,314
một trang trí Ngmodule liên kết với điều đó.

123
00:09:42,314 --> 00:09:47,312
Vì vậy, một decorator, một lần nữa, một chức năng của

124
00:09:47,312 --> 00:09:51,874
nó sửa đổi các lớp JavaScript.

125
00:09:51,874 --> 00:09:59,254
Chúng ta sẽ thấy việc sử dụng trang trí ở nhiều nơi trong ứng dụng Angular của chúng tôi.

126
00:09:59,254 --> 00:10:00,980
Đây là một Ngmodule.

127
00:10:00,980 --> 00:10:05,850
Trình trang trí cho phép bạn xác định một số chi tiết về

128
00:10:05,850 --> 00:10:06,797
mô-đun ứng dụng này.

129
00:10:06,797 --> 00:10:12,398
Vì vậy, chức năng decorator này có một

130
00:10:12,398 --> 00:10:18,295
bộ siêu dữ liệu nhất định để giúp bạn mô tả mô-đun này.

131
00:10:18,295 --> 00:10:23,232
Vì vậy, đối tượng siêu dữ liệu này ở đây chứa, như bạn có thể thấy,

132
00:10:23,232 --> 00:10:28,430
khai báo, nhập khẩu, nhà cung cấp, bootstrap.

133
00:10:28,430 --> 00:10:33,080
Và cũng sẽ chứa xuất khẩu nếu mô-đun này đang xuất khẩu một cái gì đó có thể được

134
00:10:33,080 --> 00:10:35,110
sử dụng bởi một mô-đun khác.

135
00:10:35,110 --> 00:10:41,734
Vì điều này xảy ra là mô-đun gốc, chúng tôi không có một xuất khẩu từ mô-đun này.

136
00:10:41,734 --> 00:10:47,418
Vì vậy, thay vào đó chúng tôi chỉ có khai báo, nhập khẩu, nhà cung cấp, và bootstrap.

137
00:10:47,418 --> 00:10:52,243
Vì vậy, ở đây một trong những điều này là khá thẳng về phía trước để hiểu.

138
00:10:52,243 --> 00:10:57,280
Nó chỉ định rằng để bootstrap ứng dụng Angular này,

139
00:10:57,280 --> 00:11:00,713
chúng ta cần phải bootstrap các AppComponent.

140
00:11:00,713 --> 00:11:07,008
Vì vậy, AppComponent là thành phần gốc của ứng dụng Angular của chúng tôi.

141
00:11:07,008 --> 00:11:13,595
Ngoài ra, phần nhập khẩu chỉ định các thuộc tính,

142
00:11:13,595 --> 00:11:22,040
thấy tất cả các mô-đun này cần phải được nhập khẩu để được sử dụng với mô-đun ứng dụng này.

143
00:11:22,040 --> 00:11:25,770
Vì vậy, mô-đun ứng dụng này bây giờ phụ thuộc vào các mô-đun khác.

144
00:11:25,770 --> 00:11:30,917
Vì vậy, đây là những mô-đun sẽ được nhập khẩu vào các mô-đun ứng dụng như là

145
00:11:30,917 --> 00:11:36,494
một phần của hệ thống phân cấp, do đó lý do tại sao chúng tôi nhập các mô-đun này lên đây.

146
00:11:36,494 --> 00:11:38,451
Vì vậy, khi bạn nhập các mô-đun,

147
00:11:38,451 --> 00:11:43,324
bạn đang chỉ định ở đây nói rằng mô-đun ứng dụng sẽ sử dụng mô-đun này.

148
00:11:43,324 --> 00:11:48,462
Vì vậy, thuộc tính import xác định những mô-đun cần phải được nhập khẩu hoặc

149
00:11:48,462 --> 00:11:53,040
những mô-đun mà trên đó mô-đun cụ thể này là phụ thuộc vào.

150
00:11:53,040 --> 00:11:58,398
Các khai báo ở đây, thuộc tính khai báo,

151
00:11:58,398 --> 00:12:02,940
là thuộc tính khai báo

152
00:12:02,940 --> 00:12:06,910
các lớp view thuộc về mô-đun cụ thể này.

153
00:12:06,910 --> 00:12:10,584
Vì vậy, các lớp view trong trường hợp của một mô-đun Angular

154
00:12:10,584 --> 00:12:15,018
sẽ ở dạng của một trong hai thành phần, chỉ thị, và ống dẫn.

155
00:12:15,018 --> 00:12:20,789
Chúng ta sẽ nói về các chỉ thị và đường ống một chút sau đó trong khóa học này,

156
00:12:20,789 --> 00:12:24,416
chúng ta sẽ nói về các thành phần trong bài học tiếp theo.

157
00:12:24,416 --> 00:12:28,590
Các nhà cung cấp chỉ định tất cả các dịch vụ mà

158
00:12:28,590 --> 00:12:31,753
mô-đun cụ thể này sẽ sử dụng. Các

159
00:12:31,753 --> 00:12:36,592
dịch vụ mà chúng ta sẽ nói về chi tiết hơn một chút

160
00:12:36,592 --> 00:12:39,235
trong mô-đun tuần tới.

161
00:12:39,235 --> 00:12:42,510
Chúng tôi sẽ nói thêm chi tiết về các dịch vụ, cách chúng tôi tạo ra chúng,

162
00:12:42,510 --> 00:12:46,810
và cách chúng tôi có thể sử dụng chúng với ứng dụng Angular của chúng tôi.

163
00:12:46,810 --> 00:12:52,091
Để tóm tắt những gì chúng tôi đã học được cho đến nay, chúng tôi nhận ra rằng một mô-đun

164
00:12:52,091 --> 00:12:57,373
trong một ứng dụng Angular có thể bao gồm một tập hợp các thành phần và

165
00:12:57,373 --> 00:13:02,671
dịch vụ sẽ được yêu cầu của mô-đun này bằng cách nhập chúng.

166
00:13:02,671 --> 00:13:09,461
Và chúng sẽ được khai báo bằng cách sử dụng tài sản khai báo

167
00:13:09,461 --> 00:13:15,220
của trình trang trí Ngmodule trong mô-đun ứng dụng của chúng tôi.

168
00:13:15,220 --> 00:13:19,845
Bây giờ, các thành phần này có thể phụ thuộc vào

169
00:13:19,845 --> 00:13:24,178
các thành phần khác, dịch vụ, hoặc chỉ thị, hoặc

170
00:13:24,178 --> 00:13:29,115
đường ống, như chúng ta sẽ thấy trong phần còn lại của khóa học cụ thể này.

171
00:13:29,115 --> 00:13:37,212
Vì vậy, với điều này chúng tôi có một ý tưởng thô về cách một ứng dụng Angular điển hình được cấu trúc.

172
00:13:37,212 --> 00:13:42,247
Quay trở lại mã của chúng tôi, bây giờ là thời gian để sử dụng để kiểm tra

173
00:13:42,247 --> 00:13:48,691
tệp app.component.t này, và tệp app.component.html.

174
00:13:48,691 --> 00:13:53,502
Trong đó tuyên bố mẫu cho thành phần của chúng tôi,

175
00:13:53,502 --> 00:13:57,022
và tập tin app.component.t,

176
00:13:57,022 --> 00:14:02,547
trong đó xác định phần TypeScript của thành phần của chúng tôi.

177
00:14:02,547 --> 00:14:08,157
Bây giờ, chúng ta sẽ làm điều đó trong bài học tiếp theo, nơi chúng ta sẽ đối phó với các thành phần và

178
00:14:08,157 --> 00:14:13,436
cách chúng ta có thể tạo ra các thành phần mới và thêm chúng vào ứng dụng Angular của chúng tôi.

179
00:14:13,436 --> 00:14:16,815
[ NHẠC]