Tutorial: Tour of Heroes -Create a Project

Create a new workspace and an initial application

어플리케이션을 Angular workspace의 context에서 개발하게 됨. workspace는 하나 이상의 project의 파일들을 가지고 있음. project는 라이브러리나 어플리케이션을 구성하는 파일 세트임.

workspace와 초기 어플리케이션 프로젝트를 만드려면 아래처럼 하면됨.

ng new angular-tour-of-heroes

이러면 이제 Angular CLI가 필요한 Angular npm 패지지와 다른 dependency들을 설치하게 됨.
추가로 root 폴더 이름이 angular-tour-of-heroes인 워크스페이스도 생성되고 초기 스켈레톤 앱 프로젝트가 src/app에 생성되며 관련된 configuration file들도 만들어짐.

Serve the application

워크스페이스 디렉토리에 가서

ng serve --open

하면 브라우저에 어플리케이션이 돌아가는 것을 볼 수 있음.
ng serve는 앱을 빌드해서 개발서버를 시작함.
--open flag는 http://localhost:4200/로 브라우저 염.

Make changes to the application

src/app에가서 어플리케이션에 변화를 줄거임.
AppComponent 쉘의 implementation이 아래 3파일에 나뉘어서 된 것을 볼 수 있음.
1. app.component.ts - 컴포넌트 클래스 코드
2.app.component.html - 컴포넌트 템플릿
3. app.component.css 컴포넌트의 private CSS 스타일

Change the application title

app.component.ts를 열어서 title property의 값을 변경

title = 'Tour of Heroes';

app.component.html을 열어서 Angular CLI가 기본으로 생성한 템플릿을 다 지우고 아래처럼 바꿈.

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

중괄호 2개는 앵귤러의 interpolation binding는 syntax를 말하는 거임. interpolation binding는 컴포넌트의 title property 값이 <h1>에 들어가도록함.
이렇게 하면 브라우저가 새로고침되서 변경됨.

Add application styles

app.component.css를 열어서 applicatoin-wide 스타일을 적용함.

/* 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, serif;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

결과물

출처