Tạo Một Dự Án Trong Angular Bằng Cách Sử Dụng Angular Cli

Tạo Một Dự Án Trong Angular Bằng Cách Sử Dụng Angular Cli

Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách tạo một dự án Angular bằng Angular Cli?

Tìm Hiểu: Những Người Sinh Năm 2005 Tuổi Con Gì? Tìm Hiểu Về Năm Đinh Dậu

1- Angular Cli là gì?

Chúng tôi sử dụng công cụ Angular Cli để giúp chúng tôi tạo các dự án một cách nhanh chóng. Nó tự động cấu hình các tệp và gói của dự án Angular cho chúng tôi. Ngoài ra, chúng tôi sử dụng Angular Cli để tạo các thành phần, chỉ thị hoặc dịch vụ trong các dự án hiện có chỉ bằng một dòng lệnh.

2- Cài đặt Angular CLI

Bước 1: Chúng ta cài đặt Angular Cli bằng lệnh npm install như hình bên dưới. Bây giờ nó sẽ tìm nạp phiên bản mới nhất của Angular Cli

đầu tiên

npm install -g @ angle / cli @ mới nhất

Chúng ta có thể kiểm tra phiên bản cli góc bằng lệnh –version như hình dưới đây. Phiên bản bạn đang sử dụng là 9.0.1

đầu tiên

ng – phiên bản

Bước 2: Tạo một dự án Angular bằng lệnh ng new.

đầu tiên

dự án khách sạn mới

Lệnh trên sẽ tự động tạo thư mục dự án Angular và lấy thư viện Angular và các phụ thuộc khác của dự án. Cài đặt và cấu hình bản ghi (ngôn ngữ được sử dụng để lập trình Angular), và cuối cùng là cài đặt các thư viện liên quan đến thử nghiệm dự án Angular.

Bước 3: Chạy dự án Angular bằng lệnh ng serve.

đầu tiên

Giao banh

Khi bạn chạy lệnh ng server, dự án Angular và máy chủ Webpack được biên dịch để triển khai mã Angular cho máy chủ. WebPack chạy trên cổng 4200. Sau khi biên dịch mã Angular. Bạn có thể kiểm tra bằng cách truy cập trình duyệt của mình và nhập http: // localhost: 4000. Chúng ta sẽ được trang chủ Angular như hình bên dưới.

angular-cli-2-a-ecogreentower-net

Chúng tôi cũng có thể yêu cầu Angular biên dịch và tự động mở trình duyệt bằng lệnh

đầu tiên

ng phục vụ -o

3- Cấu trúc dự án góc

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

├── e2e

│ ├── src

│ │ ├── app.e2e-spec.ts

│ │ ├── app.po.ts

│ ├── protractor.conf.js

│ ├── tsconfig.e2e.json

├── node_modules

├── src

│ ├── app

│ │ ├── app-routing.module.ts

│ │ ├── app.component.css

│ │ ├── app.component.html

│ │ ├── app.component.spec.ts

│ │ ├── app.component.ts

│ │ ├── app.module.ts

│ ├── assets

│ │ ├── .gitkeep

│ ├── environments

│ │ ├── environment.prod.ts

│ │ ├── environment.ts

│ ├── favicon.ico

│ ├── index.html

│ ├── main.ts

│ ├── polyfills.ts

│ ├── styles.css

│ ├── test.ts

├── .editorconfig

├── .gitignore

├── angular.json

│── browserslist

├── karma.conf.js

├── package-lock.json

├── package.json

├── README.md

├── tsconfig.app.json

├── tsconfig.json

├── tsconfig.spec.json

└── tslint.json

Thư mục mẹ (thư mục gốc) bao gồm các thư mục con e2e, node_module và src. Ngoài ra còn có một số tệp cấu hình bên ngoài.

Tệp .editorconfig: Tệp này được sử dụng để định cấu hình liệu trình chỉnh sửa mã chúng tôi đang sử dụng có phải là Visual Studio hay không. Tôi có thể thay đổi cấu hình ở đây.

Tệp .gitignore: Được sử dụng để hiển thị tệp nào đã được tải lên github và tệp nào không được tải lên.

angle.json: Được sử dụng để cấu hình lại Angular Cli.

danh sách trình duyệt: Các phiên bản trình duyệt tương thích với dự án Angular.

karma.config.js: Tệp này được sử dụng để chạy các bài kiểm tra của hàm.

package.json: Tệp này chứa các thư viện cần thiết cho dự án Angular, ngoài ra nếu chúng ta thêm thư viện của bên thứ 3 thì hãy khai báo tại đây.

tslint.js: Được sử dụng để kiểm tra xem mã có chất lượng, dễ đọc hoặc dễ bảo trì và tiêu chuẩn hay không.

Thư mục e2e: Chứa các tệp liên quan đến kiểm tra. Angular sử dụng thư viện Protractor để thực hiện kiểm tra tự động trên nhiều trình duyệt.

thư mục node_modules: Nơi tải và tải các thư viện cho các dự án Angular. Nó được quản lý bởi NPM, có nghĩa là chúng tôi sử dụng NPM để xóa và thêm thư viện.

Thư mục src: Nơi chứa mã nguồn khi chương trình đang chạy. Đây là nơi tập trung mã của một ứng dụng Angular.

thư mục ứng dụng: cli angle tạo thư mục này làm thư mục mẹ của ứng dụng. Cli Angular được tạo làm ví dụ để chúng ta tạo các thành phần khác sau này. Trong thư mục ứng dụng thường có.

app.component.html: nơi chúng tôi viết các tệp html của mình. Lớp xem mà người dùng có thể nhìn thấy.

app.component.ts (lớp thành phần): là một tệp xử lý nghiệp vụ, tương tự như Controller trong Spring Web.

app.component.css: Chúng tôi xác định css mà thành phần sẽ sử dụng.

app.component.ts: Tệp này được sử dụng để thử nghiệm.

app.module.ts: Tệp được sử dụng để định cấu hình mô-đun ứng dụng.

app-routing.module.ts: Tệp này được sử dụng để điều hướng.

Tham Khảo: Trọng Tâm Tam Giác Là Gì? Trọng Tâm Của Tam Giác Đều, Cân, Vuông, Cân

Trên đây là cách tạo dự án bằng Angular CLI, Hãy đăng ký kênh youtube bên dưới để có những video kỹ năng và kỹ năng mềm mới nhất

Mọi thông tin chi tiết, vui lòng liên hệ Ecogreen Tower!

ativador window 11

administrator

Related Articles

1 Comment

Leave a Reply

Your email address will not be published.