VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

Học Node.js

Giới thiệu Angular Cài đặt môi trường Angular7 Tạo dự án đầu tiên trong Angular7 Hướng dẫn lập trình Angular7 với trình soạn thảo Visual Studio Code Angular7 - Components Angular7 - Modules Angular7 - Data Binding Angular7 - Event Binding Angular7 - Templates Angular7 - Directives Angular7 - Pipes Angular7 - Routing Angular7 - Services Angular7 - Http Client Angular7 - CLI Prompts Angular7 - Forms
1 / 3
❮ ❯

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code


Tạo dự án Angular đầu tiên
Component trong Angular7

Bài 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
  • Mở dự án Angular bằng Visual Studio Code
  • Chỉnh sửa dự án Angular
  • Run dự án Angular
  • Debug dự án Angular
    • Cài đặt Debugger extension
    • Cài đặt breakpoint
    • Cấu hình Chrome debugger
  • Các plugin hữu ích cho Visual Studio Code

Cài đặt Visual Studio Code

Bạn có thể download và cài đặt trình soạn thảo Visual Studio Code tại đây: Download Visual Studio Code

Cài đặt phiên bản 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:

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Tạo dự án Angular

Bạn có thê 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 giao diện dòng lệnh cũng như chạy máy chủ ứng dụng Angular, bạn sẽ 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 và nó sẽ bao gồm npm.

Để kiểm tra bạn đã cài đặt chính xác Node.js và npm trên máy của mình chưa, bạn có thể dùng lệnh node --version và npm --version

Cài đặt Angular mới nhất: nó sẽ mất một vài phút để cài đặt Angular.


npm install -g @angular/cli

Bây giờ bạn có thể tạo một dự án Angular mới bằng cách gõ:


ng new my-app

my-app là tên của thư mục cho ứng dụng của bạn. 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

Mặc định angular sẽ lắng nghe port 4200. Mở trình duyệt lên và gõ http://localhost:4200 để xem kết quả:

Tạo dự án đầu tiên trong Angular7

Mở dự án 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:

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Tìm đến thứ mục chứa dự án Angular của bạn:

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Chọn Select Folder:

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Bây giờ mở rộng thư mục src\app và chọn mở file app.component.ts. Bạn sẽ nhận thấy rằng code được tô các màu khác nhau, nếu bạn đặt con trỏ trên dấu ngoặc đơn, hoặc dấu ngoặc nhọn, phần đóng/mở sẽ được tô sáng.

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Chỉnh sửa dự án Angular

Bây giờ chúng ta sẽ chỉnh sửa ứng dụng thành "Hello World". Quay trở lại file app.component.ts và thay đổi giá trị của title thành "Hello World".


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 file app.component.ts, ứng dụng đang chạy sẽ cập nhật trang web và bạn sẽ thấy "Welcome to Hello World!".

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Run dự án Angular

Chọn Terminal -> New Terminal :

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Thay đổi Shell mặc định, bằng cách chọn Select Default Shell :

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Chọn mặc định cmd.exe :

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Chọn Terminal -> New Terminal :

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Thực thi lệnh ng serve để chạy ứng dụng Angular:

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Chạy ứng dụng Angular thành công:

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Debug dự án Angular

Cài đặt Debugger extension

Để debug Angular code, bạn cần cài đặt plugin cho VS Code Debugger for Chrome extension.

Chú ý: Bạn cũng có thể cài các plugin debugger 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 VS Code bằng cách bấm tổ hợp phím Ctrl+Shift+X và gõ "chrome" vào hộp tìm kiếm:

Sau đó click install để cài đặt plugin cho Debugger for Chrome:

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Cài đặt breakpoint

Để đặt điểm breakpoint, click vào lề bên trái của cột số dòng. Ví dụ đặt breakpoint tại dòng số 9 của tập tin app.component.ts, breakpoint được biểu diễn dưới dạng một hình tròn màu đỏ:

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Cấu hình Chrome debugger

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à click vào nút bánh răng để tạo file cấu hình launch.json. Chọn Chrome từ Select Enviroment. Điều này sẽ tạo một fiel launch.json 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 chạy trang web.

Chúng ta cần thay đổi cổng url từ 8080 sang 4200. File launch.json trông như thế này:


{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Nhấn F5 hoặc mũi tên xanh để bắt đầu debug và trình duyệt mới.

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Nhấn F10 để nhảy di chuyển đến dòng code tiếp theo.


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 Intelisense

2. path Intelisense

Để cài đặt nhấn tổ hợp phím Ctrl + Shift + X , sau đó search các plugin -> chọn plugin -> click intall để cài đặt.

Sau khi cài đặt 2 plugin trên, bạn có sẽ có một công cụ hữu ích như sau: Hãy xóa nội dung của StyleUrls và gõ "./", bạn sẽ thấy một danh sách sổ xuống chứa các file của dự án.

Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code
previous
next

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?HttpClient trong Angular 7Service trong Angular7Routing trong Angular 7Pipe trong Angular 7Directive trong Angular 7Template trong Angular 7Event Binding trong Angular 7Module trong Angular 7Data Binding trong Angular 7Component trong Angular 7Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio CodeTạo dự án Angular đầu tiên

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml