Hướng Dẫn Cài Đặt và Sử Dụng Angular CLI

Nếu bạn đã quen với việc tạo các dự án Angular thủ công sử dụng các công cụ IDE hoặc code editor thì giờ đây bạn có thể sử dụng công cụ Angular CLI. Một công cụ vô cùng hữu hiệu giúp chúng ta có thể xây dựng các ứng dụng Angular một cách nhanh hơn và hiệu quả hơn.

Lưu ý: Bạn cần nắm vững cơ bản về Angular JS để bắt đầu bài học này. Nếu bạn cần tìm hiểu thêm hoặc ôn tập lại các kiến thức về AngularJS thì bạn có thể tham khảo khoá hướng dẫn về AngularJS Cơ Bản.

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ả.

Bài viết này sẽ hướng dẫn bạn cách xây dựng và chạy một dự án Angular đơn giản sử dụng TypeScript.

Bước 1: Set up Môi Trường Phát Triển

Bước đầu tiên mà chúng ta cần làm đó là set up môi trường phát triển. Để làm điều này thì đòi hỏi trên máy tính của bạn cần được cài đặt Node.js. Để sử dụng Angular CLI thì bạn cài đặt Node.js phiên bản 6.9.x và NPM (node package manager) phiên bản 3.x.x.

Để kiểm tra phiên bản của Node.js có trên máy chúng ta mở cửa sổ dòng lệnh (hoặc chương trình Windows Command Prompt nếu bạn sử dụng hệ điều hành Windows) và chạy câu lệnh dưới đây:

$ npm -v

Đối với NPM câu lệnh này sẽ là:

$ npm -v

Tiếp theo vẫn trên cửa sổ dòng lệnh bạn chạy câu lệnh sau đây để cài đặt Angular CLI:

$ npm install -g @angular/cli

Trên hệ điều Linux thì trong một số trường hợp có thể máy tính báo lỗi không thể chạy được câu lệnh trên do thiếu quyền, trường hợp này bạn sẽ cần chạy câu lệnh trên sử dụng quyền admin (hay thêm sudovào phía trước câu lệnh).

Bước 2: Tạo Dự Án Angular

Sau khi cài đặt xong Angular CLI thì việc tạo một dự án Angular có thể được thực hiện một cách đơn giản thông qua việc chạy câu lệnh sau:

$ ng new my-app

Câu lệnh trên sẽ tốn một khoảng thời gian nhất định, bạn hãy kiên nhẫn chờ đợi hoặc có thể rời bạn làm việc và pha cho mình một tách cafe hoặc uống một ly nước để không phải cảm thấy khó chịu vì phải chờ đợi.

Bước 3: Chạy Ứng Dụng

Sau khi câu lệnh trên kết thúc, bạn sẽ thấy một thư mục với tên my-app đã được Angular CLI tạo ra ở bên trong thư mục ứng với thư mục hiện tại trên cửa sổ dòng lệnh. Đây chính là thư mục dự án Angular. Bạn cũng có thể chạy câu lệnh ls để kiểm tra nhanh sự tồn tại của thư mục này:

$ ls

Tiếp theo để chạy ứng dụng my-app bạn di chuyển vào bên trong thư mục này sử dụng câu lệnh:

$ cd my-app

Rồi sau đó chạy:

$ ng serve --open

Câu lệnh ng serve sẽ khởi động web server được tích hợp cùng Angular CLI khi cài đặt và sau đó chạy dự án Angular. Đồng thời với câu lệnh này Angular CLI cũng sẽ theo dõi (watch) sự thay đổi của các tập tin và thư mục bên trong ứng dụng Angular. Nếu có bất kỳ sự thay đổi này thì Angular CLI sẽ tự động build lại ứng dụng.

Tuỳ chọn --open trong câu lệnh trên sẽ tự động mở trình duyệt và truy cập vào địa chỉ http://localhost:4200/. Bạn sẽ trình duyệt hiển thị kết quả như sau:

Chỉnh Sửa Angular Component

Sau khi chạy câu lệnh tạo dự án thì Angular CLI đã tạo cho chúng ta một component đầu tiên. Đây là một root component và có tên là app-root. Bạn có thể tìm thấy tập tin chứa component này ở địa chỉ đường dẫn src/app/app.component.ts bên trong thư mục my-app.

Sử dụng code editor hoặc IDE để mở tập tin này rồi sau đó cập nhật nội dung bên trong tập tin như sau:

export class AppComponent {
  title = 'My First Angular App';
}

Sau khi lưu thay đổi ở trên và load lại trang trên trình duyệt bạn sẽ thấy kết quả hiển thị lúc này cũng đã được tự động cập nhật.

Tiếp theo bạn mở tập tin src/app/app.component.css trong my-app và thay đổi nội dung như sau:

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

Lúc này khi tải lại trang trên trình duyệt bạn sẽ thấy kết quả như sau:

Tới đây chúng ta đã kết thúc tìm hiểu về cách cài đặt và sử dụng công cụ Angular CLI để tạo một ứng dụng đầu tiên. Trong các bài viết tiếp theo chúng ta sẽ tìm hiểu cách sử dụng Angular CLI để thực hiện các tác vụ phức tạp hơn.