Angular CLI là gì ?

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

Angular CLI Là Gì?

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

AngularCli giúp dev tạo được một ứng dụng nhanh hơn, dễ dàng hơn qua những command đơn giản và quan trọng là giúp cho việc maintain/upgrade sau này của dự án Version hiện nay của Cli là 1.0.0 được release vào ngày 2017-03-24 và vẫn đang được các dev hoàn thiện hơn

Cài đặt Angular CLI

1. Cấu hình

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

_                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
          |___/
@angular/cli: 1.0.0
node: 7.6.0
os: linux x64

2. 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 chứa kí tự alphanumeric hoặc /

Ở đây mình hay dùng thêm 1 option nữa --style=scss, lệnh này sẽ đặt scss làm style mặc định của ứng dụng. Bạn có thể code trong file scss được sinh ra và ứng dụng sẽ tự build ra file css. Bạn có thể chọn css hoặc sass tùy ý Nếu bạn đã có project sẵn và muốn chuyển sang stylesheet khác. Ta chạy lệnh ng set defaults.styleExt scss Sau 1 lúc thì ta sẽ có những thứ sau đây :

Cùng tìm hiểu ý nghĩa của những file trong folder app nhé :

3. Chạy thử

Với lệnh ng serve thì CLI sẽ biên dịch những file ts vào build lên port mặc định là 4200

Nếu không thích port mặc định, bạn có thể chỉ định cho CLI biết bạn muốn port nào bằng option : ng serve --host 0.0.0.0 --port 4201

Thử truy cập localhost:4200 xem sao nào

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

4. Generating Components, Directives, Pipes and Services

Bạn chỉ cần run ng generate (hoặc đơn giản là ng g) Thử gen ra 1 component xem nó có gì nào : ng g component contact

/var/www/html/demo-ng2$ ng g component contact
installing 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.ts

Ta thấy là CLI tạo cho ta 4 file (.ts, .html, .spec.ts, .scss) trong 1 folder mới src/app/contact đồng thời import component vừa tạo ra vào src/app/app.module.ts. Công việc còn lại của chúng ta là viết logic trong component đó (quá tiện lợi phải không)

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

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

Trong quá trình phát triển ứng dụng, chắc chặn bạn sẽ cần phải sử dụng những thư viện js bên ngoài như : lodash, underscore... Với php thông thường, ta chỉ cần nạp file js/css của lib đó vào và thịt. Nhưng với ng2 thì lại cần thêm vài bước nữa mới xài được Mình sẽ thử cài lodash nhé : Đầu tiên phải cài lodash thông qua npm bằng command : npm install lodash --save Sau đó phải cài thêm bộ biên dịch dành cho TypeScript nữa : npm install @types/lodash --save - Nếu library của bạn được viết trên nền tảng Typescript thì bỏ qua bước này) Giờ thì lodash đã được cài đặt thành công, bạn chỉ cần import nó vào những component mà mình dùng thôi

import * as _ from 'lodash';

6. Build Application

Sau 1 thời gian phát triển, cũng phải đến lúc release sản phẩm của mình rồi. Thế nhưng ngó lại trong dự án, bạn lại thấy toàn những file ts. Bạn chột dạ. Thế này thì browser đọc thế méo nào được nhỉ. Trước tới giờ chỉ thấy browser đọc những file html/css/js thôi mà Đừng lo, vì CLI sẽ support đến tận khi release app mà Tất nhiên là bạn không thể vứt cả đống code toàn những file .ts lên host để chạy được rồi. Bạn sẽ cần phải biên dịch file .ts sang file .js bằng command sau

ng build --environment="prod"

Kết quả của lệnh trên là ta sẽ được 1 folder mới dist

Cho folder dist lên host của bạn và cảm nhận nhé