Cách sao chép và chạy ứng dụng Angular trên máy của bạn

Angular là một khung JavaScript mạnh mẽ để xây dựng các ứng dụng một trang. Google đã phát triển phần mềm và duy trì nó cùng với các cộng tác viên trên toàn thế giới.

Giống như React, bạn có thể sử dụng Angular để tạo nhiều ứng dụng front-end khác nhau, bao gồm web, thiết bị di động và hệ thống máy tính để bàn. Một số ngành công nghiệp thích Angular vì nó toàn diện và ổn định.

Hãy cùng tìm hiểu thêm về Angular bằng cách sao chép một dự án từ GitHub và chạy nó cục bộ.

Điều kiện tiên quyết để nhân bản

Không giống như các framework khác, sao chép và chạy một ứng dụng Angular rất đơn giản. Bạn sẽ nhân bản một dự án GitHub. Trước khi bắt đầu, hãy đảm bảo bạn đáp ứng các yêu cầu sau:

1. Cài đặt trình quản lý gói Node

Node Package Manager (npm) là một kho phần mềm dành cho các gói JavaScript. npm có CLI (Giao diện dòng lệnh) thực hiện các tác vụ khác nhau. Bạn có thể sử dụng CLI để tải xuống, cài đặt và triển khai phần mềm.

Khi bạn cài đặt Node.js, nó đi kèm với một gói npm. Để kiểm tra các phiên bản gói Node.js và npm của bạn, hãy chạy như sau trên thiết bị đầu cuối:

Để kiểm tra phiên bản Node.js đã cài đặt, hãy in phiên bản bằng lệnh sau:

node 

Bạn có thể kiểm tra phiên bản của npm bằng cách sử dụng cùng một tùy chọn:

npm 

2. Cài đặt Angular CLI

Bạn có thể sử dụng Angular CLI để thực hiện các nhiệm vụ phát triển khác nhau. Các nhiệm vụ bao gồm tạo ứng dụng, thử nghiệm và triển khai. Để cài đặt Angular CLI, hãy chạy lệnh sau:

$ npm install -g @angular/cli

Để kiểm tra phiên bản Angular CLI, hãy chạy lệnh:

$ ng version

3. Tìm một dự án trên GitHub

Bạn sẽ sao chép dự án Giphy-Replica từ GitHub:

Điều hướng đến nút màu xanh lá cây có nhãn Mã số. Nhấp vào nó để hiển thị danh sách thả xuống. Sao chép liên kết HTTP hoặc SSH. Một trong hai điều này sẽ làm.

4. Sao chép dự án cục bộ

Đầu tiên, tạo một thư mục và đặt tên là Angular-Clone. Hãy nhớ chuyển đến thư mục bằng lệnh sau:

cd Angular-Clone

Sau đó, chạy git clone lệnh sao chép dự án vào thư mục của bạn.

git clone https:

Tiếp theo, kiểm tra thư mục Angular-Clone để xem có bản sao Giphy-Replica bên trong hay không. Chạy ls để hiển thị nội dung của thư mục:

ls

Điều hướng đến thư mục:

cd Giphy-Replica

Tại thời điểm này, bạn có thể kiểm tra các tệp dự án trong trình chỉnh sửa mã mà bạn chọn hoặc xem chúng qua giao diện web GitHub.

5. Cài đặt gói npm

Bạn cần cài đặt tất cả các gói và phụ thuộc từ dự án nhân bản để chạy nó. Để cài đặt các gói, hãy chạy:

npm install

Nếu bạn gặp bất kỳ báo cáo lỗ hổng nào, hãy sửa chúng bằng:

npm audit fix

6. Mở Dự án trong Trình duyệt

Bây giờ bạn có tất cả các yêu cầu để chạy dự án, bạn có thể chạy và mở nó trong trình duyệt. Bắt đầu bằng việc xây dựng và phục vụ dự án:

ng serve

Sau đó mở http: // localhost: 4200 / trong trình duyệt để xem dự án.

Bạn có thể sử dụng Angular CLI tự động mở dự án trong trình duyệt:

$ ng serve -o

Đây lệnh xây dựng ứng dụng, khởi chạy máy chủ và xem các tệp để cập nhật.

Trong trình duyệt của mình, bạn sẽ thấy trang web Giphy-Replica:

Tại sao sao chép một dự án Angular?

Thay vì bắt đầu một dự án từ đầu, bạn có thể sao chép một dự án từ GitHub. Sao chép một dự án mã nguồn mở và sửa đổi nó để sử dụng cho riêng bạn giúp tiết kiệm thời gian bắt đầu một dự án từ đầu. Bạn cũng có thể đóng góp bất kỳ thay đổi hữu ích nào cho dự án thượng nguồn nếu có liên quan.

Được bình chọn là khung giao diện người dùng phổ biến thứ tư vào năm 2021, Angular tiếp tục gây ngạc nhiên với mỗi bản phát hành. Nó đi kèm với các gói tuyệt vời hỗ trợ phát triển các ứng dụng một trang. Sử dụng khuôn khổ tuyệt vời này để xây dựng các ứng dụng đẳng cấp thế giới.