Angular Cli Là Gì

Share:
*
It-Pro Training
*

Giớithiệu về Angular Cli

1.Giới thiệu về Angular Cli

Nhưchúng ta vẫn biết, Các ứng dụng Web tiến bộ được những lập trình viên phát triểndựa vào các Framework khỏe khoắn nhỏng Angular. Các framework này cho phép những lậptrình viên sử dụng những thư viện văn minh cùng tinh vi của Javascript. Để thực hiệnđược vấn đề này thì các nhà cải cách và phát triển phải một môi trường thiên nhiên nhằm cấu hình thiết lập những thỏng việncần thiết cũng giống như là để cách tân và phát triển các đoạn mã vận dụng, cục bộ những vấn đềnày làm cho đối chọi trả, nó đông đảo được thiết lập cấu hình để phía trong và một thỏng mục, tlỗi mụcnày sẽ cất cả Code phần font-end của áp dụng.

Bạn đang đọc: Angular cli là gì

Thựctế bọn họ nên một cách thức để cải tiến và phát triển vận dụng Angular ở tại mức cao với :

+Để phát triển vận dụng Angular thì chúng ta đề nghị thiết lập Node.js, Node.js là1 căn cơ phía server mã nguồn msinh sống với miễn tổn phí, được cho phép dịch cùng chạy các WebServer áp dụng JavaScript. Nó được áp dụng rộng dãi để dịch ứng dụng Web.Node.js gắn liền với npm, npm (packagemanager) được thực hiện nhằm quản lý những gói thông tincủa Node.js. Các chúng ta cũng có thể vào xúc tiến www.npmjs.com, Tạiđây bao gồm cất hàng ngàn các gói đọc tin miễn tổn phí, xây dựng viên sẽ downloadtrải qua câu lệnh (Comm& Line) về nhằm thực hiện.

+Ứng dụng được phát triển vày Angular, nhật định cần thiết đặt các gói tlỗi viện cầnthiết cho Việc cải tiến và phát triển cùng biên dịch vận dụng. các đoạn mã sẽ tiến hành viết bằngngôn ngữ TypeScript, trong quá trình sản xuất ứng dụng vẫn bắt buộc thực hiện UnitTest, biên dịch để thực thi áp dụng.

Đểgiảm thiểu những pnhân từ hà đề cập bên trên, team cải cách và phát triển của Angular đang tạo thành Angular Cli. Angular Cli là bộ công cụcung ứng được cho phép sinh sản vận dụng, tạo nên các nhân tố của Angular như component,module,… triển khai biên dịch ứng dụng một biện pháp thuận tiện hơn.

*

Hình số 1: Hình ảnhAngular Cli

2.Cài đặt vận dụng Angular Cli

Để thực hiện, đầutiên các bạn phải chiếc đặt Node.js. Các chúng ta có thể vào shop url : https://nodejs.org/en/ để triển khai downloadNode Js về laptop và cài đặt.

*

Hình số 2 : Hình ảnhNode JS

Angular Cli đượccài đặt thông qua hành lang cửa số lệnh command.

Cú pháp sở hữu đặtnlỗi sau :

npminstall -g
angular/cli

sau khoản thời gian cài đặtthành công các chúng ta cũng có thể kiểm tra phiên bản bây chừ bên trên máy vi tính thông quacâu lệnh :

ng-v

*

Hình số 3 : Phiênbạn dạng Angular Cli

3.Tạo Project bằng Angular Cli

Để chế tác Project, đầutiên các bạn bắt buộc bật hành lang cửa số thực hiện chiếc lệnh, tiếp nối điều hướng đến thỏng mụcmong mỏi sinh sản Project. Tiếp theo chúng ta thực hiện cú pháp sau đây nhằm tạo nên ProjectAngular 5 với Angular Cli nhỏng sau :

ngnew PROJECT-NAME

PROJECT-NAME : Têndự án mong tạo

lấy ví dụ như chế tạo Projectvới thương hiệu là SampleApp trong tlỗi mục E:diymcwwm.comAngular 5Vidu.

*

Hình số 4: TạoProject

Câu lệnh đã đượcthực hiện vào một vài phút, với những nhiệm vụ nlỗi sau :

+ Tạo thương hiệu thỏng mụccội cất dự án tất cả cùng tên với thương hiệu dự án công trình (Ở đó là thư mục “SampleApp”.

+ Bổ sung các filecùng những thư mục cần thiết đến áp dụng.

+ Bổ sung các góithỏng viện nhỏ tuổi độc nhất vô nhị của Angular, về tối thiểu quan trọng mang lại quy trình dịch với triểnknhị áp dụng.

+ Cài đặt các góicủa npm.

Xem thêm: Hiệu Suất Là Gì ? Công Thức Hiệu Suất Là Gì Hiệu Suất Là Gì

Sau Lúc khởi tạochấm dứt giả dụ thành công xuất sắc, công dụng đang hiển thị nlỗi sau :

*

Hình số 5 : TạoProject thành công

Sử dụng VisualSource Code nhằm msống thư mục gồm đựng dự án

*

Hình số 6: Cấutrúc áp dụng Angular

Mô tả các cấu trúcvào vận dụng :

e2e: Viết tắt của chữ end-to-kết thúc, đượcsử dụng để bổ sung cập nhật các thử nghiệm, các thử nghiệm này sẽ được tiến hành nhằm mục tiêu kiểm định lạiquá trình tiến hành những nhiệm vụ của font-kết thúc bên trên những trình duyệt y khác biệt.

src:Thư mục chứa toàn bộ mã code của ứng dụng.

.angular-cli.json:tệp tin đựng biết tin cấu hình được sử dụng do Angular Cli, văn bản của file đượcđặt tả theo .json. Nó đựng báo cáo của thương hiệu file .html được chạy đầu tiên của ứngdụng, những tệp tin typescrip được nạp vào quy trình chạy ứng dụng, những cấu hình đểtrỏ cho băng thông những tệp tin typescript vào Source Code và trong Test.

.editorconfig: File đựng đọc tin về biên tập

karma.conf.js: tệp tin này được sử dụng là nguồn vào cho quy trình chạy karma thử nghiệm. Toàn bộ những nộidung liên quan của tệp tin này được sử dụng để cấu hình cho Karma demo.

package.json: Liệt kê list các thỏng viện được sử dụng trong vận dụng cũng tương tự thiết lậpcác câu lệnh nhằm tiến hành bài toán chạy, dịch, thử nghiệm ứng dụng.

protractor.conf.js: File thông số kỹ thuật cất các đọc tin thông số kỹ thuật nhằm chạy end-to-kết thúc test lúc sử dụngprotractor.

tsconfig.json : Filebáo cáo thông số kỹ thuật được thực hiện lúc tiến hành biên dịch Typescript.

tslint.json: Chứa hẹn thông tin thông số kỹ thuật về luật lệ kiểmtra các đoạn mã của Typescrip lúc được viết vào áp dụng.

4.Một số những câu lệnh cơ phiên bản của Angilar Cli

+ Chạy chương trình : Các bạn sử dụng câulệnh : ng server

+Dịch công tác : Các bạn sử dụng câu lệnh : ng build

+Test chương thơm trình: Các bạn sử dụng câu lệnh : ng test

+ Kiểm tra cú pháp TypeScrip : Các các bạn áp dụng câulệnh : ng lint

Các câu lệnh này đềuđược diễn tả trong file package.json

Các câu lệnh thườngsử dụng khác:

+ Tạo Component : Các bạn sử dụng câulệnh : ng g component my-new-component

+Tạo Service : Các bạn áp dụng câu lệnh : ng g service my-new-service

+Tạo Module : Các các bạn áp dụng câu lệnh : ng g module my-module

+TạoClass: Các bạn sử dụng câu lệnh : ng g class my-new-class

+TạoInterface: Các các bạn áp dụng câu lệnh : ng g class my-new-class

+TạoEnum: Các bạn áp dụng câu lệnh : ng g enum my-new-enum

+TạoPipe: Các các bạn thực hiện câu lệnh : ng g pipe my-new-pipe

Để biết thêm chingày tiết các bạn cũng có thể vào trang angular.io hoặc https://github.com/angular/angular-cliđể phân tích sâu hơn về Angular Cli.

Bài viết liên quan