Xin chào bạn,

Trong series này, mình sẽ chỉ hướng dẫn bạn xây dựng một trang web thương mại điện tử với danh mục, giỏ hàng, và form thanh toán bằng Angular 2x.

Nội dung của bài viết này

• Angular là gì?
• Cài đặt môi trường phát triển Angular.
• Tạo dự án Angular sử dụng Angular CLI.

Angular là gì?

Angular là một JavaScript framework mã nguồn mở phổ biến nhất để phát triển các ứng dụng một trang (Singer-Page Apps) sử dụng HTML, CSS và TypeScript. Nó được phát triển và tài trợ bởi Google và cộng đồng.

Angular cho phép bạn tạo ra các ứng dụng front-end chạy trên web, ứng dụng di động hoặc Desktop Application.

Kiến thức bắt buộc trước khi bắt đầu dự án với Angular

• Nắm được cơ bản về HTML và CSS.
• JavaScript và TypeScript.

Nếu bạn chưa tự tin với TypeScript, hãy xem tài liệu TypeScript và hướng dẫn bắt đầu với Angular trên angular.io.

Cài đặt môi trường phát triển Angular

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

Cài đặt Node.js và NPM

NPM có sẵn khi chúng ta cài đặt Node.js, npm giúp chúng ta dễ dàng quản lý việc tải xuống các thư viện và gói được sử dụng trong Angular từ trên Internet.

Bước 1: Vào trang chủ nodejs.org để tải về và cài đặt.

Bước 2: Sau khi tải về và cài đặt xong, chúng ta kiểm tra phiên bản NodeJS bằng cách gõ lệnh cmd như sau:

Cài đặt Angular Command Line Interface (CLI)

Giao diện dòng lệnh Angular CLI giúp bạn nhanh chóng tạo một ứng dụng Angular đơn giản.

Đầu tiên chạy dòng lệnh sau để cài đặt Angular CLI Global:

npm i -g @angular/cli

Chạy dòng lệnh sau để kiểm tra phiên bản mới nhất vừa cài đặt:

ng --version

Tạo dự án Angular sử dụng Angular CLI

ng new shopping-cart

Lệnh này sẽ tạo cấu trúc ban đầu cho ứng dụng của bạn và các đặt các node modules cần thiết.

Lần lượt bạn chọn Y > Y > CSS

Khi quá trình cài đặt thành công, hãy khởi động ứng dụng của bạn bằng cánh chạy:

cd shopping-cart

ng serve

Bây giờ bạn có thể truy cập ứng dụng của mình tại http://localhost:4200

Trong phần này, bạn đã tạo được một ứng dụng Angular đầu tiên và chạy được ứng dụng trên trình duyệt Web.

Phần tiếp theo chúng ta sẽ tìm hiểu cách tạo Component và Template để hiển thị danh sách sản phẩm.

Cảm ơn bạn đã theo dõi hết bài viết này, nếu có bất kỳ câu hỏi nào hãy để lại bình luận xuống bên dưới để được giải đáp nhé!