@angular/cli 설치부터 Angular 프로젝트 작성까지

2029 단어 Angular자바스크립트TypeScriptNode.js

소개



이번은 @angular/cli의 인스톨을 하고 나서 실제로 Angular 프로젝트를 실행할 때까지를 써 갑니다!
Node.js가 설치되어 있어야하므로,
아직 설치하지 않은 사람은 Node.js 설치 방법(Windows) 를 봐!

목차


  • @angular/cli 설치
  • ng new 명령으로 Angular 프로젝트 만들기
  • 실제로 브라우저에서 확인해 보자!

    • 1. @angular/cli 설치


  • "npm install -g @angular/cli"를 실행하기 만하면됩니다 
    • $ npm install -g @angular/cli
  • 설치되어 있는지 확인하려면 "ng --version"을 실행하고 아래 그림과 같이 표시되면 성공! 
    • $ ng --version



    2. ng new 명령으로 Angular 프로젝트 만들기


  • "ng new project-name"을 실행하면 생성됩니다 (project-name은 자신이 좋아하는 이름으로 만들 수 있습니다) 
    • $ ng new sample
  • 아래 그림과 같이 project-name (이번에는 sample)의 폴더가 작성되어 그 안에 Angular 프로젝트가 완성됩니다.



    3. 실제로 브라우저에서 확인해 보자!


  • 생성된 프로젝트 폴더로 이동하여 “ng serve”를 실행! 
    • $ cd sample

    $ ng serve
  • 아래 그림과 같이 "Compiled successfully"라고 표시되면 OK!


  • 브라우저를 열고 「 http://localhost:4200 」에 액세스 해 아래 그림과 같은 화면이 표시되고 있으면 성공!

    • Node.js 설치 방법(Windows)
    Angular의 Chunk 오류 설명

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage