Nếu bạn đã từng code ng2 thì hẳn bạn sẽ bị confuse lúc tổ chức các file/module, vấn đề đó dẫn đến sự việc maintain/upgrade trong tương lai sẽ gặp gỡ rất các khó khăn chính vì vậy phải Google đã cho ra một lao lý rất mạnh sẽ giúp cho dev cai quản được project giỏi hơn. Đó là Angular Cli.

Angular CLI Là Gì?

Angular CLI là 1 công núm được phát triển đề chạy trên giao diện cửa sổ ứng dụng (command line interface tốt CLI) nhằm hỗ trợ việc tạo dự án, làm chủ tập tin trong dự án và triển khai nhiều tác vụ khác nhau như chạy thử (kiểm thử), bundle và deploy dự án công trình một cách nhanh chóng và hiệu quả.

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

Cài đặt Angular CLI

1. Cấu hình

AngularCli yêu ước Node từ bỏ 6.9.0 trở lên new NPM 3.0 trở lên Để check version 2 thằng này, ta chạy 2 lệnh sau : node -v dành riêng cho NodeJs npm -v dành riêng cho NPM sau khi đã kiểm tra xong xuôi phiên bản của 2 thằng trên thì ta thiết đặt CLI với lệnh : npm install -g
angular/cli Để soát sổ xem mình đã thiết lập thành công xuất xắc chưa, ta chạy lệnh : ng version. Ta sẽ được kết quả như sau

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

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

ng new ProjectName

ProjectName : phải bắt đầu bằng chữ cái và chỉ được cất kí từ alphanumeric hoặc /

Ở trên đây mình xuất xắc dùng thêm một option nữa --style=scss, lệnh này đã đặt scss làm cho style mặc định của ứng dụng. Chúng ta cũng có thể code trong tệp tin scss được có mặt và áp dụng sẽ từ build ra tệp tin css. Chúng ta cũng có thể chọn css hoặc sass tùy ý Nếu bạn đã có project sẵn và ước ao chuyển sang stylesheet khác. Ta chạy lệnh ng set defaults.styleExt scss Sau 1 thời điểm thì ta sẽ có những thứ dưới đây :

*

Cùng tìm kiếm hiểu ý nghĩa của gần như file trong thư mục app nhé :

FilesÝ nghĩa
app/app.component.ts,html,css,spec.tsĐịnh nghĩa đa số AppComponent cùng rất HTML template, CSS stylesheet với unit test. Nó đang là component root để cải tiến và phát triển ứng dụng của bọn họ sau này
app/app.module.tsKhai báo AppModule. Đây là root module, là nơi ta vẫn khai báo hầu hết component nhưng ta sẽ dùng trong ứng dụng
assets/Folder mà bạn để hình ảnh hoặc bất cứ thứ gì để copy trong ứng dụng của bạn. VD : fonts, css, js...
environments/Nghe thương hiệu là đang biết chân thành và ý nghĩa của nó rồi đề xuất không. Thư mục này dùng để làm khai báo những môi trường thiên nhiên để trở nên tân tiến VD : development, product...
index.htmlKhi client truy vấn vào vận dụng của bạn, thì có nghĩa là họ đang truy cập vào file này đấy. đa phần thời gian thì bạn sẽ không rất cần phải sửa file này. Angular CLI auto thêm số đông file js, css khi cơ mà ta ta build app ra bạn dạng product. Thừa ngon phải không !!
main.tsThe main entry point của ứng dụng. Phối kết hợp ứng dụng cùng với JIT compiler cùng bootstraps the application"s root module (AppModule) để chạy trên browser
polyfills.tsSupport cho những browser để hoàn toàn có thể chạy được ứng dụng
styles.cssFile css của toàn ứng dụng
test.tsThis is the main entry point for your unit tests
tsconfig.app/spec.jsonCấu hình cỗ biên dịch mang lại TypeScript và unit tests

3. Chạy thử

Với lệnh ng serve thì CLI đang biên dịch phần đông file ts vào build lên port mang định là 4200

Nếu không thích port khoác định, bạn có thể chỉ định mang đến CLI biết bạn có nhu cầu port nào bởi option : ng serve --host 0.0.0.0 --port 4201

Thử truy vấn localhost:4200 xem sao như thế nào

*

Một điều thích thú đó là khi bạn thay đổi bất kì file nào trong ứng dụng, CLI sẽ tự động hóa biên dịch & reload lại browser

4. Generating Components, Directives, Pipes and Services

Bạn chỉ việc run ng generate (hoặc dễ dàng và đơn giản là ng g) Thử ren ra 1 component xem nó bao gồm gì nào : 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/app.module.tsTa thấy là CLI khiến cho ta 4 tệp tin (.ts, .html, .spec.ts, .scss) vào 1 thư mục mới src/app/contact đôi khi import component vừa tạo ra vào src/app/app.module.ts. Công việc còn lại của bọn họ là viết xúc tích và ngắn gọn trong component đó (quá tiện lợi phải không)

Ngoài component, CLI còn tư vấn ta generate ra nhiều thứ khác nữa :

ScaffoldUsage
Componentng g component my-new-component
Directiveng g directive 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. Setup 3rd tiệc nhỏ Library

Trong quá trình trở nên tân tiến ứng dụng, có thể chặn các bạn sẽ cần phải áp dụng những thư viện js bên phía ngoài như : lodash, underscore... Cùng với php thông thường, ta chỉ việc nạp tệp tin js/css của lib đó vào với thịt. Nhưng với ng2 thì lại nên thêm vài cách nữa bắt đầu xài được Mình đang thử download lodash nhé : Đầu tiên cần cài lodash thông qua npm bằng command : npm install lodash --save kế tiếp phải mua thêm cỗ biên dịch giành cho TypeScript nữa : npm install
types/lodash --save - giả dụ library của doanh nghiệp được viết trên nền tảng Typescript thì bỏ qua mất bước này) tiếng thì lodash đang được thiết lập thành công, bạn chỉ việc import nó vào hầu như component nhưng mình dùng thôi

import * as _ from "lodash";

6. Build Application

Sau 1 thời gian phát triển, cũng yêu cầu đến cơ hội release sản phẩm của chính mình rồi. Mặc dù vậy ngó lại vào dự án, bạn lại thấy toàn phần đa file ts. Chúng ta chột dạ. Thế này thì browser đọc thay méo nào được nhỉ.

Xem thêm: Giải Bài Tập Mai Lan Hương Lớp 9 Unit 7, Giải Bài Tập Mai Lan Hương Lớp 9 Test For Unit 7

Trước tới tiếng chỉ thấy browser đọc mọi file html/css/js thôi nhưng Đừng lo, vày CLI sẽ tư vấn đến tận khi release ứng dụng mà tất nhiên là chúng ta không thể bỏ cả gò code toàn đa số file .ts lên host nhằm chạy được rồi. Các bạn sẽ cần yêu cầu biên dịch file .ts sang file .js bởi command sau