2021년 각도로 시작하기

2021년 각도로 시작하기

반응형

이 페이지에 있으면 강력한 자바스크립트 프레임워크 각도 사용법을 배울 수 있습니다. Angular는 6개월마다 주요 버전을 출시합니다. 이 버전을 작성할 때 현재 버전은 12개입니다. 이 튜토리얼에서는 초기부터 각도로 시작하고 각 클리(Angular cli)를 사용하여 각도 프로젝트를 설정하는 방법을 보여드리겠습니다. 슬슬 출발 해야지.

시작하기 전에

Angular(각도) 프레임워크를 사용하려면 다음 항목이 있어야 합니다.

HTML의 이해

자바스크립트에 대한 기본적인 이해

TypeScript에 대한 지식은 유용하지만 반드시 필요한 것은 아닙니다.

노드 8.9+ 및 NPM 5.5.1+가 설치된 개발 시스템. Angular CLI에는 노드가 필요합니다. 공식 웹 사이트로 이동하여 시스템의 바이너리를 가져올 수 있습니다.

프런트엔드 마스터가 되고 싶은 열망!

각도 CLI 설치

Angular CLI는 Angular 프로젝트를 초기화하고 사용하기 위한 공식 도구입니다. 이것은 명령행 인터페이스 도구입니다. 명령 셸에서 직접 Angular 응용 프로그램을 초기화, 개발, 비계 및 유지관리할 수 있습니다.

npm 패키지 관리자를 사용하여 CLI를 설치합니다.

npm install -g @angular/cli //for windows //or sudo npm install -g @angular/cli //for mac

-g 플래그는 전역임을 나타내며, @cli를 전체적으로 설치하면 어디서나 ng 명령을 사용할 수 있습니다.

여기서는 Angular 12 CLI를 전체적으로 설치했습니다. 다음 명령으로도 버전을 확인할 수 있습니다.

ng --version

새 프로젝트 생성

cli를 설치한 후 다음 명령을 실행하여 각도 프로젝트를 시작합니다.

ng new angular-project

이렇게 하면 기본 스타일시트로 라우팅과 scss를 추가했으므로 기본을 선택할 수 있습니다. 패키지를 설치하고 시간이 걸립니다.

완료되면 새로 만든 디렉토리로 이동할 수 있습니다.

cd angular-project

다음 명령을 실행하여 로컬에서 응용프로그램을 시작합니다.

ng serve

ng serve 명령을 사용하여 응용프로그램을 작성하고 로컬로 서비스할 때, 서버는 사용자가 원본 파일을 변경할 때 응용프로그램을 자동으로 재구성하고 페이지를 다시 로드합니다.

브라우저에서 http://localhost:4200/을 열어 새 응용 프로그램이 실행되는지 확인합니다. 다음과 유사한 페이지가 나타납니다.

이제 VScode를 열겠습니다. 현재 디렉터리의 터미널에서 코드를 실행하여 vsCode로 직접 열 수 있습니다.

프로젝트 구조는 다음과 같습니다.

새로 생성된 응용 프로그램에는 루트 구성 요소 및 템플릿이 포함된 루트 모듈의 원본 파일이 포함되어 있습니다. 각 응용 프로그램에는 논리, 데이터 및 자산이 들어 있는 src 폴더가 있습니다.

app.component.html에서 모든 플레이스 홀더 내용을 제거할 수 있으며 이제 놀이터가 준비되었습니다!

from http://it-ground.tistory.com/290 by ccl(A) rewrite - 2021-10-10 05:02:05