1 Angular 시작하기

본 문서는 연습삼아 angular.io에서 제공하는 Docs를 내맘대로 번역하였습니다.

작성 당시 Angular 현재 버전은 4.3.3입니다.

빠른 시작

좋은 도구를 사용하면 모든 것을 수작업으로 다룬 것보다 응용 프로그램 개발을보다 빠르고 쉽게 유지 관리 할 수 ​​있습니다.

Angular CLI는 프로젝트를 만들고 파일을 추가하며 테스트, 번들링 및 배포와 같은 다양한 개발 작업을 수행 할 수있는 명령 줄 인터페이스 도구입니다.

이 가이드의 목표는 모든 Angular 프로젝트에 도움이되는 스타일 가이드 권장 사항을 준수하면서 Angular CLI를 사용하여 TypeScript에서 간단한 Angular 응용 프로그램을 작성하고 실행하는 것입니다.

이 장을 마치면, CLI를 사용하여 개발에 대한 기본 지식을 얻고 이 설명서 샘플과 실제 응용 프로그램의 기반을 가집니다.

그리고 예제를 다운로드 할 수도 있습니다.

 

1 단계. 개발 환경 설정

개발 환경을 설정해야만 할 수 있습니다.

Node.js® 및 npm이 아직 시스템에 설치되어 있지 않은 경우 설치하십시오.

터미널 / 콘솔 창에서 node -v 및 npm -v를 실행하여 최소버전이 노드 6.9.x 및 npm 3.x.x를 실행하는지 확인하십시오. 이전 버전에서는 오류가 발생하지만 최신 버전에서는 문제가 없습니다.

 

그런 다음 Angular CLI를 전역 프로그램으로 설치하십시오.

npm install -g @angular/cli

 

2 단계. 새 프로젝트 만들기

터미널 창을 엽니다.

다음 명령을 실행하여 새 프로젝트 및 뼈대 응용프로그램을 생성합니다.

ng new my-app

 

인내심을 바랍니다. 새 프로젝트를 설정하는 데 시간이 걸리며, 대부분 npm 패키지를 설치하는 데 소요됩니다.

 

 

3 단계 : 애플리케이션 제공

프로젝트 디렉토리로 이동하여 서버를 시작하십시오.

cd my-app ng serve --open

ng serve 명령은 서버를 시작하고 파일을 감시하며 해당 파일을 변경할 때 응용 프로그램을 재구축합니다.

--open (또는 -o) 옵션을 사용하면 브라우저가 주소 http://localhost:4200/로 자동 열립니다.

앱에서 다음 메시지로 당신을 반깁니다.

 

4 단계 : 첫 번째 Angular 컴포넌트 편집

CLI가 첫 번째 Angular 컴포넌트를 작성했습니다. 이것이 루트 컴포넌트이며 app-root라고합니다. ./src/app/app.component.ts에서 찾을 수 있습니다.

컴포넌트 파일을 열고 title 프로퍼티를 Welcome to app!! 에서 Welcome to My First Angular App!!으로 변경하십시오!:

src/app/app.component.ts

export class AppComponent {   title = 'My First Angular App'; }

브라우저는 수정 된 제목으로 자동으로 다시로드 됩니다. 멋지지만 더 좋아 보일 수 있습니다.

src/app/app.component.css를 열고 컴포넌트에 스타일을 지정하십시오.

src/app/app.component.css

h1 {   color: #369;   font-family: Arial, Helvetica, sans-serif;   font-size: 250%; }

 

좋아 보입니다!

 

향후 계획?

이것이 "Hello, World"앱에서 기대하는 모든 것입니다.

Tour of Heroes Tutorial을 준비하고 Angular로 구축 할 수 있는 훌륭한 것들을 보여주는 작은 응용 프로그램을 만들 준비가되었습니다.

또는 당신은 신규 프로젝트의 파일에 대해 더 배우기 위해 조금 더 오래 머물 수 있습니다.

 

프로젝트 파일 검토

Angular CLI 프로젝트는 빠른 실험과 엔터프라이즈 솔루션을 위한 기반입니다.

 

점검해야하는 첫 번째 파일은 README.md입니다.  이 파일은 CLI 명령을 사용하는 방법에 대한 몇 가지 기본 정보가 있습니다. Angular CLI가 작동하는 방식에 대해 더 알고 싶다면 Angular CLI 저장소 및 Wiki를 방문하십시오.

생성 된 파일 중 일부는 생소 할 수 있습니다.

 

src 폴더

당신의 응용 프로그램은 src 폴더에 있습니다. 앱에 필요한 모든 앵귤러 컴포넌트, 템플릿, 스타일, 이미지 및 기타파일들이 여기 있습니다. 이 폴더 외부의 모든 파일은 앱 구축을 지원하기 위한 것입니다.

 

파일	목적
app/app.component .{ts,html,css,spec.ts}	AppComponent를 HTML 템플릿, CSS 스타일 시트 및 단위 테스트와 함께 정의합니다. 이것은 애플리케이션이 진화함에 따라 중첩 된 컴포넌트의 트리가 될 루트 컴포넌트입니다.
app/app.module.ts	Agular에게 응용 프로그램을 짜맞추는 방법을 알려주는 루트 모듈 인 AppModule을 정의합니다. 지금은 AppComponent 만 선언합니다. 곧 더 많은 컴포넌트가 선언 될 것입니다.
assets/*	응용 프로그램을 빌드 할 때 이미지와 같은 다른 것을 복사 할 수있는 폴더입니다.
environments/*	이 폴더는 각 대상 환경에 대해 하나의 파일을 포함하며, 각 파일은 간단한 구성 변수를 내 보내어 응용 프로그램에서 사용합니다. 파일은 응용 프로그램을 만들 때 즉시 바뀝니다. 프로덕션 또는 다른 분석 토큰에 사용되는 것과 다른 API 엔드 포인트를 개발에 사용할 수 있습니다. 일부 모의 서비스를 사용할 수도 있습니다. 어느 쪽이든, CLI는 귀하에게 적용됩니다.
favicon.ico	모든 사이트는 북마크 바에서 잘 보이길 원합니다. 아주 독특한 Angular 아이콘으로 시작하십시오.
index.html	사이트를 방문했을 때 제공되는 메인 HTML 페이지입니다. 대부분의 경우 편집 할 필요가 없습니다. CLI가 앱을 빌드 할 때 자동으로 모든 js 및 css 파일을 추가하므로 수동으로 여기에 <script> 또는 <link> 태그를 추가 할 필요가 없습니다.
main.ts	앱의 주요 진입 점. JIT 컴파일러로 응용 프로그램을 컴파일하고 응용 프로그램의 루트 모듈 (AppModule)을 부트 스트랩하여 브라우저에서 실행합니다. ng build 또는 ng serve에 --aot옵션을 사용하여 코드를 변경하지 않고 AOT 컴파일러를 사용할 수도 있습니다.
polyfills.ts	서로 다른 브라우저는 웹 표준에 대한 지원 수준이 다릅니다. Polyfills는 이러한 차이를 일반화하는 데 도움이 됩니다. core-js 및 zone.js로는 꽤 안전할 수도 있지만 자세한 내용은 브라우저 지원 안내서를 확인하십시오.
styles.css	전역 스타일이 여기에 옵니다. 대부분의 경우 유지 관리를 위해 컴포넌트에 로컬 스타일을 갖추기를 원하지만 모든 앱에 영향을 미치는 스타일은 중앙 위치에 있어야합니다.
test.ts	이것은 단위 테스트를위한 주요 진입 점입니다. 익숙하지 않은 맞춤 설정이 있지만 수정할 필요는 없습니다.
tsconfig.{app|spec}.json	Angular 응용프로그램 (tsconfig.app.json) 및 단위 테스트 (tsconfig.spec.json)에 대한 TypeScript 컴파일러 설정

 

루트 폴더

src/ 폴더는 프로젝트의 루트 폴더에있는 항목 중 하나입니다. 다른 파일은 응용 프로그램을 빌드, 테스트, 유지 관리, 문서화 및 배포하는 데 도움이됩니다. 이 파일들은 src/에 인접한 루트 폴더에 있습니다.

파일	목적
e2e/	e2e/안에서 엔드 투 엔드 테스트를 실시합니다. e2e 테스트가 실제로는 메인 앱을 테스트하는 별개의 앱이므로 src/ 안에 있지 않아야합니다. 따라서 그들 만의 tsconfig.e2e.json을 가지고 있습니다.
node_modules/	Node.js가 이 폴더를 생성하고 그 안에 package.json에 나열된 모든 서드파티 모듈을 넣습니다.
.angular-cli.json	Angular CLI용 설정. 이 파일에서 몇 가지 기본값을 설정하고 프로젝트가 빌드 될 때 포함될 파일을 구성 할 수 있습니다. 더 많은 것을 알고 싶다면 공식 문서를 확인하십시오.
.editorconfig	편집기를 사용하여 프로젝트를 사용하는 모든 사람이 동일한 기본 설정을 가지도록하는 간단한 설정. 대부분의 편집기는 .editorconfig 파일을 지원합니다. 자세한 내용은 http://editorconfig.org를 참조하십시오.
.gitignore	자동 생성 된 파일이 소스 컨트롤에 커밋되지 않도록 확인하는 설정.
karma.conf.js	Karma 테스트 러너를 위한 단위 테스트 설정. ng test를 실행할 때 사용됩니다.
package.json	프로젝트에서 사용하는 서드파티 패키지를 나열하는 npm 설정. 여기에 사용자 정의 스크립트를 추가 할 수도 있습니다.
protractor.conf.js	Protractor의 엔드 투 엔드 테스트 구성, ng e2e 실행시 사용
README.md	CLI 명령 정보로 채워진 프로젝트의 기본 설명서. 저장소를 체크 아웃하는 모든 사용자가 앱을 빌드 할 수 있도록 프로젝트 문서를 통해 이를 향상시켜야합니다!
tsconfig.json	IDE가 픽업하여 유용한 툴링을 제공하는 TypeScript 컴파일러 설정.
tslint.json	ng lint를 실행할 때 사용되는 Codelyzer와 함께 TSLint의 윤곽 지정 구성. Linting은 코드 스타일을 일관되게 유지하는 데 도움이됩니다.

 

다음에는 튜토리얼을 번역할 예정입니다.