Hướng Dẫn Cài Đặt và Chạy Ứng Dụng Angular

Angular là một framework mạnh mẽ để xây dựng các ứng dụng web hiện đại được phát triển bởi Google. Nó cho phép các nhà phát triển tạo ra các ứng dụng web động, ứng dụng Single-Page Applications(SPAs) với cấu trúc vững chắc và trải nghiệm người dùng mượt mà. Bài viết này sẽ hướng dẫn bạn chi tiết từng bước để cài đặt và chạy ứng dụng đầu tiên.

Bước 1: Các Yêu Cầu Trước Khi Bắt Đầu

Trước khi bắt đầu, hãy đảm bảo hệ thống của bạn đáp ứng các yêu cầu sau:

Node.js và npm : Angular dựa vào Node.js và npm (Node Package Manager) để quản lý các thư viện.

Tải xuống và cài đặt Node.js .
Xác nhận cài đặt:

node -v
npm -v

Angular CLI : Command Line Interface (CLI) của Angular giúp đơn giản hóa việc tạo và quản lý dự án.
Trình Soạn Thảo : VS Code (được khuyến nghị).

Bước 2: Cài Đặt Angular CLI

Để cài đặt Angular CLI toàn cục, mở terminal và chạy:

npm install -g @angular/cli

Kiểm Tra Angular CLI

Xác minh cài đặt Angular CLI thành công bằng cách:

ng version

Lệnh này sẽ hiển thị phiên bản của Angular CLI và các chi tiết liên quan.

Bước 3: Tạo Mới Ứng Dụng Angular

Tạo một dự án Angular mới bằng cách chạy:

ng new example-angular

Tùy Chỉnh Cấu Hình Dự Án

Angular CLI sẽ yêu cầu bạn định cấu hình dự án.

# CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
# Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
# Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
# Less            [ http://lesscss.org                                             ]

# Which stylesheet format would you like to use? Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss

# Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? yes

# Would you like to use the Server Routing and App Engine APIs (Developer Preview) for this server application? yes

Sau khi cấu hình, Angular CLI sẽ tự động tạo cấu trúc dự án cho bạn.

Bước 4: Điều Hướng Đến Thư Mục Dự Án

Chuyển đến thư mục dự án vừa tạo:

cd example-angular

Bước 5: Chạy Ứng Dụng Angular

Chạy ứng dụng cục bộ bằng:

npm start

Truy Cập Ứng Dụng

Mở trình duyệt và điều hướng đến http://localhost:4200. Bạn sẽ thấy trang chào mừng mặc định của Angular.

Angular Basic

Bước 6: Khám Phá Cấu Trúc Dự Án

Hiểu rõ cấu trúc dự án sẽ giúp bạn làm việc hiệu quả hơn với Angular:

src/app : Chứa các thành phần của ứng dụng.
angular.json : Quản lý cấu hình cụ thể của Angular.
package.json : Liệt kê các thư viện phụ thuộc và các script.

Angular structure code

Bước 7: Bắt Đầu Viết Code

Mở và chỉnh sửa các tệp tin sau:

src/app/app.component.ts

export class AppComponent {
  title = 'Angular';
  currentDate = new Date().toDateString()
}

src/app/app.component.html

<h1>Hello, {{ title }}</h1>
<p>Congratulations! Your app is running. 🎉</p>
<p>Today is {{ currentDate }}</p>

Lưu các file và xem các thay đổi được phản ánh trên ứng dụng của bạn.

Angular Basic

Xử Lý Các Lỗi Thường Gặp

Lỗi: "Command not found: ng"

Đảm bảo Angular CLI được cài đặt toàn cục (npm install -g @angular/cli).
Thêm thư mục binary của npm vào PATH của hệ thống.

Lỗi: "Port 4200 is already in use"

Dừng tiến trình gây xung đột hoặc chạy ứng dụng trên cổng khác:

ng start --port 4300

Lỗi: "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory"

Tăng giới hạn bộ nhớ cho Node.js:

export NODE_OPTIONS=--max_old_space_size=4096

Mẹo

Cài đặt extension Angular Language Service trong VS Code để hỗ trợ viết code hiệu quả hơn bao gồm gợi ý code
Sử dụng lệnh Angular CLI như ng generate component <component-name> để tạo nhanh các component mới.
Sử dụng Angular DevTools để gỡ lỗi và phân tích hiệu suất.

Kết Luận

Bạn đã cài đặt và chạy thành công ứng dụng Angular! Với các tính năng mạnh mẽ và quy trình phát triển mượt mà của Angular, bạn đã sẵn sàng bắt đầu xây dựng các ứng dụng web động và tương tác. Hãy đón xem các chủ đề nâng cao hơn như tạo component, làm việc với service,..