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;
}
결과물
Author And Source
이 문제에 관하여(Tutorial: Tour of Heroes -Create a Project), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@oem0404/Tutorial-Tour-of-Heroes저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)