1
00:00:04,070 --> 00:00:07,050
Được rồi, được rồi, tôi nghe anh nói rồi.

2
00:00:07,050 --> 00:00:08,280
Hãy tiếp tục với nó,

3
00:00:08,280 --> 00:00:09,835
cho tôi xem một số mã.

4
00:00:09,835 --> 00:00:13,440
Thật vậy, chúng ta sẽ bắt đầu với việc tạo ra

5
00:00:13,440 --> 00:00:17,770
ứng dụng Angular của chúng tôi trong bài tập đầu tiên này.

6
00:00:17,770 --> 00:00:21,145
Chúng tôi sẽ sử dụng giao diện dòng lệnh Angular,

7
00:00:21,145 --> 00:00:28,020
Angular CLI cho giàn giáo ra ứng dụng Angular của chúng tôi trong bài tập này.

8
00:00:28,020 --> 00:00:31,690
Sau đó, khi chúng tôi đi qua phần còn lại của các bài tập trong khóa học này,

9
00:00:31,690 --> 00:00:36,180
chúng tôi sẽ xây dựng ứng dụng Angular của chúng tôi từng bước.

10
00:00:36,180 --> 00:00:44,195
Angular CLI là một cách rất thuận tiện để tạo ra một ứng dụng Angular.

11
00:00:44,195 --> 00:00:48,620
Ứng dụng Angular được tạo ra bởi Angular CLI tuân theo các

12
00:00:48,620 --> 00:00:53,290
hướng dẫn phong cách được đề xuất bởi các nhà phát triển khuôn khổ Angular.

13
00:00:53,290 --> 00:00:56,405
Chúng ta có thể sử dụng Angular CLI để giàn giáo ra

14
00:00:56,405 --> 00:01:00,980
nhiều phần của ứng dụng Angular của chúng tôi bao gồm các thành phần,

15
00:01:00,980 --> 00:01:04,275
các dịch vụ của ứng dụng Angular của chúng tôi.

16
00:01:04,275 --> 00:01:08,480
Angular CLI cũng đi kèm với máy chủ tích hợp riêng của nó,

17
00:01:08,480 --> 00:01:14,405
mà chúng tôi có thể sử dụng để phục vụ lên các ứng dụng Angular khi chúng tôi đang xây dựng nó lên,

18
00:01:14,405 --> 00:01:17,930
và sau đó xem ứng dụng Angular của chúng tôi trong

19
00:01:17,930 --> 00:01:22,870
trình duyệt như là một bản xem trước trực tiếp của ứng dụng của chúng tôi.

20
00:01:22,870 --> 00:01:24,805
Như khi chúng tôi thực hiện thay đổi,

21
00:01:24,805 --> 00:01:28,940
các thay đổi sẽ được phản ánh ngay lập tức vào trình duyệt.

22
00:01:28,940 --> 00:01:33,650
Đó là lý do tại sao tôi đã chọn sử dụng Angular CLI như

23
00:01:33,650 --> 00:01:39,365
cách tiếp cận để xây dựng ứng dụng Angular của chúng tôi trong khóa học này.

24
00:01:39,365 --> 00:01:43,100
Để bắt đầu, hãy đi đến một vị trí thuận tiện trên

25
00:01:43,100 --> 00:01:46,490
máy tính của bạn và tạo một thư mục có tên Angular.

26
00:01:46,490 --> 00:01:52,065
Vì vậy, tôi sẽ bắt đầu di chuyển đến tài liệu của tôi thư mục Coursera.

27
00:01:52,065 --> 00:01:58,260
Đó là nơi tôi lưu trữ tất cả các tập tin của tôi cho khóa học Coursera của tôi,

28
00:01:58,260 --> 00:02:03,230
và sau đó tôi sẽ tạo một thư mục có

29
00:02:03,230 --> 00:02:08,955
tên Angular và sau đó một di chuyển vào thư mục Angular.

30
00:02:08,955 --> 00:02:15,505
Bây giờ, chúng ta sẽ tạo ra ứng dụng Angular của chúng tôi trong thư mục này.

31
00:02:15,505 --> 00:02:21,080
Bước đầu tiên mà chúng tôi thực hiện trong bài tập này là cài đặt CLI Angular.

32
00:02:21,080 --> 00:02:22,525
Vì vậy, tại dấu nhắc,

33
00:02:22,525 --> 00:02:32,700
gõ npm install -g @angular /cli @ 6.2.1.

34
00:02:32,700 --> 00:02:35,430
Bây giờ, bất cứ khi nào tôi cài đặt một mô-đun NPM,

35
00:02:35,430 --> 00:02:39,725
tôi cũng sẽ chỉ định phiên bản chính xác của mô-đun NPM mà tôi đang cài đặt.

36
00:02:39,725 --> 00:02:41,720
Tôi mạnh mẽ thúc giục bạn cài đặt

37
00:02:41,720 --> 00:02:44,930
cùng một phiên bản của mô-đun NPM để bạn có thể đi qua

38
00:02:44,930 --> 00:02:50,680
phần còn lại của bài tập mà không gặp bất kỳ vấn đề với các bài tập.

39
00:02:50,680 --> 00:02:55,700
Vì vậy, trong trường hợp này, tôi đang cài đặt phiên bản 6.2.1 của Angular CLI.

40
00:02:55,700 --> 00:02:58,310
Bây giờ, nếu bạn đang làm điều này trên một máy Mac hoặc Linux,

41
00:02:58,310 --> 00:03:02,565
đừng quên sudo ở phía trước của cài đặt npm.

42
00:03:02,565 --> 00:03:05,095
Quá trình cài đặt sẽ mất một thời gian.

43
00:03:05,095 --> 00:03:08,095
Vì vậy, một khi nó được hoàn thành cài đặt,

44
00:03:08,095 --> 00:03:13,655
sau đó Angular CLI sẽ có sẵn trên dòng lệnh của bạn.

45
00:03:13,655 --> 00:03:15,750
Khi quá trình cài đặt hoàn tất,

46
00:03:15,750 --> 00:03:18,885
bạn có thể kiểm tra và xem CLI Angular đã được cài đặt chưa.

47
00:03:18,885 --> 00:03:20,295
Sau khi cài đặt,

48
00:03:20,295 --> 00:03:25,190
bạn có thể cần phải khởi động lại thiết bị đầu cuối của bạn

49
00:03:25,190 --> 00:03:30,835
để các công cụ Angular CLI có sẵn tại dấu nhắc.

50
00:03:30,835 --> 00:03:35,390
CLI góc có sẵn bằng cách gõ ng tại

51
00:03:35,390 --> 00:03:39,910
dấu nhắc, theo sau là một tập hợp các hướng dẫn bổ sung.

52
00:03:39,910 --> 00:03:46,105
Vì vậy, lệnh đầu tiên mà chúng tôi sẽ thử là ng help,

53
00:03:46,105 --> 00:03:49,820
và điều này sẽ liệt kê một tập hợp tất cả các lệnh khác

54
00:03:49,820 --> 00:03:53,855
mà CLI góc cho phép chúng tôi thực hiện.

55
00:03:53,855 --> 00:03:56,720
Ng như bạn thấy sẽ là tiền tố cho

56
00:03:56,720 --> 00:04:02,040
tất cả các lệnh Angular CLI mà bạn sẽ sử dụng trong khóa học này.

57
00:04:02,840 --> 00:04:09,685
Điều này sẽ liệt kê ra một tập hợp tất cả các tùy chọn mà CLI Angular cung cấp cho chúng tôi.

58
00:04:09,685 --> 00:04:15,895
Chúng ta sẽ học được rất nhiều các lệnh này khi chúng ta trải qua phần còn lại của khóa học này.

59
00:04:15,895 --> 00:04:18,930
Để tạo ra một ứng dụng Angular mới,

60
00:04:18,930 --> 00:04:21,545
tôi sẽ tạo ra ứng dụng đó trong

61
00:04:21,545 --> 00:04:25,660
thư mục Angular trong một thư mục con có tên là Confect.

62
00:04:25,660 --> 00:04:29,210
Nếu bạn đã thực hiện các khóa học trước đó trên Bootstrap bốn,

63
00:04:29,210 --> 00:04:33,500
bạn sẽ hiểu lý do tại sao tôi đặt tên ứng dụng này là Confect.

64
00:04:33,500 --> 00:04:35,000
Vì vậy, tại dấu nhắc,

65
00:04:35,000 --> 00:04:40,905
gõ ng mới Confance,

66
00:04:40,905 --> 00:04:45,945
và sau đó tôi sẽ sử dụng sass làm

67
00:04:45,945 --> 00:04:53,080
khuôn khổ phong cách CSS cho ứng dụng Angular của tôi.

68
00:04:53,080 --> 00:04:58,015
Vì vậy, tôi chỉ định trừ phong cách bằng SCSS,

69
00:04:58,015 --> 00:05:01,610
và nhấn Return và nó sẽ mất một thời gian cho

70
00:05:01,610 --> 00:05:05,750
các ứng dụng Angular để được tạo ra trong thư mục hiện tại.

71
00:05:05,750 --> 00:05:08,330
Một khi ứng dụng của bạn được cài đặt, chúng

72
00:05:08,330 --> 00:05:10,850
ta hãy sử dụng máy chủ tích hợp từ

73
00:05:10,850 --> 00:05:16,100
Angular CLI để biên dịch ứng dụng Angular của chúng tôi và bắt đầu phục vụ nó.

74
00:05:16,100 --> 00:05:18,650
Di chuyển đến thư mục Confect,

75
00:05:18,650 --> 00:05:22,495
và tại dấu nhắc, gõ ng serve,

76
00:05:22,495 --> 00:05:27,470
và chờ cho máy chủ Angular Live Development

77
00:05:27,470 --> 00:05:33,115
bắt đầu và xây dựng ứng dụng Angular của chúng tôi và bắt đầu phục vụ ứng dụng.

78
00:05:33,115 --> 00:05:35,175
Một khi nó được hoàn thành,

79
00:05:35,175 --> 00:05:39,920
sau đó bạn sẽ nhận thấy rằng ứng dụng này sẽ có sẵn bằng cách gõ

80
00:05:39,920 --> 00:05:50,425
một http://localhost:4200 vào thanh địa chỉ của trình duyệt của chúng tôi.

81
00:05:50,425 --> 00:05:53,975
Bạn có thể để lại máy chủ phát triển chạy liên tục.

82
00:05:53,975 --> 00:05:57,020
Khi bạn thực hiện thay đổi ứng dụng Angular của bạn,

83
00:05:57,020 --> 00:06:01,520
máy chủ sẽ tự động biên dịch lại các thay đổi và sau đó

84
00:06:01,520 --> 00:06:06,320
bắt đầu phục vụ lên ứng dụng Angular cập nhật trong trình duyệt của bạn.

85
00:06:06,320 --> 00:06:13,370
Vì vậy, đây sẽ là một cách rất tốt để xem trực tiếp những thay đổi mà bạn thực hiện

86
00:06:13,370 --> 00:06:16,760
trong ứng dụng Angular của bạn được ngay lập tức phản ánh

87
00:06:16,760 --> 00:06:21,265
vào trình duyệt nơi bạn xem ứng dụng Angular của bạn.

88
00:06:21,265 --> 00:06:28,610
Nếu bạn vào trình duyệt và truy cập vào ứng dụng Angular tại localhost:4200,

89
00:06:28,610 --> 00:06:31,135
bạn thấy rằng ứng dụng bắt đầu hoạt động,

90
00:06:31,135 --> 00:06:36,835
và nó sẽ phục vụ bộ từ này vào trình duyệt của chúng tôi.

91
00:06:36,835 --> 00:06:42,140
Vì vậy, đây là một ứng dụng rất đơn giản mà bare-bones ứng dụng Angular để

92
00:06:42,140 --> 00:06:47,490
giúp bạn bắt đầu với việc phát triển ứng dụng Angular của bạn.

93
00:06:47,490 --> 00:06:52,460
Chúng tôi sẽ xây dựng trên đầu trang của ứng dụng giàn giáo này bởi Angular CLI,

94
00:06:52,460 --> 00:06:57,420
bằng cách thực hiện các tính năng khác nhau như một phần của khóa học này.

95
00:06:57,420 --> 00:07:01,710
Nếu bạn đang có kế hoạch sử dụng Git cho ứng dụng Angular của bạn để lập phiên bản,

96
00:07:01,710 --> 00:07:03,680
thì tại thời điểm này,

97
00:07:03,680 --> 00:07:06,980
nó có thể là một ý tưởng tốt để khởi tạo kho lưu trữ Git của bạn.

98
00:07:06,980 --> 00:07:12,620
Angular CLI tự động thực hiện việc khởi tạo kho lưu trữ Git của bạn,

99
00:07:12,620 --> 00:07:18,765
và do đó cam kết đầu tiên với thông điệp cam kết ban đầu vào kho lưu trữ Git.

100
00:07:18,765 --> 00:07:23,610
Hãy kiểm tra trạng thái của kho Git của chúng tôi.

101
00:07:23,610 --> 00:07:28,310
Cho phép kiểm tra bằng cách gõ git log

102
00:07:28,310 --> 00:07:29,600
một dòng và bạn sẽ thấy rằng

103
00:07:29,600 --> 00:07:33,020
thiết lập ban đầu đã được cam kết để kho lưu trữ Git của chúng tôi.

104
00:07:33,020 --> 00:07:36,920
Bây giờ, chúng ta có thể bắt đầu làm việc trên ứng dụng Angular của chúng tôi mà chúng tôi

105
00:07:36,920 --> 00:07:41,020
đã giàn giáo ra vào thư mục này ở đây.

106
00:07:41,020 --> 00:07:46,800
Nếu bạn chọn đồng bộ hóa kho Git của bạn với kho lưu trữ trực tuyến,

107
00:07:46,800 --> 00:07:52,160
sau đó hãy đảm bảo rằng kho lưu trữ trực tuyến của bạn là kho lưu trữ riêng tư.

108
00:07:52,160 --> 00:07:56,835
Bitbucket cho phép bạn tạo các kho tư nhân miễn phí.

109
00:07:56,835 --> 00:08:01,580
Vì vậy, hãy tiếp tục và thiết lập kho lưu trữ Git của bạn trên Bitbucket.

110
00:08:01,580 --> 00:08:04,350
Với điều này, chúng tôi hoàn thành bài tập của chúng tôi.

111
00:08:04,350 --> 00:08:06,395
Trong bài tập đầu tiên này,

112
00:08:06,395 --> 00:08:08,635
chúng tôi đã cài đặt CLI Angular.

113
00:08:08,635 --> 00:08:14,060
Sau đó, chúng tôi đã giàn giáo ra ứng dụng Angular của chúng tôi mà chúng tôi sẽ

114
00:08:14,060 --> 00:08:22,150
làm việc để phát triển hơn nữa như là một phần của phần còn lại của các bài tập trong khóa học này.