[Angular Tutorial 01] The Application Shell

[Angular Tutorial 01] The Application Shell

 https://angular.io/tutorial/toh-pt0

Angular 설치와 CLI 설치는 이전 개발환경 세팅을 참고 해 주세요!

 2018/09/11 - Step 1 Angular, Development Environment Setting

 ng new angular-tour-of-heroes 

위의 명령어를 통해 angular-tour-of-heroes 프로젝트를 생성 해 주세요.

 C:\angular workspace\angular-tour-of-heroes>ng serve --o 

해당 디렉토리로 이동 하여 ng serve --o 옵션으로 프로젝트가 잘 열리는지 확인 합니다.

--o 옵션은 --open 의 약자로 서버를 구동시킨 후 브라우저를 자동으로 열어주는 역할을 합니다.

 http://localhost:4200/ 로 접속해서 직접 확인할 수 있습니다.

Angular (앵귤러) 프로젝트가 정상적으로 실행 되었습니다.

src/app 하위의 파일들을 살펴봅시다.

1. app.component.ts— the component class code, written in TypeScript.

2. app.component.html— the component template, written in HTML.

3. app.component.css— the component's private CSS styles.

출처 : https://angular.io/tutorial/toh-pt0

각가의 파일이 어떤 역할을 하는지는 실습을 통해서 알아보도록 하겠습니다.

브라우저 Title을 수정 해 보겠습니다.

app.component.ts (class title property) 파일을 수정합니다.

title = 'angular-tour-of-heroes';

이 부분을 다음과 같이 변경 합니다.

title = 'Tour of Heroes';

그리고 app.component.html (template) 파일을 수정합니다.

<h1>Welcome to {{ title }}!</h1>

이 부분을 다음과 같이 수정 합니다.

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

title 이 출력 되는 부분의 문구가 변경 되었습니다.

src/styles.css (excerpt) 파일에 다음과같이 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;

}

You created the initial application structure using the Angular CLI.

You learned that Angular components display data.

You used the double curly braces of interpolation to display the app title.