Thiết lập môi trường cục bộ và không gian làm việc cho Angular

Hướng dẫn này giải thích cách thiết lập môi trường của bạn để lập trình Angular bằng cách sử dụng công cụ Angular CLI. Nó bao gồm thông tin về các điều kiện tiên quyết, cài đặt Angular CLI, tạo không gian làm việc ban đầu, khởi tạo ứng dụng cũng như chạy ứng dụng đó trên máy cục bộ để kiểm tra thiết lập của bạn.

DÙNG THỬ ANGULAR MÀ KHÔNG CẦN CÀI ĐẶT

Nếu bạn chưa quen với Angular, bạn có thể thử với Bắt đầu với ứng dụng Angular đơn giản, giới thiệu những điều cần thiết của Angular trong bối cảnh của một ứng dụng cửa hàng trực tuyến cơ bản được tạo sẵn mà bạn có thể kiểm tra và sửa đổi.

Hướng dẫn này tận dụng lợi thế của môi trường StackBlitz để lập trình ứng dụng Angular trực tuyến. Bạn không cần thiết lập môi trường trên máy cục bộ của mình cho đến khi bạn sẵn sàng.

Điều kiện tiên quyết

Để sử dụng khung công tác Angular, bạn nên làm quen với những điều sau:

Kiến thức về TypeScript là hữu ích, nhưng không bắt buộc.

Để cài đặt Angular trên máy tính cục bộ của bạn, bạn cần những thứ sau:

1. Node.js

Angular yêu cầu phiên bản LTS active hoặc LTS maintenance của Node.js.

Để biết thông tin về các yêu cầu phiên bản cụ thể, hãy xem khóa engines trong tập tin package.json.

Để biết thêm thông tin về cách cài đặt Node.js, hãy xem nodejs.org. Nếu bạn không chắc phiên bản Node.js chạy trên hệ thống của mình, hãy chạy lệnh sau trong cửa sổ dòng lệnh.

node -v

2. Trình quản lý gói npm

Angular, Angular CLI và các ứng dụng Angular phụ thuộc vào gói npm cho nhiều tính năng và chức năng. Để tải xuống và cài đặt các gói npm, bạn cần một trình quản lý gói npm.

Hướng dẫn này sử dụng npm client giao diện dòng lệnh, được cài đặt mặc định theo Node.js. Để kiểm tra xem bạn đã cài đặt ứng dụng npm client hay chưa, hãy chạy lệnh sau trong cửa sổ dòng lệnh.

npm -v

Cài đặt Angular CLI

Bạn sử dụng Angular CLI để tạo dự án, tạo mã ứng dụng và thư viện, đồng thời thực hiện nhiều tác vụ phát triển liên tục như kiểm thử, đóng gói và triển khai.

Để cài đặt Angular CLI, hãy mở cửa sổ dòng lệnh và chạy lệnh sau:

npm install -g @angular/cli

Tạo không gian làm việc và khởi tạo ứng dụng

Bạn phát triển ứng dụng trong không gian làm việc của Angular.

Để tạo không gian làm việc mới và khởi tạo ứng dụng ban đầu:

1. Chạy lệnh ng new và cung cấp tên ứng dụng thay cho my-app, như được hiển thị ở đây:

ng new my-app

2. Lệnh ng new sẽ nhắc bạn biết thông tin về các tính năng được bao gồm trong ứng dụng. Chấp nhận các giá trị mặc định bằng cách nhấn phím Enter hoặc Return.

Angular CLI cài đặt các gói Angular npm cần thiết và các phụ thuộc khác. Quá trình này có thể mất vài phút.

Angular CLI tạo một không gian làm việc mới và một ứng dụng Welcome đơn giản, sẵn sàng chạy.

Chạy ứng dụng

Angular CLI bao gồm một máy chủ để bạn có thể xây dựng và chạy ứng dụng của mình trên máy cục bộ.

  1. Điều hướng đến thư mục không gian làm việc, chẳng hạn như my-app.
  2. Chạy lệnh sau:
cd my-app
ng serve --open

Lệnh ng serve khởi chạy máy chủ, chạy ứng dụng của bạn, và xây dựng lại ứng dụng khi bạn thực hiện thay đổi đối với các tập tin.

Các tùy chọn --open (hoặc ngắn gọn là -o) tự động mở trình duyệt và truy cập địa chỉ URL http://localhost:4200/.

Nếu cài đặt và thiết lập của bạn thành công, bạn sẽ thấy một trang tương tự như sau.

Giao diện mặc định của ứng dụng Angular

Bước tiếp theo

  • Để được giới thiệu kỹ lưỡng hơn về các khái niệm và thuật ngữ cơ bản của nguyên tắc thiết kế và kiến ​​trúc ứng dụng một trang Angular, hãy đọc hướng dẫn Các khái niệm Angular.
  • Làm việc thông qua hướng dẫn Tour of Heroes app, một bài tập thực hành hoàn chỉnh giới thiệu cho bạn quy trình phát triển ứng dụng bằng Angular CLI và đi qua các hệ thống con quan trọng.
  • Để tìm hiểu thêm về cách sử dụng Angular CLI, hãy xem Tổng quan về CLI. Ngoài việc tạo không gian làm việc ban đầu và khung ứng dụng, bạn có thể sử dụng CLI để tạo mã Angular chẳng hạn như các component và service. CLI hỗ trợ toàn bộ chu trình phát triển, bao gồm xây dựng, thử nghiệm, đóng gói và triển khai.
  • Để biết thêm thông tin về các tệp Angular được tạo bởi lệnh ng new, hãy xem Không gian làm việc và Cấu trúc file dự án.
Angular
Bài Viết Liên Quan:
Trình khởi động bootstrap trong Angular
Trung Nguyen 26/07/2021
Trình khởi động bootstrap trong Angular

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về trình khởi động bootstrap và cách Angular hoạt động bên trong và khởi động ứng dụng của chúng ta.

Cách tạo một dự án mới trong Angular
Trung Nguyen 25/07/2021
Cách tạo một dự án mới trong Angular

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng Angular CLI để tạo một dự án mới trong Angular.

Không gian làm việc và Cấu trúc file dự án
Trung Nguyen 22/07/2021
Không gian làm việc và Cấu trúc file dự án

Trong hướng dẫn này, bạn sẽ tìm hiểu về không dan làm việc và cấu trúc file dự án ứng dụng, dự án thư viện của Angular.

Service và Dependency Injection trong Angular
Trung Nguyen 21/07/2021
Service và Dependency Injection trong Angular

Trong bài viết này, bạn sẽ tìm hiểu vì sao Angular lại tách riêng component và service, cách sử dụng dependency injection để khởi tạo instance của service.