Angular와 함께 대 코드를 어떻게 사용합니까?

vs 코드를 사용하여 각도 프로젝트를 개발하는 것은 효율적이고 편리하며 핵심은 환경을 올바르게 구성하는 것입니다. 먼저 Node.js 및 NPM을 설치하십시오. 둘째, NPM을 통해 전 세계 각도 CLI를 설치하여 프로젝트를 만들고 구성 요소를 생성하십시오. 그런 다음 개발 경험을 향상시키기 위해 Angular Language Service, Pretier, Eslint 및 Debug 플러그인을 설치하십시오. 그런 다음 ng new 명령을 사용하여 프로젝트를 생성하고 vs 코드로 열 수 있습니다. Intellisense를 사용하여 자동 코드 완료를 달성하고 Ctrl P를 통해 파일을 빠르게 탐색하고 F12로 점프 정의를 탐색하십시오. RUN NG는 개발 서버를 시작하고 자동 재 장전을 활성화합니다. launch.json 파일을 구성한 후 F5를 눌러 편집기에서 응용 프로그램을 직접 디버깅합니다. 마지막으로, 여러 작업 공간, EMMET 단축키 및 사용자 정의 각도 CLI 명령을 사용하여 파일 구조를 합리적으로 정리하여 프로젝트를 깨끗하고 순서대로 유지하여 프로젝트를 깨끗하고 순서대로 유지하십시오. 위의 단계는 VS 코드에서 각도 응용 프로그램을 효율적으로 개발할 수 있도록합니다.

설정을 올바르게 얻으면 각도와 함께 대 코드를 사용하는 것이 간단하고 효율적입니다. Visual Studio Code (VS Code)와 Angular의 조합은 코드 완료, 디버깅 및 라이브 미리보기와 같은 기능을 갖춘 강력한 개발 환경을 제공합니다.

환경 설정

Angular 프로젝트로 뛰어 들기 전에 시스템이 필요한 도구가 설치되어 있는지 확인하십시오.

• node.js 및 npm : angular는 node.js를 실행해야하며 NPM (Node Package Manager)이 번들로 제공됩니다. nodejs.org 에서 다운로드 할 수 있습니다.
• Angular CLI : npm install -g @angular/cli 사용하여 전 세계적으로 설치하십시오. 이를 통해 새로운 각도 프로젝트를 만들고 구성 요소, 서비스 등을 생성 할 수 있습니다.
• 대 코드 확장 : 각도에 유용한 확장에는 다음이 포함됩니다.
  • Angular Language Service : 템플릿에 더 나은 자동 완성, 오류 확인 및 탐색을 추가합니다.
  • 더 예쁘 거나 ESLINT : 코드 서식 및 라인.
  • Chrome/Firefox 용 Debugger : VS Code에서 앱을 직접 디버깅하려는 경우.

모든 것이 설정되면 ng new my-app 사용하여 Angular 앱을 만들고 Code에서 프로젝트 폴더를 열 수 있습니다.

각도 코드 작성 및 탐색

vs 코드는 Smart Intellisense와 원활한 통합 덕분에 Angular로 작업 할 때 빛납니다.

• IntellIsense 및 Autocomplete : 구성 요소 파일에 TypeScript 또는 HTML을 작성하면 VS 코드는 *ngIf 또는 [(ngModel)] 같은 속성, 방법 및 각도 지시문을 제안합니다.
• 정의 / 엿봄으로 이동 : 각도 지침 또는 구성 요소를 클릭하고 F12를 누르면 (또는 오른쪽 버튼을 클릭 → 정의로 이동) 직접 소스로 이동합니다. 이것은 각도의 부분이 내부적으로 어떻게 작동하는지 탐색 할 때 매우 도움이됩니다.
• 파일 탐색 : Ctrl P (MAC의 CMD P)를 사용하여 이름을 입력하여 파일을 빠르게 엽니 다.

작지만 편리한 팁 중 하나 : 각도 템플릿 파일 (.html : .html )에 있고 해당 구성 요소로 점프하려는 경우 선택기 이름을 Ctrl Click 누르십시오.

앱 실행 및 디버깅

대 코드를 통해 각도 앱을 실행하는 것은 간단합니다. 내부 vs 코드 ( Terminal > New Terminal ) 내부의 터미널을 열고 실행하십시오.

 ng 서빙

이것은 로컬 개발 서버를 시작하고 변경 사항을 지켜 봅니다. 파일을 저장할 때마다 브라우저가 자동으로 다시로드됩니다.

앱 디버깅 :

• .vscode/launch.json 아래에서 launch.json configuration 파일을 추가하십시오.
• "type" "pwa-chrome"(또는 일반 크롬/파이 폭스)으로 설정하고 http://localhost:4200 으로 "url" 구성하십시오.
• TypeScript 파일에 중단 점을 놓고 F5를 눌러 디버거를 시작하십시오.

더 이상 외부 브라우저를 사용할 필요가 없습니다. 편집기에서 바로 디버깅하는 것이 좋습니다.

사물을 정리합니다

각도 앱이 커지면 작업 공간을 깨끗하게 유지하는 것이 중요해집니다. 다음은 몇 가지 팁입니다.

• 폴더와 그룹 관련 파일을 함께 사용하십시오. 예를 들어, 기능 모듈을 자체 디렉토리에 배치하십시오.
• 여러 프로젝트에서 한 번에 작업하는 경우 VS Code의 다중 뿌리 작업 공간을 활용하십시오.
• 각도 템플릿에서 Emmet 바로 가기를 사용하여 div.container 타이핑 및 탭을 확장하기 위해 HTML 쓰기 속도를 높이십시오.

또한 자주 사용되는 각도 CLI 명령에 대한 키보드 바로 가기를 설정하는 것을 고려하십시오. 예를 들어, ng bind ng generate component my-component 매번 입력 할 필요가 없습니다.

기본적으로 그게 다야. 환경이 올바르게 설정되면 Angular in vs 코드로 작업하는 것이 빠르고 직관적이됩니다.

위 내용은 Angular와 함께 대 코드를 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!