01 Angular4 - 기본 세팅 및 설명

1. 기본 세팅 및 설명

 

Angular4를 사용하는 법을 알아보자.

이때 IDE는 어떤 걸 사용해도 상관없지만 이 강좌에서는 Visual Studio Code를 사용하겠다.

 

그리고 기본적으로 Angular는 TypeScript를 사용한다.

그러므로 이 글를 보기 전에 TypeScript 강좌를 보고 오면 도움이 될 것 이다.

- TypeScript 시작글

01 TypeScript - 개념 및 환경설정

 

아래의 내용은 Angular 공식 홈페이지에서 확인할 수 있다.

Angular

 

 

(1) node.js 및 VSCode 설치

 

TypeScript - 개념 및 환경설정

01 TypeScript - 개념 및 환경설정

 

node.js와 VSCode 설치 방법은 다음 링크에서 확인할 수 있다.

node.js 설치와 VSCode 설치를 했다면 (2)번부터 진행해보자.

 

 

(2) Angular4 설치

 

 

해당 uri로 접속해보면 다음과 같은 화면이 보이는데 GET STARTED를 통해 기본 세팅을 할 수 있다.

 

먼저 VSCode의 터미널로 Angular4를 설치해주자.

 

 

설치가 완료 되면 기본적인 angular 구조를 만들어 준다.

원하는 디렉토리로 이동한 뒤 다음 명령어를 실행해준다.

 

 

성공적으로 만들어졌다면 실행시켜보자.

 

 

정상적으로 실행이 된다면 다음과 같은 브라우저 창이 뜰 것이다.

만약 뜨지 않는다면 localhost:4200으로 접속해보자.

 

 

 

다음과 같이 뜬다면 성공적으로 만들어진 것이다!

만들어진 파일들에 대한 설명은 다음과 같다.

 

 

조금 더 자세한 설명을 보고 싶다면 위에서 나와있는 Angular 공식 홈페이지에 들어가보면 된다.

다음 글부터는 예제를 들어가며 설명하겠다.