Nếu bạn đang thân quen với câu hỏi sản xuất các dự án Angular thủ công bằng tay áp dụng những giải pháp IDE hoặc code editor thì giờ đây chúng ta cũng có thể áp dụng phương pháp Angular CLI. Một phương tiện vô cùng hữu hiệu góp bạn có thể sản xuất những vận dụng Angular một biện pháp nhanh rộng với hiệu quả hơn.
Bạn đang xem: Angular cli là gì
Lưu ý: Bạn yêu cầu nắm vững cơ phiên bản về Angular JS nhằm ban đầu bài học này. Nếu bạn cần bài viết liên quan hoặc ôn tập lại các kiến thức về AngularJS thì bạn có thể xem thêm khoá lí giải về AngularJS Cơ Bản.
Angular CLI Là Gì
Angular CLI là 1 trong luật pháp được cách tân và phát triển đề chạy xe trên bối cảnh hành lang cửa số vận dụng (comm& line interface hay CLI) nhằm mục tiêu hỗ trợ Việc sản xuất dự án công trình, làm chủ tập tin trong dự án công trình và tiến hành nhiều tác vụ không giống nhau nhỏng thử nghiệm (kiểm thử), bundle cùng deploy dự án công trình một phương pháp lập cập cùng kết quả.
Bài viết này vẫn lí giải chúng ta biện pháp kiến thiết và chạy một dự án Angular dễ dàng và đơn giản áp dụng TypeScript.
Bước 1: Set up Môi Trường Phát Triển
Bước đầu tiên mà họ phải làm đó là set up môi trường trở nên tân tiến. Để làm vấn đề đó thì đòi hỏi trên laptop của khách hàng rất cần phải setup Node.js. Để sử dụng Angular CLI thì các bạn thiết lập Node.js phiên phiên bản 6.9.x và NPM (node package manager) phiên bạn dạng 3.x.x.
Để kiểm tra phiên bạn dạng của Node.js có trên thiết bị bọn họ Open sổ mẫu lệnh (hoặc chương trình Windows Command Prompt nếu như khách hàng sử dụng hệ điều hành và quản lý Windows) với chạy câu lệnh bên 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ố chiếc lệnh chúng ta chạy câu lệnh sau đây để thiết lập Angular CLI:
$ npm install -g
angular/cliTrên hệ điều Linux thì vào một số trường đúng theo hoàn toàn có thể máy tính xách tay báo lỗi bắt buộc chạy được câu lệnh bên trên vì thiếu thốn quyền, trường hợp này các bạn sẽ cần chạy câu lệnh bên trên áp dụng quyền admin (tốt thêm sudovào phía đằng trước câu lệnh).
Xem thêm: Thor Tên Thật Của Thor Tên Thật, Chris Hemsworth
Bước 2: Tạo Dự Án Angular
Sau khi thiết lập xong Angular CLI thì việc sản xuất một dự án Angular có thể được thực hiện một giải pháp đơn giản và dễ dàng thông qua vấn đề chạy câu lệnh sau:
$ ng new my-appCâu lệnh bên trên đang tốn một khoảng tầm thời hạn nhất định, bạn hãy kiên trì mong chờ hoặc rất có thể rời bạn thao tác và trộn cho mình một tách bóc cafe hoặc uống một ly nước nhằm không phải Cảm Xúc khó chịu vì nên mong chờ.
Cách 3: Chạy Ứng Dụng
Sau Khi câu lệnh bên trên chấm dứt, bạn sẽ thấy một thỏng mục cùng với thương hiệu my-tiện ích đã được Angular CLI tạo ra ở phía bên trong thư mục ứng với thỏng mục bây giờ trên cửa sổ loại lệnh. Đây chính là thỏng mục dự án công trình Angular. Quý khách hàng cũng hoàn toàn có thể chạy câu lệnh ls để khám nghiệm nkhô giòn sự trường tồn của tlỗi mục này:
$ lsTiếp theo nhằm chạy áp dụng my-tiện ích các bạn dịch chuyển vào phía bên trong tlỗi mục này sử dụng câu lệnh:
$ cd my-appRồi tiếp nối chạy:
$ ng serve sầu --openCâu lệnh ng serve sầu đang khởi cồn web VPS được tích thích hợp thuộc Angular CLI Lúc setup và 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 biến thành theo dõi (watch) sự thay đổi của những tập tin và tlỗi mục bên phía trong áp dụng Angular. Nếu tất cả bất kỳ sự biến đổi này thì Angular CLI đang tự động hóa build lại vận dụng.
Tuỳ lựa chọn --open trong câu lệnh trên đã auto mlàm việc trình để mắt và truy vấn vào ảnh hưởng http://localhost:4200/. quý khách hàng vẫn trình trông nom hiển thị hiệu quả nhỏng sau:
Chỉnh Sửa Angular Component
Sau Lúc chạy câu lệnh sinh sản dự án thì Angular CLI đã tạo cho họ một component trước tiên. Đây là một trong những root component cùng có tên là app-root. Quý Khách có thể kiếm tìm thấy tập tin chứa component này tại địa chỉ băng thông src/app/phầm mềm.component.ts bên phía trong tlỗi mục my-ứng dụng.
Sử dụng code editor hoặc IDE nhằm mngơi nghỉ tập tin này rồi sau đó cập nhật ngôn từ bên phía trong tập tin nlỗi sau:
export class AppComponent title = "My First Angular App";Sau lúc lưu giữ biến hóa sinh hoạt bên trên cùng load lại trang trên trình lưu ý bạn sẽ thấy kết quả hiển thị lúc này cũng được auto cập nhật.
Tiếp theo các bạn mlàm việc tập tin src/app/phầm mềm.component.css trong my-app cùng biến hóa văn bản nhỏng sau:
h1 color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%;Hiện nay khi cài lại trang trên trình chăm chút bạn sẽ thấy kết quả nlỗi sau:
Tới phía trên họ đã xong mày mò về kiểu cách thiết đặt với áp dụng điều khoản Angular CLI nhằm tạo thành một áp dụng trước tiên. Trong những bài viết tiếp theo sau bọn họ đã tò mò bí quyết áp dụng Angular CLI nhằm triển khai những tác vụ phức hợp rộng.
