Nếu bạn đã quen với việc tạo các dự án Angular theo cách thủ công bằng công cụ IDE hoặc trình chỉnh sửa mã, thì bây giờ bạn có thể sử dụng công cụ Angular CLI. Một công cụ cực kỳ mạnh mẽ cho phép chúng ta xây dựng các ứng dụng Angular nhanh hơn và hiệu quả hơn.
Lưu ý: Bạn cần nắm bắt cơ bản về Angular JS để bắt đầu khóa học này. Nếu bạn cần tìm hiểu thêm hoặc làm mới kiến thức của mình về AngularJS, bạn có thể tham khảo hướng dẫn Kiến thức cơ bản về AngularJS.
Tham Khảo Thêm: Inc là gì loại hình công ty nào?
Angular CLI là gì?
Angular CLI là công cụ được phát triển để chạy trên giao diện dòng lệnh (CLI) giúp tạo dự án, quản lý tệp dự án và thực hiện nhiều tác vụ khác nhau như kiểm thử (testing), đóng gói và triển khai 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 xây dựng và chạy một dự án Angular đơn giản với TypeScript.
Bước 1: Thiết lập môi trường phát triển
Bước đầu tiên chúng ta cần làm là thiết lập môi trường phát triển. Để thực hiện việc này, bạn cần cài đặt Node.js trên máy tính của mình. Để sử dụng Angular CLI, hãy 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 Node.js có trên máy, chúng ta mở cửa sổ dòng lệnh (hoặc Windows Command Prompt nếu bạn đang sử dụng hệ điều hành Windows) và chạy lệnh sau:
$ npm -v
Đối với NPM, câu lệnh này sẽ là:
$ npm -v
Tiếp theo, trên dòng lệnh, chạy lệnh sau để cài đặt Angular CLI:
$ npm install -g @ angle / cli
Trên hệ điều hành Linux, trong một số trường hợp, máy tính có thể không chạy được lệnh trên do không đủ đặc quyền, trường hợp này bạn cần chạy lệnh trên với đặc quyền của quản trị viên (hoặc thêm sudo trước lệnh) …
Bước 2: Tạo một dự án Angular
Sau khi cài đặt Angular CLI, chỉ cần chạy lệnh sau để tạo một dự án Angular:
$ ng ứng dụng mới của tôi
Lệnh trên sẽ mất một chút thời gian, hãy kiên nhẫn hoặc bạn có thể nghỉ việc và pha cho mình một ly cà phê hoặc một ly nước để không cảm thấy khó chịu khi chờ đợi.
Bước 3: Chạy ứng dụng
Sau khi lệnh trên hoàn thành, bạn sẽ thấy một thư mục có tên là my-app do Angular CLI tạo trong thư mục tương ứng với thư mục hiện tại trên dòng lệnh. Đây là thư mục dự án Angular. Bạn cũng có thể chạy lệnh ls để nhanh chóng kiểm tra xem thư mục này có tồn tại hay không:
$ ls
Tiếp theo để chạy ứng dụng my-app, bạn di chuyển vào thư mục này bằng lệnh sau:
$ cd ứng dụng của tôi
Sau đó chạy:
$ ng phục vụ – mở
Lệnh ng serve sẽ khởi động một máy chủ web được tích hợp với Angular CLI khi dự án Angular được cài đặt và chạy. Trong khi sử dụng lệnh này, Angular CLI cũng sẽ giám sát ứng dụng Angular để biết các thay đổi đối với tệp và thư mục. Nếu bất kỳ thay đổi nào trong số này được thực hiện, Angular CLI sẽ tự động xây dựng lại ứng dụng.
Tùy chọn –open trong lệnh trên sẽ tự động mở trình duyệt và truy cập vào địa chỉ http: // localhost: 4200 /. Trình duyệt của bạn sẽ hiển thị các kết quả sau:
Xin chào thế giới với Angular CLI
Chỉnh sửa các thành phần Angular
Sau khi chạy lệnh tạo dự án, Angular CLI đã tạo thành phần đầu tiên của chúng ta. Đây là một thành phần gốc được gọi là app-root. Bạn có thể tìm thấy tệp chứa thành phần này tại src / app / app.component.ts trong thư mục my-app.
Mở tệp này bằng trình chỉnh sửa mã hoặc IDE và cập nhật nội dung tệp như sau:
xuất lớp AppComponent {
title = ‘Ứng dụng Angular đầu tiên của tôi’;
}
Sau khi lưu các thay đổi trên và tải lại trang trong trình duyệt, bạn sẽ thấy kết quả hiển thị hiện đã được cập nhật tự động.
Tiếp theo, mở tệp src / app / app.component.css trong my-app và sửa đổi nội dung như sau:
h1 {
màu: # 369;
Họ phông chữ: Arial, Helvetica, sans-serif;
cỡ chữ: 250%;
}
Bây giờ khi bạn tải lại trang trên trình duyệt của mình, bạn sẽ thấy kết quả sau:
Ứng dụng Angular được tạo bằng Angular CLI
Tìm Hiểu Thêm: Tính Chất Của Trọng Tâm Tam Giác Và Cách Xác Định Trọng Tâm
Bây giờ chúng ta đã hoàn tất việc học cách cài đặt và sử dụng công cụ Angular CLI để tạo ứng dụng đầu tiên của mình. Trong các bài viết sắp tới, chúng ta sẽ học cách sử dụng Angular CLI để thực hiện các tác vụ phức tạp hơn.
Cập nhật thêm nhiều kiến thức hữu ích tại Platinum Residences!
