Angular 환경 설정 #

Find similar titles

총 6회 업데이트 됨.

Edit

작성자
green 2018-03-29 01:43:13

You are seeing an old version of the page. Go to latest version

Structured data

Category: Programming

angular 개발에 필요한 것들에는

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

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

Table of Contents

node.js 설치
typescript 설치
angular/cli 설치
vscode 설치
angular HelloWorld만들기
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
```

참고 #