Được rồi, được rồi, tôi nghe anh nói rồi.
Hãy tiếp tục với nó,
cho tôi xem một số mã.
Thật vậy, chúng ta sẽ bắt đầu với việc tạo ra
ứng dụng Angular của chúng tôi trong bài tập đầu tiên này.
Chúng tôi sẽ sử dụng giao diện dòng lệnh Angular,
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.
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,
chúng tôi sẽ xây dựng ứng dụng Angular của chúng tôi từng bước.
Angular CLI là một cách rất thuận tiện để tạo ra một ứng dụng Angular.
Ứng dụng Angular được tạo ra bởi Angular CLI tuân theo các
hướng dẫn phong cách được đề xuất bởi các nhà phát triển khuôn khổ Angular.
Chúng ta có thể sử dụng Angular CLI để giàn giáo ra
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,
các dịch vụ của ứng dụng Angular của chúng tôi.
Angular CLI cũng đi kèm với máy chủ tích hợp riêng của nó,
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,
và sau đó xem ứng dụng Angular của chúng tôi trong
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.
Như khi chúng tôi thực hiện thay đổi,
các thay đổi sẽ được phản ánh ngay lập tức vào trình duyệt.
Đó là lý do tại sao tôi đã chọn sử dụng Angular CLI như
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.
Để bắt đầu, hãy đi đến một vị trí thuận tiện trên
máy tính của bạn và tạo một thư mục có tên Angular.
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.
Đó 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,
và sau đó tôi sẽ tạo một thư mục có
tên Angular và sau đó một di chuyển vào thư mục Angular.
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.
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.
Vì vậy, tại dấu nhắc,
gõ npm install -g @angular /cli @ 6.2.1.
Bây giờ, bất cứ khi nào tôi cài đặt một mô-đun NPM,
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.
Tôi mạnh mẽ thúc giục bạn cài đặt
cùng một phiên bản của mô-đun NPM để bạn có thể đi qua
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.
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.
Bây giờ, nếu bạn đang làm điều này trên một máy Mac hoặc Linux,
đừng quên sudo ở phía trước của cài đặt npm.
Quá trình cài đặt sẽ mất một thời gian.
Vì vậy, một khi nó được hoàn thành cài đặt,
sau đó Angular CLI sẽ có sẵn trên dòng lệnh của bạn.
Khi quá trình cài đặt hoàn tất,
bạn có thể kiểm tra và xem CLI Angular đã được cài đặt chưa.
Sau khi cài đặt,
bạn có thể cần phải khởi động lại thiết bị đầu cuối của bạn
để các công cụ Angular CLI có sẵn tại dấu nhắc.
CLI góc có sẵn bằng cách gõ ng tại
dấu nhắc, theo sau là một tập hợp các hướng dẫn bổ sung.
Vì vậy, lệnh đầu tiên mà chúng tôi sẽ thử là ng help,
và điều này sẽ liệt kê một tập hợp tất cả các lệnh khác
mà CLI góc cho phép chúng tôi thực hiện.
Ng như bạn thấy sẽ là tiền tố cho
tất cả các lệnh Angular CLI mà bạn sẽ sử dụng trong khóa học này.
Đ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.
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.
Để tạo ra một ứng dụng Angular mới,
tôi sẽ tạo ra ứng dụng đó trong
thư mục Angular trong một thư mục con có tên là Confect.
Nếu bạn đã thực hiện các khóa học trước đó trên Bootstrap bốn,
bạn sẽ hiểu lý do tại sao tôi đặt tên ứng dụng này là Confect.
Vì vậy, tại dấu nhắc,
gõ ng mới Confance,
và sau đó tôi sẽ sử dụng sass làm
khuôn khổ phong cách CSS cho ứng dụng Angular của tôi.
Vì vậy, tôi chỉ định trừ phong cách bằng SCSS,
và nhấn Return và nó sẽ mất một thời gian cho
các ứng dụng Angular để được tạo ra trong thư mục hiện tại.
Một khi ứng dụng của bạn được cài đặt, chúng
ta hãy sử dụng máy chủ tích hợp từ
Angular CLI để biên dịch ứng dụng Angular của chúng tôi và bắt đầu phục vụ nó.
Di chuyển đến thư mục Confect,
và tại dấu nhắc, gõ ng serve,
và chờ cho máy chủ Angular Live Development
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.
Một khi nó được hoàn thành,
sau đó bạn sẽ nhận thấy rằng ứng dụng này sẽ có sẵn bằng cách gõ
một http://localhost:4200 vào thanh địa chỉ của trình duyệt của chúng tôi.
Bạn có thể để lại máy chủ phát triển chạy liên tục.
Khi bạn thực hiện thay đổi ứng dụng Angular của bạn,
máy chủ sẽ tự động biên dịch lại các thay đổi và sau đó
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.
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
trong ứng dụng Angular của bạn được ngay lập tức phản ánh
vào trình duyệt nơi bạn xem ứng dụng Angular của bạn.
Nếu bạn vào trình duyệt và truy cập vào ứng dụng Angular tại localhost:4200,
bạn thấy rằng ứng dụng bắt đầu hoạt động,
và nó sẽ phục vụ bộ từ này vào trình duyệt của chúng tôi.
Vì vậy, đây là một ứng dụng rất đơn giản mà bare-bones ứng dụng Angular để
giúp bạn bắt đầu với việc phát triển ứng dụng Angular của bạn.
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,
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.
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,
thì tại thời điểm này,
nó có thể là một ý tưởng tốt để khởi tạo kho lưu trữ Git của bạn.
Angular CLI tự động thực hiện việc khởi tạo kho lưu trữ Git của bạn,
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.
Hãy kiểm tra trạng thái của kho Git của chúng tôi.
Cho phép kiểm tra bằng cách gõ git log
một dòng và bạn sẽ thấy rằng
thiết lập ban đầu đã được cam kết để kho lưu trữ Git của chúng tôi.
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
đã giàn giáo ra vào thư mục này ở đây.
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,
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ư.
Bitbucket cho phép bạn tạo các kho tư nhân miễn phí.
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.
Với điều này, chúng tôi hoàn thành bài tập của chúng tôi.
Trong bài tập đầu tiên này,
chúng tôi đã cài đặt CLI Angular.
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ẽ
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.