소개

공식 사이트의 튜토리얼을 정리가 정리하고 있습니다.

구조의 기초

Angular CLI 설치

터미널

$ npm install -g @angular/cli

이제 ng 명령을 사용할 수 있습니다.

초기 애플리케이션 만들기

터미널

$ ng new angular-tour-of-heroes

이 명령으로 작성된 것은

angular-tour-of-heroes 라는 응용 프로그램의 디렉토리

그 디렉토리 아래에

초기 골격 애플리케이션 프로젝트 (src)

엔드 투 엔드 테스트 프로젝트 (e2e)

기타 설정 파일

주로 기술해 가는 것은 src 디렉토리안의 파일입니다.

이 명령을 칠 때 초기 welcome 페이지가 출력됩니다.

터미널

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

이렇게 나왔다.

기본 구조

src/app 를 보면 6개 정도 파일이 있습니다만, 이 중 3개

app.component.ts

app.component.html

app.component.css

중요합니다. 이것에 의해 사이트의 겉보기가 완성됩니다.

동작 확인

먼저 app.component.ts 의 title変数 와 app.component.html 를 다음과 같이 변경합니다. 원래 있던 HTML은 전부 지워 버립니다.

app.component.ts

  title = 'Tour of Heros';

app.component.html

<h1>{{title}}</h1>

그리고 localhost를 살펴보면,,,


이렇게 나왔습니다.
즉, ts(typescript) 파일에서 title 변수에 대입된 값을 HTML 파일에서 사용할 수 있다는 것입니다.

공통 스타일 정돈하기

src/style.css라는 파일이 있으며 여기에서 전체 응용 프로그램의 스타일을 결정합니다.

style.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[type="text"], button {
  color: #333;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

localhost는

이런 느낌이 들었습니다.