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

2
00:00:04,792 --> 00:00:10,490
Chào mừng bạn đến với khóa học này về Frameworks JavaScript Front-End: Góc.

3
00:00:10,490 --> 00:00:16,178
Đây là khóa học thứ hai trong chuyên môn hóa trên web đầy đủ và các

4
00:00:16,178 --> 00:00:19,840
ứng dụng di động đa nền tảng.

5
00:00:19,840 --> 00:00:25,830
Khóa học này đề cập đến các framework JavaScript, Angular nói riêng.

6
00:00:25,830 --> 00:00:30,070
Bạn phải tự hỏi, là nó Góc hai, hoặc là nó Góc?

7
00:00:30,070 --> 00:00:34,940
Chúng tôi sẽ làm rõ rằng trong bài học đầu tiên về giới thiệu Angular

8
00:00:34,940 --> 00:00:35,740
trong khóa học này.

9
00:00:36,940 --> 00:00:39,390
Tôi rất vui vì bạn đã quyết định tham gia khóa học này.

10
00:00:39,390 --> 00:00:43,141
Và tôi hy vọng bạn sẽ có niềm vui khi trải qua khóa học này.

11
00:00:44,766 --> 00:00:47,181
Trước khi bạn bắt tay vào khóa học này,

12
00:00:47,181 --> 00:00:52,650
tôi muốn đảm bảo rằng bạn có đủ kiến thức về HTML và CSS.

13
00:00:52,650 --> 00:00:59,448
Và cũng có kiến thức làm việc tốt về JavaScript, đặc biệt là ES 5 JavaScript.

14
00:00:59,448 --> 00:01:04,526
Bây giờ, khóa học này chúng tôi sẽ sử dụng Typescript làm ngôn ngữ để

15
00:01:04,526 --> 00:01:07,880
viết các ứng dụng Angular của chúng tôi.

16
00:01:07,880 --> 00:01:11,463
Bây giờ nếu bạn đang tự hỏi tôi nên biết Typescript và

17
00:01:11,463 --> 00:01:15,870
tôi nên biết ES 2015+, phiên bản mới hơn của JavaScript?

18
00:01:15,870 --> 00:01:18,710
Vâng, số dặm của bạn có thể khác nhau.

19
00:01:18,710 --> 00:01:23,050
Cách tiếp cận của tôi để học những ngôn ngữ mới này là sử dụng chúng và

20
00:01:23,050 --> 00:01:24,900
sau đó học trên đường đi.

21
00:01:24,900 --> 00:01:27,230
Vì vậy, đó là những gì chúng tôi sẽ làm trong khóa học này.

22
00:01:27,230 --> 00:01:32,208
Tôi sẽ không giới thiệu rõ ràng bạn với Typescript đặc biệt trong khóa học này.

23
00:01:32,208 --> 00:01:36,884
Nhưng thay vào đó khi chúng tôi viết mã, tôi sẽ minh họa các

24
00:01:36,884 --> 00:01:41,842
tính năng khác nhau của Typescript trong bối cảnh của Angular khi bạn phát triển

25
00:01:41,842 --> 00:01:47,190
ứng dụng Angular, trong các bài tập như một phần của khóa học này.

26
00:01:48,330 --> 00:01:52,630
Một điểm khác mà tôi rất muốn làm rõ ở giai đoạn này

27
00:01:52,630 --> 00:01:57,600
là tôi nhìn vào phát triển web và thiết kế như là hai phần.

28
00:01:57,600 --> 00:02:01,241
Phần đầu tiên là thiết kế Web, trải nghiệm người dùng hoặc thiết kế

29
00:02:01,241 --> 00:02:05,705
Inferface người dùng, thiết kế trực quan, Prototyping, màu sắc,

30
00:02:05,705 --> 00:02:07,232
đồ họa và hoạt hình.

31
00:02:07,232 --> 00:02:10,477
Và tất cả những khía cạnh đó của cách một trang web hoặc

32
00:02:10,477 --> 00:02:15,170
thậm chí một ứng dụng di động nên được thiết kế.

33
00:02:15,170 --> 00:02:18,367
Bây giờ có một khía cạnh khác là xây dựng và

34
00:02:18,367 --> 00:02:22,183
triển khai các ứng dụng web và các ứng dụng di động.

35
00:02:22,183 --> 00:02:25,633
Trong khóa học này, chúng tôi sẽ tập trung nhiều hơn vào việc xây dựng và

36
00:02:25,633 --> 00:02:27,464
triển khai các ứng dụng web.

37
00:02:27,464 --> 00:02:32,450
Nếu bạn đang tìm kiếm khía cạnh thiết kế của thiết kế và phát triển web,

38
00:02:32,450 --> 00:02:36,285
thì đây không phải là khóa học phù hợp với bạn.

39
00:02:36,285 --> 00:02:39,940
Khi tôi nói về việc triển khai, xây dựng và

40
00:02:39,940 --> 00:02:44,440
phát triển các ứng dụng web, chúng ta đang nói về các kỹ

41
00:02:44,440 --> 00:02:50,020
năng học tập cần thiết cho việc dịch một thiết kế thành một mã làm việc.

42
00:02:50,020 --> 00:02:55,310
Vì vậy, ở đây, trong chuyên môn này, chúng tôi đã học được về Bootstrap 4.

43
00:02:55,310 --> 00:02:57,500
Trong khóa học này, chúng ta sẽ tìm hiểu về Angular.

44
00:02:57,500 --> 00:03:01,350
Sau đó, chúng ta sẽ tìm hiểu về Ionic và NativeScript.

45
00:03:01,350 --> 00:03:06,780
Và sau đó cũng phát triển phía máy chủ sử dụng hệ sinh thái Node và Node.

46
00:03:06,780 --> 00:03:10,240
Vì vậy, đó là sự tập trung của khóa học đặc biệt này.

47
00:03:10,240 --> 00:03:16,320
Vì vậy, chúng ta đang nói về mã hóa thực sự, chứ không phải là thiết kế trang web.

48
00:03:16,320 --> 00:03:20,310
Câu hỏi khác sẽ phát sinh trong tâm trí của bạn là những gì chính xác là

49
00:03:20,310 --> 00:03:21,700
phát triển web stack đầy đủ?

50
00:03:21,700 --> 00:03:23,750
Nếu bạn đã tham gia khóa học trước đó,

51
00:03:23,750 --> 00:03:26,540
tôi đã giới thiệu bạn để phát triển web stack đầy đủ.

52
00:03:26,540 --> 00:03:29,930
Nếu bạn không có, bài học đầu tiên trong

53
00:03:29,930 --> 00:03:34,430
khóa học này sẽ là một giới thiệu nhanh chóng về phát triển web stack đầy đủ.

54
00:03:34,430 --> 00:03:39,900
Và chúng tôi sẽ đặt khóa học này trong bối cảnh phát triển web stack đầy đủ.

55
00:03:39,900 --> 00:03:42,830
Vì vậy, đó là lý do tại sao trong khóa học đầu tiên chúng tôi đề cập Bootstrap 4,

56
00:03:42,830 --> 00:03:46,470
trong khóa học này chúng tôi sẽ tập trung vào Angular.

57
00:03:46,470 --> 00:03:50,710
Sau đó, trong khóa học tiếp theo, chúng ta sẽ xem xét Ionic và Cordova để

58
00:03:50,710 --> 00:03:54,590
làm nhân cho phát triển di động.

59
00:03:54,590 --> 00:03:57,350
Sau đó, chúng ta sẽ xem xét NativeScript trong khóa học thứ tư.

60
00:03:57,350 --> 00:04:00,335
Và cuối cùng, chúng ta sẽ xem xét sự phát triển phía máy chủ,

61
00:04:00,335 --> 00:04:05,745
bao gồm cả việc làm lớp logic kinh doanh bằng cách sử dụng hệ sinh thái Node.

62
00:04:05,745 --> 00:04:13,935
Và lớp lưu trữ dữ liệu sử dụng MongoDB trong chuyên môn hóa này.

63
00:04:13,935 --> 00:04:18,265
Khóa học cụ thể này, như bạn mong đợi, tập trung vào Angular.

64
00:04:18,265 --> 00:04:23,391
Bạn sẽ được giới thiệu với các khía cạnh khác nhau của khung Angular thông qua

65
00:04:23,391 --> 00:04:27,520
một tập hợp các bài tập xây dựng trên nhau.

66
00:04:27,520 --> 00:04:32,131
Vì vậy, nó là một chuỗi các bài tập mà tôi sẽ giới thiệu các khái niệm góc khác nhau.

67
00:04:32,131 --> 00:04:37,772
Và sau đó ngay lập tức cho bạn thấy cách chúng tôi áp dụng các khái niệm này trong bối cảnh

68
00:04:37,772 --> 00:04:43,519
của một ứng dụng Angular mà chúng tôi sẽ phát triển trong suốt khóa học này.

69
00:04:43,519 --> 00:04:47,985
Bây giờ trên đường đi, khi chúng tôi thiết kế quan điểm của Angular,

70
00:04:47,985 --> 00:04:54,551
chúng tôi sẽ sử dụng vật liệu Angular, để thực hiện giao diện người dùng của các thành phần Angular của chúng tôi.

71
00:04:54,551 --> 00:05:00,962
Và chúng tôi sẽ làm bố trí bằng cách sử dụng Angular Flex-Layout trong khóa học này.

72
00:05:00,962 --> 00:05:06,280
Thay thế là sử dụng Bootstrap 4 mà chúng ta đã học được trước đó.

73
00:05:06,280 --> 00:05:09,820
Nhưng tôi nhận ra rằng khóa học này cũng sẽ cung cấp cho bạn

74
00:05:09,820 --> 00:05:15,060
một cơ hội để tìm hiểu thêm một khuôn khổ giao diện người dùng phía trước.

75
00:05:15,060 --> 00:05:18,230
Đó là Angular Material và Angular Flex-Layout để

76
00:05:18,230 --> 00:05:22,110
làm chính xác những điều tương tự mà chúng tôi đã thực hiện với Bootstrap 4.

77
00:05:22,110 --> 00:05:28,430
Vì vậy, theo cách đó bạn học được hai cách khác nhau để tiếp cận thiết kế giao diện người dùng

78
00:05:28,430 --> 00:05:35,300
bằng cách sử dụng Bootstrap 4 hoặc sử dụng Angular Material cộng với Angular Flex-Layout.

79
00:05:35,300 --> 00:05:37,880
Chúng tôi cũng sẽ giới thiệu cho bạn những điều cơ bản về TypeScript

80
00:05:37,880 --> 00:05:42,650
thông qua các bài tập khi chúng tôi tăng gấp đôi ứng dụng Angular của chúng tôi.

81
00:05:42,650 --> 00:05:47,346
Khóa học chính nó sẽ được tổ chức thành bốn mô-đun.

82
00:05:47,346 --> 00:05:52,680
Bốn mô-đun được thiết kế để tương ứng với bốn tuần của khóa học này.

83
00:05:52,680 --> 00:05:55,450
Nhưng tất nhiên, hãy để tôi nhấn mạnh với các

84
00:05:55,450 --> 00:05:59,760
bạn rằng các bạn không cần phải chịu áp lực bởi thời hạn mà chúng tôi có trong khóa học này.

85
00:05:59,760 --> 00:06:03,030
Bạn có thể dành thời gian của riêng bạn để đi qua khóa học.

86
00:06:03,030 --> 00:06:07,900
Điều quan trọng hơn là phải hiểu từng khía cạnh của Angular.

87
00:06:07,900 --> 00:06:14,800
Nếu bạn cần thêm thời gian, vui lòng chuyển sang phiên tiếp theo của khóa học này.

88
00:06:14,800 --> 00:06:16,450
Và sau đó tiếp tục.

89
00:06:16,450 --> 00:06:19,950
Tất cả các công việc mà bạn đã hoàn thành trong một phiên sẽ tự động được

90
00:06:19,950 --> 00:06:22,010
chuyển sang phiên tiếp theo của khóa học.

91
00:06:22,010 --> 00:06:27,340
Vì vậy, đừng để thời hạn áp lực bạn phải vội vã để hoàn thành khóa học này.

92
00:06:27,340 --> 00:06:30,290
Bây giờ, khi đưa ra ý tưởng chung,

93
00:06:30,290 --> 00:06:35,810
chúng ta hãy nhìn vào những gì mỗi trong bốn mô-đun sẽ bao gồm trong khóa học này.

94
00:06:35,810 --> 00:06:40,130
Mô-đun đầu tiên sẽ giới thiệu cho bạn về Phát triển Web Full Stack,

95
00:06:40,130 --> 00:06:43,842
ý tưởng chung và chế độ xem hình ảnh lớn.

96
00:06:43,842 --> 00:06:50,230
Ngay sau đó, chúng ta sẽ xem xét một cái nhìn tổng quan ngắn gọn về Git và Node.

97
00:06:50,230 --> 00:06:53,250
Nếu bạn đã thực hiện khóa học Bootstrap 4 trước

98
00:06:53,250 --> 00:06:56,020
đó, sau đó bạn đã bao gồm hai khóa học này đã có trong khóa học trước đó.

99
00:06:56,020 --> 00:06:59,310
Vì vậy, sau đó bạn có thể nhanh chóng bỏ qua

100
00:06:59,310 --> 00:07:03,750
bài học đầu tiên giới thiệu bạn với Angular, phần giới thiệu về Angular.

101
00:07:04,970 --> 00:07:10,020
Sau khi giới thiệu khuôn khổ Angular và sau đó thiết lập

102
00:07:10,020 --> 00:07:15,060
ứng dụng Angular của chúng tôi bằng cách sử dụng vật liệu Angular và Angular Flex-Layout.

103
00:07:15,060 --> 00:07:18,910
Sau đó, chúng tôi sẽ tiếp tục nghiên cứu thêm về các thành phần góc cạnh.

104
00:07:18,910 --> 00:07:23,880
Vai trò của các thành phần Angular trong việc thiết kế một ứng dụng Angular và

105
00:07:23,880 --> 00:07:27,530
thiết kế các quan điểm khác nhau mà sẽ được hỗ trợ trong ứng dụng Angular của bạn là gì.

106
00:07:28,610 --> 00:07:32,990
Điều đó sẽ đưa bạn đến nhiệm vụ đầu tiên trong khóa học này.

107
00:07:32,990 --> 00:07:38,570
Mô-đun thứ hai tập trung vào các dịch vụ Angular,

108
00:07:38,570 --> 00:07:41,110
định tuyến, và các ứng dụng trang đơn.

109
00:07:41,110 --> 00:07:46,220
Chúng tôi xem xét cách phản hồi Angular hỗ trợ truy cập vào dữ liệu và

110
00:07:46,220 --> 00:07:50,210
cách chúng tôi có thể sử dụng các dịch vụ để truy cập dữ liệu.

111
00:07:50,210 --> 00:07:54,160
Hơn nữa, làm thế nào chúng ta có thể sử dụng dữ liệu trong việc thiết kế

112
00:07:55,420 --> 00:08:00,040
quan điểm của chúng tôi cho các thành phần góc khác nhau của chúng tôi.

113
00:08:00,040 --> 00:08:04,240
Vì vậy, đó là nơi mà các khía cạnh ràng buộc dữ liệu đi vào hình ảnh.

114
00:08:04,240 --> 00:08:06,920
Sau đó, chúng ta sẽ xem xét định tuyến Angular và

115
00:08:06,920 --> 00:08:11,200
làm thế nào chúng ta có thể thực hiện các ứng dụng trang đơn trong Angular.

116
00:08:11,200 --> 00:08:13,920
Tôi sẽ giải thích cho bạn những gì một ứng dụng trang đơn là và

117
00:08:13,920 --> 00:08:18,930
sau đó chúng ta sẽ xem xét làm thế nào chúng ta có thể thiết kế một bằng cách sử dụng khuôn khổ Angular.

118
00:08:18,930 --> 00:08:24,060
Và điều đó sẽ đưa bạn đến nhiệm vụ thứ hai trong khóa học này.

119
00:08:24,060 --> 00:08:29,120
Mô-đun thứ ba tập trung vào các dạng góc.

120
00:08:29,120 --> 00:08:32,517
Sau đó, chúng ta sẽ xem xét các hình thức phản ứng góc và

121
00:08:32,517 --> 00:08:36,883
cũng làm thế nào lập trình Angular và Reactive làm việc cùng nhau.

122
00:08:36,883 --> 00:08:40,236
Và cách Angular tận dụng lập trình phản ứng để

123
00:08:40,236 --> 00:08:45,470
thực hiện các hình thức hỗ trợ khác nhau trong ứng dụng Angular.

124
00:08:45,470 --> 00:08:50,324
Vì vậy, chúng ta sẽ xem xét các mẫu định hướng, sau đó chúng ta sẽ xem xét các hình thức Angular Reactive,

125
00:08:50,324 --> 00:08:53,262
sau đó chúng ta sẽ xem xét cách Angular hỗ trợ lời hứa.

126
00:08:53,262 --> 00:08:59,621
Và sau đó cũng có một cái nhìn ngắn gọn

127
00:08:59,621 --> 00:09:07,565
về lập trình phản ứng trong RxJs trong bối cảnh cách Angular tận dụng RxJs để hỗ trợ các tính năng khác nhau trong khuôn khổ.

128
00:09:07,565 --> 00:09:12,130
Điều đó sẽ đưa bạn đến nhiệm vụ thứ ba trong khóa học này.

129
00:09:12,130 --> 00:09:15,980
Module cuối cùng nhìn vào Client-Server Communication.

130
00:09:15,980 --> 00:09:20,060
Làm thế nào ứng dụng Angular của bạn có thể giao tiếp với một máy chủ

131
00:09:20,060 --> 00:09:24,220
cung cấp dữ liệu có thể được lấy từ phía máy chủ và

132
00:09:24,220 --> 00:09:29,120
sau đó được sử dụng để hiển thị các quan điểm trong ứng dụng Angular của bạn.

133
00:09:29,120 --> 00:09:33,370
Tương ứng, chúng ta cũng sẽ xem xét làm thế nào bất kỳ thay đổi nào mà bạn

134
00:09:33,370 --> 00:09:38,020
muốn thực hiện đối với dữ liệu có thể được phản ánh trở lại phía máy chủ,

135
00:09:38,020 --> 00:09:40,340
từ ứng dụng Angular của bạn.

136
00:09:40,340 --> 00:09:44,670
Chúng ta sẽ xem xét Angular và mô-đun HTTP trong Angular.

137
00:09:44,670 --> 00:09:48,731
Chúng ta sẽ xem xét cách REST API được tận dụng để

138
00:09:48,731 --> 00:09:52,171
thiết kế ứng dụng Angular của bạn,

139
00:09:52,171 --> 00:09:57,398
chúng ta cũng sẽ xem xét hoạt hình và chỉ thị trong Angular.

140
00:09:57,398 --> 00:10:00,040
Đặc biệt, chỉ thị thuộc tính trong Angular.

141
00:10:00,040 --> 00:10:04,558
Chúng ta sẽ xem xét các chỉ thị cấu trúc trong mô-đun đầu tiên.

142
00:10:04,558 --> 00:10:10,140
Chúng ta sẽ xem xét thử nghiệm các ứng dụng Angular một thời gian ngắn, và sau đó cuối cùng

143
00:10:10,140 --> 00:10:16,040
nhìn vào cách chúng ta sẽ xây dựng và triển khai ứng dụng Angular của chúng tôi đến một máy chủ.

144
00:10:16,040 --> 00:10:22,030
Và điều đó sẽ đưa bạn đến nhiệm vụ cuối cùng trong khóa học này.

145
00:10:22,030 --> 00:10:27,758
Trên đường đi, chúng tôi cũng có một ca khúc danh dự được xây dựng trong khóa học này.

146
00:10:27,758 --> 00:10:32,440
Nếu bạn muốn làm việc trên dự án của riêng bạn bằng cách sử dụng Angular,

147
00:10:32,440 --> 00:10:37,950
sau đó theo dõi danh dự cung cấp cho bạn cơ hội để làm việc

148
00:10:37,950 --> 00:10:43,470
trên dự án của riêng bạn trong khóa học cụ thể này.

149
00:10:43,470 --> 00:10:48,840
Vì vậy, hãy nhìn vào các ca khúc danh dự, và nếu điều đó bạn quan tâm, bạn cũng có thể theo đuổi

150
00:10:48,840 --> 00:10:53,150
phát triển dự án Angular của riêng bạn trong bối cảnh của khóa học này.

151
00:10:54,190 --> 00:10:58,175
Tôi hy vọng bạn thích trải qua khóa học này và học Angular.

152
00:10:59,500 --> 00:11:04,550
Lời cuối cùng mà tôi sẽ để lại cho các bạn là kiên nhẫn.

153
00:11:04,550 --> 00:11:07,990
Angular đòi hỏi rất nhiều kiên nhẫn để học hỏi.

154
00:11:07,990 --> 00:11:11,020
Sẽ có rất nhiều khái niệm và

155
00:11:11,020 --> 00:11:15,740
công nghệ mà bạn sẽ gặp phải khi bạn trải qua khóa học này.

156
00:11:15,740 --> 00:11:19,620
Xin đừng vội vàng chỉ để hoàn thành khóa học.

157
00:11:19,620 --> 00:11:26,716
Hãy dành thời gian của riêng bạn để hiểu từng bước một trước khi bạn hoàn thành khóa học này.

158
00:11:26,716 --> 00:11:29,987
Tôi hy vọng bạn thích tham gia khóa học này.

159
00:11:29,987 --> 00:11:33,049
[ NHẠC]