몇 가지 간단한 단계로 새로운 Angular 9 프로젝트를 시작하는 방법

Angular 프로젝트를 로컬에서 성공적으로 생성하고 실행하려면 다음 세 가지 소프트웨어를 컴퓨터에 설치해야합니다.

  • VScode [ Link ]
    Visual Studio Code는 Microsoft에서 Windows, Linux 및 macOS 용으로 개발 한 소스 코드 편집기입니다. 여기에는 디버깅, 내장 된 Git 컨트롤 및 GitHub, 구문 강조, 지능형 코드 완성, 스 니펫 및 코드 리팩토링에 대한 지원이 포함됩니다.
  • Node [ Link ]
    Node.js는 브라우저 외부에서 JavaScript 코드를 실행하는 오픈 소스, 크로스 플랫폼, JavaScript 런타임 환경입니다.
  • npm [ 링크 ]
    npm은 세계에서 가장 큰 소프트웨어 레지스트리입니다. 모든 대륙의 오픈 소스 개발자는 npm을 사용하여 패키지를 공유하고 차용하고 많은 조직에서 npm을 사용하여 개인 개발도 관리합니다.

1.1 — Visual Studio Code 설치

코드를 작성하려면 IDE를 사용해야하며 Microsoft는 사용중인 운영 체제에 관계없이 어디서나 실행할 수있는 오픈 소스 및 크로스 플랫폼 IDE를 개발했습니다.

IDE를 설치하려면 code.visualstudio.com을 방문 하여 귀하의 경우에 가장 적합한 설치를 다운로드하십시오. 안정적인 버전을 선택하십시오.

Visual Studio Code 다운로드 페이지

소프트웨어가 로컬 컴퓨터에 다운로드되면 패키지를 실행하고 지침에 따라 설치를 완료합니다.

1.2 — 노드 및 npm 설치

Angular 버전 9에는 최소한 Node.js 10.13이 설치되어 있어야합니다. 최신 버전 (이 기사 작성 당시 12.15.0)을 다운로드하는 것이 좋습니다.

Node.js를 다운로드하려면 nodejs.org/en/download를 방문 하여 운영 체제와 일치하는 설치 패키지를 선택하십시오.

패키지를 다운로드 할 때 최신 기능을 포함 할 현재 버전을 선택하는 것이 좋습니다 (엔터프라이즈 프로젝트를 위해이 작업을 수행하는 경우 장기 지원 패키지를 선택하는 것이 좋습니다).

Nodejs 다운로드 페이지

설치 파일이 로컬 컴퓨터에 다운로드되면 설치를 실행하고 단계를 따릅니다. 이 패키지는 npm도 포함하고 설치합니다.

설치가 완료되면 쉘 Angular 프로젝트 생성을 시작할 수 있습니다.

소프트웨어가 성공적으로 설치되었는지 다시 확인하려면 다음을 수행하십시오.

  1. Windows PowerShell 또는 명령 프롬프트를 엽니 다.
  2. 최근 설치된 소프트웨어의 버전을 확인하려면 다음 명령을 입력하십시오.
    c : \> node -v
    c : \> npm -v
    c : \> code -v
  3. 설치된 각 소프트웨어의 버전이 PowerShell에 반환됩니다. 이것은 성공적으로 설치되었음을 나타냅니다.
  4. Windows PowerShell

Angular 프로젝트를 쉽게 만들 수 있으려면 Angular CLI를 활용해야합니다. Angular CLI를 사용하면 상자에서 꺼내 자마자 이미 작동하는 애플리케이션을 쉽게 만들 수 있습니다. Angular CLI 사용의 좋은 점은 Angular 모범 사례를 따른다는 것입니다.

Angular CLI는 Angular 애플리케이션을 초기화, 개발, 스캐 폴드 및 유지 관리하는 데 사용하는 명령 줄 인터페이스 도구입니다.

2.1 — Angular CLI 설치

Angular CLI를 설치하는 방법에는 여러 가지가 있습니다. 이 자습서에서는 Visual Studio Code 내에서 npm 패키지 관리자를 사용하여 설치합니다.

  • Windows PowerShell 또는 명령 프롬프트 열기
  • 프로젝트에 대한 새 디렉토리를 만듭니다. 이 예에서는 C 드라이브에있는 자체 디렉터리에 프로젝트를 만듭니다.
    C : \> mkdir 각도 프로젝트
  • 새로 생성 된 디렉토리 C : \> cd angular-project 내부를 탐색합니다
    .
  • 프롬프트에서 다음 명령을 입력하여 VScode c : \> code 를 엽니 다
    .
  • VScode가 실행되면 [ctrl +`] 조합을 클릭하여 IDE 내에서 터미널을 열거 나 IDE 상단의 탐색 모음에서 터미널 > 새 터미널을 클릭합니다 .
  • 터미널에서 다음 명령을 입력하고 Enter를 눌러 프로젝트 루트에 Angular CLI 설치를 시작합니다.
    C : \ angular-project> npm install -g @ angular / cli @ 9
  • Angular 9 npm 명령에 대한 Angular CLI
  • Google의 개인 정보 보호 정책에 따라 Google의 Angular 팀과 익명의 사용 데이터를 공유하라는 메시지가 표시 될 수 있습니다. 일반적으로 선택 해제합니다. 그것은 전적으로 당신에게 달려 있습니다. 데이터를 공유하려면 y 를 입력하고 Enter 키를 누르십시오. 그렇지 않으면 N을 입력하십시오 .
  • Angular CLI가 설치되었으므로 이제 명령 줄 인터페이스에서 Angular 프로젝트를 만들 수 있습니다.

새 프로젝트를 만들려면 ng new 명령을 사용해야합니다 . 이 명령은 새 작업 영역의 기본 프로젝트 인 새 Angular 앱을 만들고 초기화합니다.

ng new에 대해 자세히 알아 보려면 Angular 문서를 참조하십시오. https://angular.io/cli/new

  • VScode IDE의 터미널에서 다음 명령 (여기서 shell-project 는 응용 프로그램 / 프로젝트의 이름)을 입력하여 프로젝트를 만들고 Enter를 클릭합니다.
    C : \ angular-project> ng new shell-project
  • "앵귤러 라우팅을 추가 하시겠습니까?"라는 메시지가 표시됩니다. (y / N)”이며 필요에 따라 설치가 필요하거나 필요하지 않을 수 있습니다.
    애플리케이션에서 라우팅을 제공하려는 경우 반드시 설치해야합니다 (향후 항상 프로젝트에 추가 할 수 있음).
    이 자습서에서는 N을 선택하고 Enter 키를 누릅니다.
  • 프로젝트에서 사용할 스타일 시트 형식에 대해 선택할 수있는 옵션이 다시 표시됩니다. 위쪽 및 아래쪽 화살표 키를 사용하여 선택할 수 있습니다.
    이 자습서에서는 첫 번째 옵션 인 CSS (.css)를 선택 하고 Enter 키를 누릅니다.
  • 설치를 완료하는 데 몇 분 정도 걸리며 설치가 완료되면“√ 패키지가 성공적으로 설치되었습니다.”라는 메시지가 표시됩니다.
  • 이제 프로젝트가 생성되었으므로 VSCode에서 열어야합니다. VSCode 상단 표시 줄 메뉴에서 File> Open Folder를 클릭하고 angular-project로 이동하여 shell-project 폴더를 선택합니다.
  • Visual Studio Code는 방금 만든 Angular 프로젝트를로드합니다. VScode의 왼쪽 창 아래 스크린 샷에서 파일 구조가 표시됩니다.
  • 프로젝트를 실행하려면 다음 명령을 사용하여 코드를 컴파일하고 특정 포트에서 수신하는 브라우저에서 실행해야합니다 (이 포트는 사용자 지정 가능).
    C : \ angular-project \ shell-project> ng serve- -포트 333 -o
  • 위의 명령에서 우리는 코드를 빌드하고 포트 333에서 수신 대기하는 동안 기본 브라우저에서 애플리케이션을 제공하도록 angular에 지시합니다.

아래는 우리가 만든 각도 응용 프로그램을 표시하는 브라우저의 스크린 샷입니다. 이 페이지에는 app.component.html 파일 내에서 Angular가 제공하는 기본 정보가 포함되어 있으며 사용자에게 적합한 것으로 대체 할 수 있습니다.

이제 첫 번째 빈 Angular 9 프로젝트를 만들었으며이 프로젝트로 무엇을 할 수 있는지 보는 것이 흥미 롭습니다.

Suggested posts

Node 및 Express 앱을 처음부터 촬영하세요!

Node 및 Express 앱을 처음부터 촬영하세요!

정적 웹 페이지가 지루하고 항상 사용자가 상호 작용하도록 만들고 싶습니까? 당신은 저와 같은 자바 스크립트 팬이지만 백엔드 개발을 시작하는 방법을 모르십니까? 잠깐, 당신은 올바른 자리에 있습니다. Node and Express 앱을 처음부터 바로 촬영 해 봅시다! 장치에 노드와 npm이 설치되어 있는지 확인하십시오.

Angular vs React vs Vue : 장점, 단점 및 사용시기

Angular vs React vs Vue : 장점, 단점 및 사용시기

프로그래밍 세계 Vue에서 Angular, React 및 상대적인 참신함 (2014)을 통합하는 것은 무엇입니까? 첫째, 이들 모두는 JavaScript로 작업을 단순화하고 프런트 엔드 문제를 해결하기위한 것입니다. 둘째, 이러한 각 도구를 범용이라고 부르지 만 그럼에도 불구하고 특정 디지털 제품 개발을 위해 설계되었습니다.