Nếu chúng ta đã quen thuộc với vấn đề tạo các dự án Angular bằng tay thủ công sử dụng những công cố gắng IDE hoặc code editor thời giờ đây bạn cũng có thể sử dụng cơ chế Angular CLI. Một phương pháp vô cùng bổ ích giúp chúng ta có thể xây dựng các ứng dụng Angular một phương pháp nhanh hơn và tác dụng hơn.Bạn đang xem: Angular cli là gì


*

Lưu ý: các bạn cần nắm rõ cơ phiên bản về Angular JS để bắt đầu bài học này. Nếu như bạn cần đọc thêm hoặc ôn tập lại những kiến thức về AngularJS thì chúng ta có thể tham khảo khoá trả lời về AngularJS Cơ Bản.

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

Angular CLI Là Gì

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

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

Bước 1: mix up môi trường thiên nhiên Phát Triển

Bước thứ nhất mà họ cần làm sẽ là set up môi trường thiên nhiên phát triển. Để làm điều đó thì yên cầu trên sản phẩm tính của doanh nghiệp cần được setup Node.js. Để thực hiện 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 dạng của Node.js bao gồm trên máy bọn họ mở hành lang cửa số dòng lệnh (hoặc lịch trình Windows Command Prompt nếu như bạn sử dụng hệ điều hành và quản lý Windows) với chạy câu lệnh dưới đây:

$ npm -vĐối cùng với NPM câu lệnh này đang là:

$ npm -vTiếp theo vẫn trên hành lang cửa số dòng lệnh bạn chạy câu lệnh tiếp sau đây để thiết lập Angular CLI:

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

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

$ ng new my-appCâu lệnh trên vẫn tốn một khoảng thời gian nhất định, các bạn hãy kiên nhẫn chờ đợi hoặc có thể rời bạn thao tác và pha cho doanh nghiệp một bóc tách cafe hoặc uống một ly nước để không phải cảm thấy khó tính vì cần 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 thương hiệu my-app đã có được Angular CLI tạo nên ở bên phía trong thư mục ứng cùng với thư mục lúc này trên cửa sổ dòng lệnh. Đây đó là thư mục dự án công trình Angular. Chúng ta có thể chạy câu lệnh ls để bình chọn nhanh sự trường thọ của thư mục này:

$ lsTiếp theo nhằm chạy ứng dụng my-app bạn dịch chuyển vào bên trong thư mục này áp dụng câu lệnh:

$ cd my-appRồi sau đó chạy:

$ ng serve --openCâu lệnh ng serve đang khởi động web hệ thống được tích hợp cùng Angular CLI khi setup 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 những tập tin cùng thư mục phía bên trong ứng dụng Angular. Trường hợp có bất kỳ sự biến đổi này thì Angular CLI sẽ tự động build lại ứng dụng.

Tuỳ chọn --open vào câu lệnh trên sẽ tự động hóa mở trình săn sóc và truy cập vào showroom http://localhost:4200/. Các bạn sẽ trình để mắt tới hiển thị hiệu 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 trong root component và mang tên là app-root. Bạn có thể tìm thấy tập tin cất component này ở add đường dẫn src/app/app.component.ts bên phía trong thư mục my-app.

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

export class AppComponent title = "My First Angular App";Sau khi lưu chuyển đổi ở trên cùng load lại trang bên trên trình duyệt bạn sẽ thấy kết quả hiển thị hôm nay cũng vẫn được tự động hóa cập nhật.

Xem thêm: Lâm Chấn Khang Và Lâm Chấn Huy, Từng Là Đôi Bạn Thân

Tiếp theo các bạn mở tập tin src/app/app.component.css vào my-app và chuyển đổ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 bên trên trình duyệt các bạn sẽ thấy kết quả như sau:


*

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