Angular cli là gì

Nếu bạn đã từng có lần code ng2 thì hẳn bạn sẽ bị confuse Lúc tổ chức các file/module, vấn đề này dẫn đến việc maintain/nâng cấp sau này đang gặp gỡ tương đối nhiều khó khăn Chính do vậy nên Google đang đã tạo ra một biện pháp siêu mạnh mẽ sẽ giúp mang đến dev quản lý được project tốt rộng. Đó là Angular Cli.

Angular CLI Là Gì?

Angular CLI là một trong chế độ được cải tiến và phát triển đề chạy trên hình ảnh cửa sổ ứng dụng (comm& line interface giỏi CLI) nhằm mục tiêu hỗ trợ câu hỏi tạo dự án công trình, thống trị tập tin vào dự án cùng thực hiện những tác vụ không giống nhau nlỗi chạy thử (kiểm thử), bundle cùng deploy dự án một cách nhanh chóng với công dụng.

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

Cài đặt Angular CLI

1. Cấu hình

AngularCli thưởng thức Node từ 6.9.0 trở lên mới NPM 3.0 trsinh hoạt lên Để kiểm tra version 2 thằng này, ta chạy 2 lệnh sau : node -v giành riêng cho NodeJs npm -v giành riêng cho NPM Sau lúc đang chất vấn kết thúc phiên bản của 2 thằng trên thì ta setup CLI với lệnh : npm install -g
angular/cli Để chất vấn coi tôi đã cài đặt thành công xuất sắc giỏi không, ta chạy lệnh : ng version. Ta sẽ được kết quả nhỏng sau

_ _ ____ _ ___/ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|/ △ | "_ / _` | | | | |/ _` | "__| | | | | | |/ ___ | | | | (_| | |_| | | (_| | | | |___| |___ | |/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/
angular/cli: 1.0.0node: 7.6.0os: linux x642. Tạo project mới

Để tạo 1 project thì ta chạy lệnh

ng new ProjectName

ProjectName : nên ban đầu bằng vần âm và chỉ được cất kí trường đoản cú alphanumeric hoặc /

Tại trên đây mình tốt sử dụng thêm 1 option nữa --style=scss, lệnh này vẫn đặt scss làm style mặc định của vận dụng. Quý Khách hoàn toàn có thể code trong file scss được xuất hiện với ứng dụng vẫn từ bỏ build ra file css. Quý Khách rất có thể lựa chọn css hoặc sass tùy ý Nếu bạn đã có project sẵn cùng muốn chuyển sang trọng stylesheet khác. Ta chạy lệnh ng mix defaults.styleExt scss Sau 1 thời điểm thì ta sẽ sở hữu được hồ hết thứ tiếp sau đây :

*

Cùng khám phá chân thành và ý nghĩa của các tệp tin vào thư mục phầm mềm nhé :

FilesÝ nghĩa
app/app.component.ts,html,css,spec.tsĐịnh nghĩa hầu hết AppComponent cùng với HTML template, CSS stylesheet cùng unit demo. Nó sẽ là component root để trở nên tân tiến áp dụng của chúng ta sau này
app/app.module.tsKnhị báo AppModule. Đây là root module, là vị trí ta đã knhì báo gần như component nhưng mà ta đang cần sử dụng vào ứng dụng
assets/Folder nhưng chúng ta để hình họa hoặc bất kể sản phẩm gì nhằm copy vào ứng dụng của bạn. VD : fonts, css, js...
environments/Nghe tên là đang biết chân thành và ý nghĩa của chính nó rồi buộc phải không. Folder này dùng làm khai báo đông đảo môi trường thiên nhiên nhằm cách tân và phát triển VD : development, hàng hóa...
index.htmlKhi client truy vấn vào vận dụng của khách hàng, thì tức là họ đang truy vấn vào file này đấy. Phần lớn thời hạn thì các bạn sẽ không cần thiết phải sửa file này.

Xem thêm: Cuộc Sống Ricky Martin Việt Nam Là Ai, Nam Ca Sĩ Lừng Danh Ricky Martin Cùng

Angular CLI auto thêm các tệp tin js, css lúc cơ mà ta ta build app ra bạn dạng product. Quá ngon cần ko !!
main.tsThe main entry point của áp dụng. Kết hợp ứng dụng với JIT compiler cùng bootstraps the application"s root module (AppModule) nhằm chạy xe trên browser
polyfills.tsSupport mang lại đều browser nhằm hoàn toàn có thể chạy được ứng dụng
styles.cssFile css của toàn ứng dụng
thử nghiệm.tsThis is the main entry point for your unit tests
tsconfig.app/spec.jsonCấu hình bộ biên dịch cho TypeScript với unit tests

3. Chạy thử

Với lệnh ng serve sầu thì CLI sẽ biên dịch phần nhiều tệp tin ts vào build lên port khoác định là 4200

Nếu ko say mê port khoác định, chúng ta cũng có thể chỉ định và hướng dẫn mang đến CLI biết bạn muốn port nào bằng option : ng serve sầu --host 0.0.0.0 --port 4201

Thử truy cập localhost:4200 xem sao làm sao

*

Một điều độc đáo đó là khi bạn đổi khác bất kỳ file như thế nào vào ứng dụng, CLI sẽ tự động biên dịch & reload lại browser

4. Generating Components, Directives, Pipes và Services

Quý khách hàng chỉ cần run ng generate (hoặc dễ dàng và đơn giản là ng g) Thử gen ra 1 component coi nó bao gồm gì làm sao : ng g component contact

/var/www/html/demo-ng2$ ng g component contactinstalling component create src/app/contact/contact.component.scss create src/app/contact/contact.component.html create src/app/contact/contact.component.spec.ts create src/app/contact/contact.component.ts update src/app/ứng dụng.module.tsTa thấy là CLI tạo nên ta 4 file (.ts, .html, .spec.ts, .scss) trong 1 folder new src/app/tương tác bên cạnh đó import component vừa tạo ra vào src/app/tiện ích.module.ts. Công bài toán còn lại của bọn họ là viết xúc tích vào component đó (thừa thuận lợi đề xuất không)

Ngoài component, CLI còn support ta generate ra những sản phẩm khác nữa :

ScaffoldUsage
Componentng g component my-new-component
Directiveng g directive sầu my-new-directive
Pipeng g pipe my-new-pipe
Serviceng g service my-new-service
Classng g class my-new-class
Guardng g guard my-new-guard
Interfaceng g interface my-new-interface
Enumng g enum my-new-enum
Moduleng g module my-module

5. Cài đặt 3rd Party Library

Trong quá trình phát triển vận dụng, kiên cố chặn các bạn sẽ cần phải sử dụng gần như thư viện js phía bên ngoài như : lodash, underscore... Với php thường thì, ta chỉ việc nạp tệp tin js/css của lib đó vào và giết. Nhưng cùng với ng2 thì lại buộc phải thêm vài bước nữa mới xài được Mình đã thử sở hữu lodash nhé : Trước tiên đề xuất mua lodash trải qua npm bằng command : npm install lodash --save sầu Sau kia cần cài đặt thêm cỗ biên dịch giành cho TypeScript nữa : npm install
types/lodash --save sầu - Nếu library của công ty được viết bên trên căn nguyên Typescript thì làm lơ bước này) Giờ thì lodash đã có được cài đặt thành công xuất sắc, các bạn chỉ cần import nó vào mọi component nhưng mình dùng thôi

import * as _ from "lodash";

6. Build Application

Sau 1 thời gian trở nên tân tiến, cũng buộc phải đến cơ hội release sản phẩm của mình rồi. Thế tuy vậy ngó lại trong dự án công trình, bạn lại thấy toàn phần nhiều file ts. Quý khách hàng chột dạ. Thế này thì browser hiểu cố méo làm sao được nhỉ. Trước cho tới giờ đồng hồ chỉ thấy browser đọc đông đảo tệp tin html/css/js thôi cơ mà Đừng lo, bởi vì CLI đã support đến tận khi release ứng dụng nhưng Tất nhiên là chúng ta cần thiết quăng quật cả đống code toàn đa số file .ts lên host nhằm chạy được rồi. quý khách hàng vẫn rất cần phải biên dịch tệp tin .ts lịch sự file .js bằng comm& sau