1 project angular js 2 như thế nào năm 2024

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 hệ thống web, thiết bị di động và máy tính. Một số ngành thích Angular vì nó toàn diện và ổn định.

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

Điều kiện để nhân bản

Không giống như các framework khác, việc sao chép và chạy ứ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:

  • Bạn nên cài đặt phiên bản ổn định của Node.js. Nếu không, hãy tìm hiểu cách cài đặt Nodejs trên Ubuntu hoặc cài đặt Nodejs trên Windows.
  • Bạn nên cài đặt Git.
  • Bạn nên có một tài khoản GitHub.

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

Node Package Manager (npm) là kho lưu trữ phần mềm cho các gói JavaScript. npm có giao diện dòng lệnh (command line interface, hay CLI) thực hiện nhiều 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ó sẽ đi kèm với gói npm. Để kiểm tra phiên bản gói Node.js và npm của bạn, hãy chạy lệnh sau trên terminal:

Để 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 --version

Bạn có thể kiểm tra phiên bản của npm bằng tùy chọn tương tự:

npm --version 

2. Cài đặt giao diện dòng lệnh Angular

Bạn có thể sử dụng giao diện dòng lệnh (CLI) Angular để thực hiện các tác 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 giao diện dòng lệnh Angular, hãy chạy lệnh sau:

$ npm install -g @angular/cli

Để kiểm tra phiên bản giao diện dòng lệnh Angular, hãy chạy lệnh:

$ ng version

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

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

1 project angular js 2 như thế nào năm 2024

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

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ớ vào thư mục bằng lệnh sau:

cd Angular-Clone

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

git clone https://github.com/Reuben-Kipkemboi/Giphy-Replica.git

Tiếp theo, kiểm tra thư mục Angular-Clone để xem bản sao Giphy-Replica có ở bên trong không. Chạy lệnh 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 code 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ần 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 khắc phục 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 nó 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:

npm --version 

0

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

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

npm --version 

1

Lệnh này 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 bạn, bạn sẽ thấy trang web Giphy-Replica:

1 project angular js 2 như thế nào năm 2024

Tại sao nên 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 nguồn mở và sửa đổi nó để sử dụng giúp tiết kiệm thời gian so với việc bắt đầu một dự án từ đầu.

Được bình chọn là framework 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 lầ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 framework tuyệt vời này để xây dựng các ứng dụng đẳng cấp thế giới.