Angular cli là gì

 - 

Nếu các bạn đã thân quen cùng với Việc tạo nên các dự án Angular bằng tay thủ công sử dụng những điều khoản IDE hoặc code editor thì bây giờ chúng ta có thể thực hiện luật Angular CLI. Một hiện tượng vô cùng hữu dụng góp chúng ta cũng có thể xây cất những ứng dụng Angular một phương pháp nhanh hao rộng với công dụng hơn.

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

*

Lưu ý: Quý Khách cần nắm vững cơ bản về Angular JS nhằm bắt đầu bài học kinh nghiệm này. Nếu bạn phải tìm hiểu thêm hoặc ôn tập lại những kiến thức về AngularJS thì chúng ta cũng có thể tham khảo khoá khuyên bảo về AngularJS Cơ Bản.

Angular CLI Là Gì

Angular CLI là 1 trong những hiện tượng được cải cách và phát triển đề điều khiển xe trên bối cảnh cửa sổ vận dụng (comm& line interface xuất xắc CLI) nhằm giúp sức bài toán tạo nên dự án, thống trị tập tin vào dự án công trình và tiến hành các tác vụ khác nhau nlỗi chạy thử (kiểm thử), bundle cùng deploy dự án công trình một phương pháp mau lẹ cùng tác dụng.

Bài viết này sẽ lý giải chúng ta bí quyết chế tạo cùng chạy một dự án Angular đơn giản và dễ dàng thực hiện TypeScript.

Cách 1: Set up Môi Trường Phát Triển

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

Để chất vấn phiên bạn dạng của Node.js tất cả trên sản phẩm công nghệ họ Open sổ loại lệnh (hoặc công tác Windows Command Prompt nếu khách hàng áp dụng hệ điều hành Windows) và chạy câu lệnh bên dưới đây:

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

$ npm -vTiếp theo vẫn trên cửa sổ loại lệnh chúng ta chạy câu lệnh sau đây nhằm thiết đặt Angular CLI:

$ npm install -g
angular/cliTrên hệ điều Linux thì trong một số trường phù hợp rất có thể máy vi tính báo lỗi bắt buộc chạy được câu lệnh trên do thiếu thốn quyền, trường vừa lòng này các bạn sẽ bắt buộc chạy câu lệnh trên thực hiện quyền admin (tuyệt thêm sudovào phía đằng trước câu lệnh).

Xem thêm: ©️ Huyền Đề Là Gì ? 18 Điều Thú Vị Về Bàn Chân Chó

Cách 2: Tạo Dự Án Angular

Sau Lúc thiết lập xong xuôi Angular CLI thì Việc sinh sản một dự án công trình Angular có thể được thực hiện một cách đơn giản và dễ dàng trải qua câu hỏi chạy câu lệnh sau:

$ ng new my-appCâu lệnh trên đang tốn một khoảng thời hạn nhất thiết, các bạn hãy kiên trì mong chờ hoặc rất có thể tránh chúng ta thao tác làm việc và trộn cho khách hàng một tách bóc coffe hoặc uống một ly nước nhằm không hẳn cảm giác khó chịu vì chưng đề xuất chờ đón.

Cách 3: Chạy Ứng Dụng

Sau Lúc câu lệnh bên trên ngừng, bạn sẽ thấy một thỏng mục cùng với thương hiệu my-phầm mềm đã có Angular CLI tạo thành ngơi nghỉ phía bên trong tlỗi mục ứng với tlỗi mục hiện thời bên trên cửa sổ loại lệnh. Đây chính là tlỗi mục dự án công trình Angular. quý khách cũng có thể chạy câu lệnh ls nhằm soát sổ nkhô cứng sự mãi mãi của thư mục này:

$ lsTiếp theo để chạy áp dụng my-ứng dụng chúng ta di chuyển vào bên phía trong thư mục này áp dụng câu lệnh:

$ cd my-appRồi kế tiếp chạy:

$ ng serve --openCâu lệnh ng serve đang khởi hễ website server được tích đúng theo thuộc Angular CLI khi thiết đặt cùng tiếp nối chạy dự án Angular. Đồng thời cùng với câu lệnh này Angular CLI cũng trở nên theo dõi và quan sát (watch) sự thay đổi của các tập tin cùng thỏng mục phía bên trong áp dụng Angular. Nếu tất cả bất kỳ sự đổi khác này thì Angular CLI đã tự động build lại áp dụng.

Tuỳ lựa chọn --open trong câu lệnh trên sẽ tự động mlàm việc trình chú ý cùng truy cập vào xúc tiến http://localhost:4200/. Quý Khách sẽ trình chăm sóc hiển thị công dụng nlỗi sau:

*

Chỉnh Sửa Angular Component

Sau Khi chạy câu lệnh tạo ra dự án công trình thì Angular CLI đã khiến cho chúng ta một component thứ nhất. Đây là 1 root component cùng có tên là app-root. Quý Khách hoàn toàn có thể tìm kiếm thấy tập tin cất component này tại địa chỉ băng thông src/app/phầm mềm.component.ts phía bên trong tlỗi mục my-tiện ích.

Sử dụng code editor hoặc IDE nhằm msinh sống tập tin này rồi tiếp nối cập nhật văn bản bên trong tập tin nhỏng sau:

export class AppComponent title = "My First Angular App";Sau khi lưu chuyển đổi ở trên với load lại trang trên trình chu đáo bạn sẽ thấy tác dụng hiển thị hôm nay cũng sẽ được auto update.

Xem thêm: Nghĩa Của Từ Polaris Là Gì

Tiếp theo chúng ta mnghỉ ngơi tập tin src/app/phầm mềm.component.css trong my-tiện ích và biến đổi ngôn từ như sau:

h1 color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%;Lúc bấy giờ lúc tải lại trang trên trình ưng chuẩn bạn sẽ thấy kết quả nlỗi sau:

*

Tới đây bọn họ sẽ hoàn thành tìm hiểu về kiểu cách setup cùng sử dụng lao lý Angular CLI nhằm tạo thành một vận dụng thứ nhất. Trong những bài viết tiếp sau chúng ta sẽ tìm hiểu bí quyết thực hiện Angular CLI nhằm tiến hành những tác vụ tinh vi rộng.


Chuyên mục: Chia sẻ