> 웹 프론트엔드 > JS 튜토리얼 > IDEA에서 Angular를 개발하는 방법에 대한 간략한 분석

IDEA에서 Angular를 개발하는 방법에 대한 간략한 분석

青灯夜游
풀어 주다: 2022-06-01 21:15:20
앞으로
3399명이 탐색했습니다.

이 글에서는 IDEA를 사용하여 Angular를 개발하는 방법을 안내하고, JetBrains IDEA에서 프로젝트를 생성하고 실행하는 방법을 간략하게 소개합니다. 모든 분들께 도움이 되기를 바랍니다!

IDEA에서 Angular를 개발하는 방법에 대한 간략한 분석

이전 글에서 Angular 개발을 위해 준비해야 할 환경에 대해 알아보았습니다. 환경을 설정한 후에는 프로그래밍을 위해 직접 텍스트 도구를 사용할 수 없으며, IDE를 선택해야 합니다. 좋은 IDE는 절반의 노력으로 개발을 더욱 효과적으로 만들 수 있습니다. 제가 JetBrains IDEA를 선택한 이유는 주로 제 작업에 여러 편집자가 있었기 때문입니다. IDEA는 Angular 개발을 지원하는 더 나은 IDE입니다.

새 프로젝트

File => New => Project => JavaScript => Angular CLI
로그인 후 복사

다음 단계를 선택한 후 그 단계에서 프로젝트를 구성할 수 있습니다. 처음부터 이 단계까지 따라오셨다면 IDEA가 노드 인터프리터와 Angular CLI를 모두 자동으로 구성한 것을 알 수 있습니다. 프로젝트 이름만 설정하면 됩니다. [관련 튜토리얼 추천: "angular tutorial"]

IDEA에서 Angular를 개발하는 방법에 대한 간략한 분석

Finish를 클릭한 후 빌드가 완료될 때까지 기다립니다. 콘솔에 다음 내용이 출력되면 성공적으로 빌드되었음을 의미합니다

The file will have its original line endings in your working directory
    Successfully initialized git.
Done
로그인 후 복사

Run IDEA

1. Show npm Script

프로젝트 루트 디렉터리에서 pachage.json 파일을 찾아 마우스 오른쪽 버튼을 클릭하고 Show npm Script를 선택하면 새 창이 나타납니다

IDEA에서 Angular를 개발하는 방법에 대한 간략한 분석

이 창에는 우리가 일반적으로 사용하는 명령이 있습니다. 시작 명령은 시작을 두 번 클릭하면 시작이 완료된 후 콘솔에 다음이 출력됩니다. information

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

√ Compiled successfully.
로그인 후 복사

이때 http://localhost:4200/

IDEA에서 Angular를 개발하는 방법에 대한 간략한 분석

을 방문하세요. npm에 있는 명령어들은 실제로 package.json에 정의되어 있고, 명령어를 커스터마이징할 수도 있습니다.
package.json의 scripts 노드 아래에

"node version": "node -v"
로그인 후 복사

를 추가한 다음 npm 인터페이스를 새로 고치면 새로운 node version 명령이 추가된 것을 볼 수 있습니다. 이를 두 번 클릭하면 node를 실행하는 것과 동일한 효과가 나타납니다. -v 명령.

2. IDEA-RUN

IDEA 상단 컨트롤 바에 프로젝트를 직접 실행하는 옵션이 있습니다

IDEA에서 Angular를 개발하는 방법에 대한 간략한 분석

프로젝트를 직접 실행하거나 디버그할 수 있습니다.

ng server
로그인 후 복사

VCS

VCS => Get From Version Controll => 输入地址
로그인 후 복사

에서 프로젝트를 실행하려면 프로그래밍 튜토리얼을 방문하세요. !

위 내용은 IDEA에서 Angular를 개발하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿