Bài viết này sẽ hướng dẫn bạn lập trình Angular 7 với trình soạn thảo Visual Studio Code và cài đặt các plugin hữu ích trong Visual Studio Code. Visual Studio Code là một công cụ rất hữu ích để phát triển ứng dụng Angular
Nội dung chính
- Cài đặt Visual Studio Code
- Tạo dự án Angular
- Open project Angular bằng Visual Studio Code
- Dự án chỉnh sửa dự án Angular
- Run project Angular
- Dự án gỡ lỗi dự án Angular
- Cài đặt phần mở rộng trình gỡ lỗi
- Cài đặt breakpoint
- Cấu hình trình gỡ lỗi Chrome
- Các plugin hữu ích cho Visual Studio Code
Cài đặt Visual Studio Code
Bạn có thể tải về và cài đặt trình soạn thảo Visual Studio Code tại đây. Tải xuống mã Visual Studio
Phiên bản cài đặt phù hợp với hệ điều hành của bạn
Sau khi cài đặt giao diện ban đầu của Visual Studio Code như sau
Tạo dự án Angular
Bạn đã xem lại hướng dẫn Tạo dự án đầu tiên trong Angular7
Hoặc, làm theo hướng dẫn sau
Chúng ta sẽ sử dụng Angular CLI để tạo dự án Angular. Để cài đặt và sử dụng dòng lệnh giao diện cũng như chạy máy chủ ứng dụng Angular, bạn cần cài đặt Node. js JavaScript runtime và npm [trình quản lý gói Node. js]. Bạn chỉ cần cài đặt Node. js and it will include npm
Để kiểm tra xem bạn đã cài đặt nút chính xác chưa. js và npm trên máy của mình chưa, bạn có thể sử dụng lệnh
ng new my-app0 và
ng new my-app1
Cài đặt góc mới nhất. nó sẽ mất vài phút để cài đặt Angular
npm install -g @angular/cli
Bây giờ bạn có thể tạo dự án Angular mới bằng cách nhập
ng new my-app
ng new my-app2 is name of your directory for your application. Có thể mất vài phút để tạo ứng dụng Angular trong TypeScript và cài đặt các phụ thuộc của nó
Chạy ứng dụng Angular
cd my-app ng serve
Default angle sẽ lắng nghe cổng 4200. Mở trình duyệt lên và nhập http. //máy chủ cục bộ. 4200 to view results
Open project Angular bằng Visual Studio Code
Đầu tiên bạn cần phải mở trình soạn thảo Visual Studio Code
Tiếp theo, chọn File -> Open Folder
Tìm đến mục chứa dự án Angular của bạn
Chọn Chọn thư mục
Bây giờ mở rộng thư mục
ng new my-app3 và chọn mở tệp
ng new my-app4. Bạn sẽ thấy rằng mã được tô các màu khác nhau, nếu bạn đặt con trỏ trên dấu trích đơn, hoặc dấu trích đoạn, phần đóng/mở sẽ được tô sáng
Dự án chỉnh sửa dự án Angular
Bây giờ chúng ta sẽ chỉnh sửa ứng dụng thành "Xin chào thế giới". Quay lại tệp
ng new my-app4 và thay đổi giá trị của
ng new my-app1 thành "Xin chào thế giới"
import { Component } from '@angular/core'; @Component[{ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }] export class AppComponent { title = 'Hello World'; }
Khi bạn lưu tệp
ng new my-app4, ứng dụng đang chạy sẽ cập nhật trang web và bạn sẽ thấy "Welcome to Hello World. "
Run project Angular
Chọn Terminal -> New Terminal
Thay đổi mặc định Shell, bằng cách chọn Select Default Shell
Select default cmd. người cũ
Chọn Terminal -> New Terminal
Thực thi lệnh
ng new my-app3 để chạy ứng dụng Angular
Chạy ứng dụng Angular thành công
Dự án gỡ lỗi dự án Angular
Cài đặt phần mở rộng trình gỡ lỗi
Để gỡ lỗi mã Angular, bạn cần cài đặt plugin cho tiện ích mở rộng VS Code Debugger for Chrome
Chú thích. Bạn cũng có thể cài đặt trình sửa lỗi plugin cho trình duyệt Edge và Firefox
Hoặc bạn cũng có thể cài đặt plugin trực tiếp trên Mã VS bằng cách nhấn tổ hợp phím Ctrl+Shift+X và nhập "chrome" vào hộp tìm kiếm
Sau đó nhấp vào cài đặt để cài đặt plugin cho Trình gỡ lỗi cho Chrome
Cài đặt breakpoint
To set breakpoint, click to the left side of the lines lines. Ví dụ đặt điểm dừng tại dòng số 9 của tệp
ng new my-app4, điểm dừng được biểu diễn dưới dạng một hình tròn màu đỏ
Cấu hình trình gỡ lỗi Chrome
Chúng ta cần cấu hình cho debugger. Để làm như vậy, hãy chuyển đến chế độ xem Run [nhấn tổ hợp phím Ctrl + Shift + D] và nhấp vào nút Bánh răng để tạo tệp cấu hình
ng new my-app5. Chọn Chrome từ Chọn Môi trường. Điều này sẽ tạo một tệp ________ 15 trong thư mục. vscode mới trong dự án của bạn, bao gồm một cấu hình để khởi động trang web
Chúng ta cần thay đổi url cổng từ 8080 sang 4200. Tệp
ng new my-app5 trông giống như thế này
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "//localhost:4200", "webRoot": "${workspaceFolder}" } ] }
Nhấn F5 hoặc mũi tên xanh để bắt đầu gỡ lỗi và duyệt trình mới
Click F10 to jump di chuyển đến dòng code next
Các plugin hữu ích cho Visual Studio Code
Bạn có thể cài đặt 2 plugin hữu ích sau
1. npm Intellisense
2. đường dẫn Intellisense
Để cài đặt, nhấn tổ hợp phím Ctrl + Shift + X , sau đó tìm plugin -> select plugin -> click intall để cài đặt
Sau khi cài đặt 2 plugin trên, bạn sẽ có một công cụ hữu ích như sau. Vui lòng xóa nội dung của StyleUrl và nhập ". /", bạn sẽ thấy một danh sách sổ xuống chứa các tệp của dự án