Skip to content

Angular 환경 설정 #
Find similar titles

Structured data

Category
Programming

angular 개발에 필요한 것들에는

  • 편리한 개발을 위한 필수 소프트웨어 IDE(VScode)
  • Node.js 기반의 패키지 관리를 위한 Node.js와 NPM
  • 편리한 프로젝트 생성 및 관리를 위한 Angular CLI

이렇게 볼 수 있다. 지금부터 각 항목의 자세한 세부내용을 살펴보겠다.

node.js 설치 #

아래주소에 접속 후 OS 버전에 맞도록 다운로드 후 설치한다.

  • 주소

    https://nodejs.org/ko/download
    
  • node 설치 확인

    node -v
    
  • npm 설치 확인

    npm -v
    

typescript 설치 #

  • typescript 설치

    npm install -g typescript
    

angular/cli 설치 #

  • angular/cli 설치

    npm install -g @angular/cli@latest
    
  • angular cli 설치를 확인

    g -v
    

vscode 설치 #

아래주소에 접속 후 OS버전에 맞도록 다운로드 후 설치한다.

  • 주소

    https://code.visualstudio.com/download
    

angular HelloWorld만들기 #

  • angular 프로젝트를 생성한다.

    ng new HelloWorldProject
    
  • HelloWorldProject로 이동한다.

    cd HelloWorldProject
    
  • vscode로 현재 프로젝트를 오픈 app.componentts의 title 값을 변경한다.

    code .
    
  • angualr 프로젝트 서버 실행 -o : 실행 후 브라우져에서 열린다.

    ng serve -o
    

angular cli #

  • angular 프로젝트 생성한다.

    ng new 프로젝트
    
  • component를 생성한다.

    ng generate component 컴포넌트
    
  • alias를 통해 component를 생성한다.

    ng g c 컴포넌트
    
  • dry run 옵션을 주면 실제 생성되지는 않는다. 생성되는 파일 목록을 보여준다.

    ng g c 컴포넌트 --dry-run
    
  • service를 생성한다.

    ng generate service 서비스
    
  • alias를 통해 service를 생성한다.

    ng g s 서비스
    
  • dry run 옵션을 주면 실제 생성되지는 않는다. 생성되는 파일 목록을 보여준다.

    ng g s 서비스 --dry-run
    
  • ng help를 통하면 더 많은 기능을 확인 할 수 있다.

    ng help
    

참고 #

0.0.1_20140628_0