[Angular] 1.Angular Tutorial 따라하기 1-1

해당 블로깅은 Angular Tutorial을 따라하면서 작성한 내용입니다.

https://angular.io/guide/quickstart

1. Angular 설치하기

npm install -g @angular/cli

2. 새로운 어플리케이션 만들기

ng new angular-tour-of-heroes

 - 여기서 ng new는 "새로운 프로젝트를 '현재 디렉토리'에 프로젝트명으로 디렉토리를 만들어준다." 

 - 생성하면 아래와 같은 구조로 내용이 생성될 것이다.

3. 어플리케이션 시작하기

cd angular-tour-of-heroes 

ng serve -open

 - 여기서 ng serve 는 어플리케이션을 빌드하고, 개발서버를 시작한다. 또한 소스파일이 변경될 때 어플리케이션을 알아서 자동시작해준다. '--open 옵션은 브라우저를 켜주는 옵션이다.'

4. 확인

 - 위 명령어로 실행시킬 경우 'http://localhost:4200/' 로 알아서 브라우저가 열리고, 아래처럼 내용이 나올 것이다.

5. 구성요소 확인 및 기본 내용 수정해보기

 1) src/app 으로 이동

cd src/app

 2) 편집

vi ./app.component.ts

3) 제목 수정

export class AppComponent { title = 'My First Angular App'; }

4) 확인

5) Css 수정

h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; 

}

6) 확인