Triển khai ứng dụng Angular

Triển khai ứng dụng Angular của bạn là quá trình biên dịch hoặc xây dựng mã của bạn và lưu trữ JavaScript, CSS và HTML trên máy chủ web.

Phần này xây dựng dựa trên các bước trước trong hướng dẫn Bắt đầu với ứng dụng Angular đơn giản và chỉ cho bạn cách triển khai ứng dụng của mình.

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

Phương pháp hay nhất là chạy cục bộ dự án của bạn trước khi triển khai. Để chạy dự án của bạn trên máy cục bộ, bạn cần cài đặt những thứ sau trên máy tính của mình:

• Node.js.
• Angular CLI.

Từ thiết bị đầu cuối, cài đặt Angular CLI với lệnh sau:

npm install -g @angular/cli

Với Angular CLI, bạn có thể sử dụng lệnh ng để tạo không gian làm việc mới, dự án mới, phục vụ ứng dụng của bạn trong quá trình phát triển hoặc xuất bản các bản dựng để chia sẻ hoặc phân phối.

Chạy ứng dụng của bạn cục bộ

1. Tải xuống mã nguồn từ dự án StackBlitz của bạn bằng cách nhấp vào biểu tượng Download Project ở menu bên trái đối diện Project, để tải xuống các tệp của bạn.

2. Tạo một không gian làm việc Angular CLI mới bằng cách sử dụng lệnh ng new, đặt tên cho dự án của bạn thay cho my-project-name:

ng new my-project-name

Lệnh này hiển thị một loạt các lời nhắc cấu hình. Đối với hướng dẫn này, hãy chấp nhận cài đặt mặc định cho mỗi lời nhắc.

3. Trong ứng dụng của bạn do Angular CLI mới tạo, hãy thay thế thư mục /src bằng thư mục /src từ mã nguồn của bạn được tải xuống từ StackBlitz.

4. Sử dụng lệnh CLI sau để chạy ứng dụng của bạn trên máy cục bộ:

ng serve

5. Để xem ứng dụng của bạn trong trình duyệt, hãy truy cập http://localhost:4200/. Nếu cổng mặc định 4200 không khả dụng, bạn có thể chỉ định một cổng khác với cờ port như trong ví dụ sau:

ng serve --port 4201

Trong khi ứng dụng của mình đang chạy, bạn có thể chỉnh sửa mã của mình và xem các thay đổi cập nhật tự động trong trình duyệt. Để dừng lệnh ng serve, nhấn Ctrl + c.

Xây dựng và lưu trữ ứng dụng của bạn

1. Để xây dựng ứng dụng của bạn cho quá trình sản xuất, hãy sử dụng lệnh build. Theo mặc định, lệnh này sử dụng cấu hình production cho bản dựng.

ng build

Lệnh này tạo một thư mục dist trong thư mục gốc của ứng dụng với tất cả các tệp mà dịch vụ lưu trữ cần để phục vụ ứng dụng của bạn.

Nếu lệnh ng build trên gặp lỗi về các gói bị thiếu, hãy thêm các phần phụ thuộc bị thiếu trong tệp dự án package.json cục bộ của bạn để khớp với phần phụ thuộc trong dự án StackBlitz đã tải xuống.

2. Sao chép nội dung của thư mục dist/my-project-name vào máy chủ web của bạn. Vì các tệp này là tĩnh, bạn có thể lưu trữ chúng trên bất kỳ máy chủ web nào có khả năng cung cấp tệp; chẳng hạn như Node.js, Java, .NET hoặc bất kỳ chương trình phụ trợ nào như Firebase, Google Cloud hoặc là App Engine. Để biết thêm thông tin, hãy xem hướng dẫn Building & Serving và Deployment.

Tiếp theo là gì

Trong hướng dẫn này, bạn đã đặt nền tảng để khám phá thế giới Angular trong các lĩnh vực như mobile development, UX/UI development và kết xuất phía máy chủ. Bạn có thể đi sâu hơn bằng cách nghiên cứu thêm các tính năng của Angular, tương tác với cộng đồng sôi động và khám phá hệ sinh thái mạnh mẽ.

Tìm hiểu thêm Angular

Để có hướng dẫn chuyên sâu hơn giúp bạn xây dựng ứng dụng cục bộ và khám phá nhiều tính năng phổ biến nhất của Angular, hãy xem Tour of Heroes.

Để khám phá các khái niệm cơ bản của Angular, hãy xem hướng dẫn về Angular chẳng hạn như Tổng quan về component Angular hoặc Cú pháp template.