Angular 시작

Angular 시작

작성일시 : 2018년 06월 10일

환경 : VSCode, NPM, Angular CLI

VSCode 설치 : http://osc131.tistory.com/51?category=745386

NPM 설치 : http://osc131.tistory.com/52?category=745386

1. Angular CLI 설치

1.1 Angular CLI 설치 명령어 입력

# npm install -g @angular/cli

2. Project 생성

2.1 Project 생성 명령어 입력

# ng new %Project_Name%

2.2 프로젝트 생성 확인

3. 확인

3.1 서버 실행 명령어 입력

# ng serve

3.2 아래 주소로 접근 후 확인

 

http://localhost:4200

4. 기본구조

4.1 프로젝트 구조

4.2 %Project_Home%\src\index.html

서버 실행 후 / 로 접근 시 가장 먼저 출력되는 view

selector를 사용하여 app-root라는 component를 body 내 호출

4.3 %Project_Home%\src\app\app.component.ts

index.html에서 호출 되는 컴포넌트의 정의

app-root라는 selector로 호출이 가능하고 app.component.html, app.component.css로 구성된 컴포넌트

4.4 %Project_Home%\src\app\app.component.html

%Project_Home%\src\app\app.component.css

app.component를 구성하는 요소