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

Lưu ý : Bạn cần nắm vững cơ bản về Angular JS để mở màn bài học kinh nghiệm này. Nếu bạn cần tìm hiểu và khám phá thêm hoặc ôn tập lại những kỹ năng và kiến thức về AngularJS thì bạn hoàn toàn có thể tìm hiểu thêm 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 kiến thiết xây dựng và chạy một dự án Bất Động Sản Angular đơn thuầ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 tất cả chúng ta mở hành lang cửa số dòng lệnh ( hoặc chương trình Windows Command Prompt nếu bạn sử dụng hệ quản lý và đ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 hành lang cửa số dòng lệnh bạn chạy câu lệnh sau đây để setup 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 setup xong Angular CLI thì việc tạo một dự án Bất Động Sản Angular hoàn toàn có thể được thực thi một cách đơn thuần trải 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 chừng thời hạn nhất định, bạn hãy kiên trì chờ đón hoặc hoàn toàn có thể rời bạn thao tá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ông dễ chịu vì phải chờ đón .

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 đó update nội dung bên trong tập tin như sau :

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

Sau khi lưu biến hóa ở trên và load lại trang trên trình duyệt bạn sẽ thấy tác dụng hiển thị lúc này cũng đã được tự động hóa update .

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 tác dụng như sau :

Tới đây tất cả chúng ta đã kết thúc khám phá về cách setup và sử dụng công cụ Angular CLI để tạo một ứng dụng tiên phong. Trong những bài viết tiếp theo tất cả chúng ta sẽ tìm hiểu và khám phá cách sử dụng Angular CLI để triển khai những tác vụ phức tạp hơn .

Source: https://mindovermetal.org
Category: Wiki là gì