Angular CLI Là Gì? Hướng Dẫn Chi Tiết Từ A Đến Z Cho Người Mới Bắt Đầu

Nếu bạn đã từng phát triển ứng dụng Angular (phiên bản 2 trở lên), chắc hẳn bạn đã gặp khó khăn trong việc tổ chức cấu trúc thư mục và module. Điều này có thể dẫn đến những vấn đề lớn khi bảo trì và nâng cấp dự án. Để giải quyết vấn đề này, Google đã giới thiệu một công cụ mạnh mẽ giúp các nhà phát triển quản lý dự án hiệu quả hơn: Angular CLI.

Giao diện dòng lệnh Angular CLI giúp quản lý dự án hiệu quảGiao diện dòng lệnh Angular CLI giúp quản lý dự án hiệu quả

Angular CLI Là Gì?

Angular CLI (Command Line Interface) là một công cụ dòng lệnh giúp đơn giản hóa quá trình phát triển ứng dụng Angular. Nó cung cấp các lệnh để tạo dự án mới, thêm các thành phần (component), dịch vụ (service), module và nhiều tính năng khác một cách nhanh chóng và dễ dàng. Angular CLI tự động hóa nhiều tác vụ phức tạp, giúp nhà phát triển tập trung vào việc xây dựng logic nghiệp vụ thay vì cấu hình dự án.

Những lợi ích chính của Angular CLI:

  • Tăng tốc độ phát triển: Tạo dự án, component, service… chỉ với một vài dòng lệnh.
  • Cấu trúc dự án chuẩn: Đảm bảo dự án được tổ chức theo một cấu trúc nhất quán, dễ bảo trì và nâng cấp.
  • Tự động hóa các tác vụ: CLI tự động hóa các tác vụ như biên dịch, kiểm thử, đóng gói và triển khai ứng dụng.
  • Dễ dàng tích hợp: Tích hợp dễ dàng với các thư viện và công cụ khác trong hệ sinh thái Angular.

Phiên bản hiện tại của Angular CLI là 1.0.0, được phát hành vào ngày 24/03/2017 và liên tục được cải tiến bởi đội ngũ phát triển. Tuy nhiên, các phiên bản hiện tại vẫn giữ nguyên các nguyên tắc và cú pháp cơ bản, vì vậy hướng dẫn này vẫn hữu ích cho người mới bắt đầu.

Cài Đặt Angular CLI

1. Yêu cầu hệ thống:

Trước khi cài đặt Angular CLI, bạn cần đảm bảo hệ thống của mình đáp ứng các yêu cầu sau:

  • Node.js: Phiên bản 6.9.0 trở lên.
  • npm: Phiên bản 3.0 trở lên.

Để kiểm tra phiên bản Node.js và npm, hãy mở terminal hoặc command prompt và chạy các lệnh sau:

node -v
npm -v

Nếu phiên bản Node.js hoặc npm của bạn thấp hơn yêu cầu, hãy cập nhật lên phiên bản mới nhất.

2. Cài đặt Angular CLI:

Để cài đặt Angular CLI, hãy sử dụng lệnh sau:

npm install -g @angular/cli

Lệnh này sẽ cài đặt Angular CLI một cách глобально trên hệ thống của bạn, cho phép bạn sử dụng nó từ bất kỳ thư mục nào.

3. Kiểm tra cài đặt:

Sau khi cài đặt xong, bạn có thể kiểm tra xem Angular CLI đã được cài đặt thành công hay chưa bằng cách chạy lệnh sau:

ng version

Nếu Angular CLI đã được cài đặt thành công, bạn sẽ thấy thông tin về phiên bản Angular CLI, phiên bản Node.js và hệ điều hành của bạn.

Ví dụ:

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

4. Tạo dự án mới:

Để tạo một dự án Angular mới, hãy sử dụng lệnh sau:

ng new ProjectName

Trong đó, ProjectName là tên của dự án bạn muốn tạo. Lưu ý: Tên dự án phải bắt đầu bằng một chữ cái và chỉ được chứa các ký tự chữ và số hoặc dấu gạch ngang (-).

Bạn có thể thêm tùy chọn --style=scss để đặt SCSS làm ngôn ngữ стилей mặc định cho ứng dụng. Khi đó, bạn có thể viết code CSS trong các file SCSS và Angular CLI sẽ tự động biên dịch chúng thành file CSS. Bạn cũng có thể chọn CSS hoặc SASS tùy theo sở thích.

Nếu bạn đã có một dự án Angular và muốn chuyển sang sử dụng một stylesheet khác, bạn có thể sử dụng lệnh sau:

ng set sentayho.com.vnExt scss

Sau khi chạy lệnh này, Angular CLI sẽ tạo ra các file và thư mục cần thiết cho dự án của bạn.

Cấu trúc thư mục dự án Angular sau khi tạo bằng CLICấu trúc thư mục dự án Angular sau khi tạo bằng CLI

Ý nghĩa của các file và thư mục quan trọng:

  • app/app.component.{ts,html,css,spec.ts}: Định nghĩa AppComponent, bao gồm HTML template, CSS stylesheet và các unit test. Đây là component gốc của ứng dụng.
  • app/sentayho.com.vn: Khai báo AppModule, root module của ứng dụng. Đây là nơi bạn khai báo các component, service và module khác mà bạn sẽ sử dụng trong ứng dụng.
  • assets/: Chứa các tài nguyên tĩnh như hình ảnh, fonts, CSS, JavaScript…
  • environments/: Chứa các file cấu hình cho các môi trường phát triển khác nhau (ví dụ: development, production).
  • sentayho.com.vn: File HTML gốc được tải khi người dùng truy cập ứng dụng của bạn.
  • sentayho.com.vn: Điểm vào chính của ứng dụng.
  • sentayho.com.vn: Hỗ trợ cho các trình duyệt khác nhau.
  • sentayho.com.vn: File CSS toàn cục cho ứng dụng.
  • sentayho.com.vn: Điểm vào chính cho các unit test.
  • tsconfig.{app/spec}.json: Cấu hình trình biên dịch TypeScript và các unit test.

5. Chạy thử ứng dụng:

Để chạy thử ứng dụng, hãy sử dụng lệnh sau:

ng serve

Lệnh này sẽ biên dịch các file TypeScript và khởi động một web server trên cổng 4200 (mặc định).

Nếu bạn muốn sử dụng một cổng khác, bạn có thể chỉ định nó bằng tùy chọn --port:

ng serve --host 0.0.0.0 --port 4201

Sau đó, bạn có thể truy cập ứng dụng của mình bằng cách mở trình duyệt và truy cập địa chỉ localhost:4200 (hoặc cổng bạn đã chỉ định).

Ứng dụng Angular chạy trên localhostỨng dụng Angular chạy trên localhost

Một tính năng rất hữu ích của Angular CLI là nó sẽ tự động biên dịch và tải lại trình duyệt mỗi khi bạn thay đổi bất kỳ file nào trong ứng dụng.

6. Tạo Components, Directives, Pipes và Services:

Angular CLI cung cấp các lệnh để tạo các thành phần, directive, pipe và service một cách nhanh chóng và dễ dàng. Bạn có thể sử dụng lệnh ng generate (hoặc viết tắt là ng g) để tạo các thành phần này.

Ví dụ, để tạo một component mới có tên là contact, hãy sử dụng lệnh sau:

ng g component contact

Lệnh này sẽ tạo ra 4 file:

  • src/app/contact/sentayho.com.vn
  • src/app/contact/sentayho.com.vn
  • src/app/contact/sentayho.com.vn
  • src/app/contact/sentayho.com.vn

và tự động import component này vào src/app/app.module.ts.

Bạn có thể sử dụng các lệnh tương tự để tạo các directive, pipe và service:

ng g directive my-new-directive
ng g pipe my-new-pipe
ng g service my-new-service

Ngoài ra, Angular CLI còn hỗ trợ tạo các class, guard, interface, enum và module:

ng g class my-new-class
ng g guard my-new-guard
ng g interface my-new-interface
ng g enum my-new-enum
ng g module my-module

7. Cài đặt thư viện bên ngoài (3rd Party Library):

Trong quá trình phát triển ứng dụng, bạn thường cần sử dụng các thư viện JavaScript bên ngoài như Lodash hoặc Underscore. Angular CLI giúp bạn cài đặt và sử dụng các thư viện này một cách dễ dàng.

Ví dụ, để cài đặt Lodash, hãy sử dụng lệnh sau:

npm install lodash --save

Sau đó, nếu thư viện Lodash được viết trên nền tảng Typescript, bạn cần cài đặt thêm bộ biên dịch dành cho TypeScript:

npm install @types/lodash --save

(Nếu thư viện của bạn không được viết trên nền tảng Typescript thì bỏ qua bước này)

Sau khi cài đặt xong, bạn có thể import Lodash vào các component mà bạn muốn sử dụng:

import * as _ from 'lodash';

8. Đóng gói ứng dụng (Build Application):

Khi bạn đã hoàn thành việc phát triển ứng dụng, bạn cần đóng gói nó để có thể triển khai lên server. Angular CLI cung cấp lệnh ng build để thực hiện việc này.

ng build --environment="prod"

Lệnh này sẽ biên dịch các file TypeScript sang JavaScript và tạo ra một thư mục mới có tên là dist. Thư mục này chứa tất cả các file cần thiết để chạy ứng dụng của bạn trên server.

Thư mục dist chứa các file đã được biên dịchThư mục dist chứa các file đã được biên dịch

Bạn có thể tải thư mục dist lên server của mình và chạy ứng dụng.

Kết luận

Angular CLI là một công cụ mạnh mẽ giúp đơn giản hóa quá trình phát triển ứng dụng Angular. Nó cung cấp các lệnh để tạo dự án mới, thêm các thành phần, dịch vụ, module và nhiều tính năng khác một cách nhanh chóng và dễ dàng. Nếu bạn là một nhà phát triển Angular, Angular CLI là một công cụ không thể thiếu trong bộ công cụ của bạn.