Angular cli là gì

Nếu các bạn đã thân quen cùng với vấn đề tạo các dự án Angular thủ công thực hiện những luật IDE hoặc code editor thì bây giờ bạn có thể thực hiện chế độ Angular CLI. Một lý lẽ cực kì hữu ích góp chúng ta cũng có thể xây đắp những ứng dụng Angular một giải pháp nkhô hanh rộng với công dụng rộng.

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

*

Lưu ý: quý khách hàng nên nắm vững cơ phiên bản về Angular JS để bắt đầu bài học kinh nghiệm này. Nếu bạn phải đọc thêm hoặc ôn tập lại các kỹ năng về AngularJS thì bạn có thể tìm hiểu thêm khoá lí giải về AngularJS Cơ Bản.

Angular CLI Là Gì

Angular CLI là một trong quy định được cải tiến và phát triển đề điều khiển xe trên đồ họa cửa sổ ứng dụng (command line interface tuyệt CLI) nhằm mục tiêu hỗ trợ việc chế tạo ra dự án công trình, làm chủ tập tin trong dự án cùng thực hiện những tác vụ không giống nhau nlỗi chạy thử (kiểm thử), bundle với deploy dự án một giải pháp hối hả và tác dụng.

Bài viết này vẫn khuyên bảo các bạn phương pháp xây đắp và chạy một dự án công trình 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

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

Để kiểm soát phiên bạn dạng của Node.js tất cả trên máy họ mở cửa sổ chiếc lệnh (hoặc công tác Windows Comm& Prompt nếu khách hàng áp dụng hệ quản lý 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 đang là:

$ npm -vTiếp theo vẫn bên trên hành lang cửa số chiếc lệnh bạn chạy câu lệnh dưới đây nhằm thiết đặt Angular CLI:

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

Xem thêm: Poppy Mùa 11: Bảng Ngọc, Cách Lên Đồ Poppy Top, Mid, Rừng, Lên Đồ Poppy

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

Sau Lúc setup chấm dứt Angular CLI thì việc tạo ra một dự án công trình Angular hoàn toàn có thể được triển khai một cách dễ dàng và đơn giản thông qua việc chạy câu lệnh sau:

$ ng new my-appCâu lệnh trên đã tốn một khoảng thời gian nhất mực, bạn hãy kiên nhẫn chờ đón hoặc có thể rời các bạn thao tác với pha cho mình một bóc coffe hoặc uống một ly nước nhằm không hẳn Cảm Xúc tức giận bởi vì nên chờ đón.

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

Sau lúc câu lệnh trên kết thúc, bạn sẽ thấy một thư mục cùng với thương hiệu my-ứng dụng đã làm được Angular CLI tạo ra làm việc bên phía trong thỏng mục ứng với thư mục hiện thời trên cửa sổ dòng lệnh. Đây chính là tlỗi mục dự án Angular. Bạn cũng hoàn toàn có thể chạy câu lệnh ls nhằm kiểm soát nhanh hao sự trường tồn của thư mục này:

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

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

$ ng serve --openCâu lệnh ng serve đang khởi động web hệ thống được tích đúng theo thuộc Angular CLI khi setup và tiếp đến chạy dự án công trình Angular. Đồng thời với câu lệnh này Angular CLI cũng trở nên theo dõi (watch) sự chuyển đổi của những tập tin và thỏng mục bên trong vận dụng Angular. Nếu bao gồm bất kỳ sự thay đổi này thì Angular CLI sẽ auto build lại áp dụng.

Tuỳ lựa chọn --open trong câu lệnh trên sẽ tự động msinh sống trình duyệt y cùng truy vấn vào liên can http://localhost:4200/. Quý khách hàng đang trình chăm chú hiển thị tác dụng như sau:

*

Chỉnh Sửa Angular Component

Sau khi chạy câu lệnh tạo thành dự án thì Angular CLI đã làm cho bọn họ một component thứ nhất. Đây là một trong những root component với có tên là app-root. Bạn có thể search thấy tập tin chứa component này ở địa chỉ băng thông src/app/phầm mềm.component.ts bên phía trong thỏng mục my-ứng dụng.

Sử dụng code editor hoặc IDE để mlàm việc tập tin này rồi sau đó cập nhật câu chữ bên phía trong tập tin như sau:

export class AppComponent title = "My First Angular App";Sau Khi giữ chuyển đổi ở bên trên và load lại trang trên trình phê duyệt các bạn sẽ thấy tác dụng hiển thị từ bây giờ cũng sẽ được tự động hóa update.

Xem thêm: Tìm Việc Làm Tại Công Ty Sputnik Việt Nam Tuyển Dụng, Công Ty Tnhh Sputnik Việt Nam Tuyển Dụng

Tiếp theo chúng ta mở tập tin src/app/app.component.css vào my-phầm mềm cùng biến hóa câu chữ nhỏng sau:

h1 color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%;Lúc này Lúc cài đặt lại trang trên trình trông nom bạn sẽ thấy hiệu quả nlỗi sau:

*

Tới phía trên họ đang dứt tìm hiểu về phong thái thiết lập với sử dụng nguyên tắc Angular CLI để tạo thành một áp dụng đầu tiên. Trong những nội dung bài viết tiếp theo chúng ta vẫn khám phá phương pháp áp dụng Angular CLI nhằm tiến hành các tác vụ phức hợp hơn.


Chuyên mục: Công Nghệ 4.0