Chạy Ứng Dụng Angular Đầu Tiên

Sau khi đã tạo xong dự án Angular, bước tiếp theo là chạy ứng dụng trên trình duyệt, hiểu cách cập nhật nội dung theo thời gian thực với Hot Module Replacement (HMR), và tùy chỉnh giao diện cơ bản bằng HTML, CSS trong Angular.

Trong bài học này, bạn sẽ:

• Chạy ứng dụng bằng ng serve và kiểm tra kết quả.
• Hiểu về Hot Module Replacement (HMR) và cách giúp Angular tự động cập nhật thay đổi mà không cần reload trang.
• Thực hiện tùy chỉnh giao diện cơ bản bằng cách chỉnh sửa HTML & CSS trong Angular.

Sau bài học này, bạn sẽ có thể chạy và tinh chỉnh ứng dụng Angular một cách dễ dàng.

Chạy Ứng Dụng Angular Đầu Tiên

1. Chạy ứng dụng với ng serve

Bước 1: Mở Terminal và chạy lệnh

Mở VS Code, mở Terminal (hoặc Command Prompt) và di chuyển đến thư mục dự án Angular:

cd my-angular-app

Chạy lệnh sau để khởi động ứng dụng:

ng serve

Sau khi chạy lệnh, Angular CLI sẽ:

• Biên dịch mã nguồn và khởi động một local development server.
• Lắng nghe thay đổi trong code, giúp cập nhật giao diện mà không cần reload trang.

Bước 2: Kiểm tra ứng dụng trên trình duyệt

Khi lệnh ng serve hoàn tất, bạn sẽ thấy thông báo như sau:

Compiled successfully.
Local: http://localhost:4200/

Mở trình duyệt và truy cập http://localhost:4200/. Nếu bạn thấy trang mặc định của Angular, nghĩa là ứng dụng đã chạy thành công!

Lưu ý:

• Nếu bạn muốn chạy ứng dụng trên một cổng khác (ví dụ port 4300), dùng lệnh:

  ng serve --port 4300
  

  Copy
• Nếu muốn chạy trên tất cả các thiết bị trong mạng nội bộ, dùng lệnh:

  ng serve --host 0.0.0.0
  

  Copy

2.2. Hiểu về Hot Module Replacement (HMR)

HMR là gì?

Hot Module Replacement (HMR) là tính năng giúp Angular cập nhật code ngay lập tức trên trình duyệt mà không cần reload trang. Điều này giúp:

• Giữ trạng thái của ứng dụng mà không mất dữ liệu khi cập nhật code.
• Tăng tốc độ phát triển vì không cần tải lại toàn bộ trang.

Cách bật HMR trong Angular

Mặc định, khi chạy ng serve, Angular không bật HMR. Để kích hoạt, làm như sau:

Cài đặt HMR bằng lệnh:

ng add @angular-devkit/build-angular

Chạy ứng dụng với HMR:

ng serve --hmr

Giờ đây, khi bạn thay đổi code, trang web sẽ cập nhật ngay lập tức mà không cần reload.

Lưu ý: HMR chỉ hoạt động trong môi trường phát triển, không hoạt động khi build ứng dụng (ng build).

3. Tùy chỉnh giao diện cơ bản bằng HTML, CSS trong Angular

Sau khi chạy ứng dụng thành công, bạn có thể chỉnh sửa giao diện bằng cách sửa file app.component.html và app.component.css.

Thay đổi giao diện trong app.component.html

Mở file src/app/app.component.html, thay thế nội dung mặc định bằng đoạn code sau:

<div class="container">
  <h1>Chào mừng đến với Angular!</h1>
  <p>Đây là ứng dụng Angular đầu tiên của bạn.</p>
</div>

Thêm CSS vào app.component.css

Mở file src/app/app.component.css và thêm CSS để tạo phong cách đơn giản:

.container {
  text-align: center;
  margin-top: 50px;
}

h1 {
  color: #007bff;
  font-size: 2.5rem;
}

p {
  color: #333;
  font-size: 1.2rem;
}

Lưu và kiểm tra kết quả

Sau khi chỉnh sửa xong, lưu lại file. Nếu HMR đã bật, trang web sẽ cập nhật ngay lập tức mà không cần reload.

Kết quả mong đợi:
Trang web hiển thị dòng chữ "Chào mừng đến với Angular!" với màu xanh, và đoạn mô tả có màu đen.

Kết luận

• Chúng ta đã chạy ứng dụng Angular đầu tiên bằng ng serve.
• Hiểu được Hot Module Replacement (HMR) giúp cập nhật giao diện mà không cần reload.
• Tùy chỉnh giao diện Angular bằng cách chỉnh sửa HTML và CSS.