앵귤러 튜토리얼 - tour-of-heroes 만들기 (1)

앵귤러 튜토리얼 - tour-of-heroes 만들기 (1)

---

앵귤러 CLI install하기

npm install -g @angular/cli

새로운 애플리케이션 만들기

ng new angular-tour-of-heroes

해당 애플리케이션 접속

cd angular-tour-of-heroes
ng serve --open

ng serve를 하면, http://localhost:4200/ 에서 내 브라우저를 보여준다.

자신이 사용하는 코드 편집기(VScode 등)으로 만든 애플리케이션 폴더를 열고 src/app를 살펴보자.

이 파일 중에 3가지로 분리되어 있는 AppComponent 쉘이 구현되어 있는 것을 찾을 수 있다.

1. app.component.ts : 타입스크립트로 작성된 구성 요소 클래스 코드
2. app.component.html : HTML로 작성된 구성 요소 템플릿
3. app.component.css : 구성 요소의 비공개 CSS 스타일

app.component.ts에 있는 title 속성 값을 변경하고, app.component.html에 을 나타내면 브라우저에 title 내용이 뜨는 것을 확인할 수 있다.

css는 해당 사이트에서 보여주는 샘플 앱을 발췌해서 가져오자.

지금까지 작성한 이 3가지 파일의 코드는 다음과 같다.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

app.component.html

<h1>  </h1>

app.component.css

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

• 요약

앵귤러 CLI를 통해 초기 응용 프로그램 구조를 만들어보았다.

앵귤러의 구성 요소는 데이터를 표시한다는 걸 알게 되었다.

이중 중괄호를 통해 앱 제목을 표시할 수 있는 것을 알 수 있었다.