Angular4 Tutorial for Beginner -- (1)

Angular 이용에 대한 튜토리얼은 Angular Tutorial for beginners to Professionals 를 요약하고 있다.

Angular App

여기서는 angular cli를 사용해서 angular project를 생성하고 다루는데, 링크 Angular Cli Usages 에서 새 프로젝트 실행에 대해 살펴볼 수 있다.

Anguar 의 개발 환경은 Create Angular2 를 참조한다.

프로젝트 생성

ng new 명령으로 프로젝트를 생성한다.

ng new myproducts

새로 생성한 프로젝트 디렉토리로 이동해서 서비스를 실행한다. ng serve 명령은 서버를 실행

cd myproducts
ng serve

브라우저로 localhost:4200 으로 접속

디렉토리 구성

ng new 생성하는 템플릿은 이렇게 구성되 있다.

Root 폴더

e2e 폴더

protractor 가 엔드투엔드 테스트하는데 필요한 파일을 포함한다. Protractor는 실제 브라우저에 대비해 앱을 테스트할 수 있게 한다. 여기서 자세한 것은 배울 수 있다.

콤포넌트 분석

Angular CLI로 생성한 프로젝트는 여러 콤포넌트로 구성되어 있다. src/app/ 밑에 콤포넌트 소스가 있다.

app.component.ts

앱의 뷰를 표현하고, 뷰는 화면의 한 부분이다. 3개로 구성되어 있다. class, class decorator, import statement

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

export 키워드로 AppComponent class는 다른 콤포넌트에서 사용할 수 있다. 이런 콤포넌트 클래스는 속성과 메서드를 가질 수 있다.

@Component decorator는 클래스 데코레이터로 이 콤포넌트에 대한 메타데이터를 제공한다. 이 메타데이터를 사용해서 Angular가 뷰를 생성한다.

import 구문 외부 라이브러리를 콤포넌트에서 사용하고자 할 때 사용. 여기서 @angular/core 라이브러리에서 Component 데코레이터를 가져왔다.

Root 모듈

angular 앱은 모듈로 구성된다. app.module.ts 소스를 루트 모듈(root module)로 부른다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular 모듈의 구조는 콤포넌트 클래스와 비슷하다. class, class decorator, import

Module class 는 콤포넌트와 비슷하게 export로 외부 모듈에서 사용할 수 있다.

export class AppModule { }

Angular 모듈은 @NgModule 데코레이터를 필요로 한다. 이 데코레이터로 모듈에 관련한 메타데이터를 전달한다. 소스에서 @NgModuledeclarations, imports, providers, bootstrap 네 가지 필드를 선언하고 있다.

Import 구문

AppModuel 에서 요구하는 외부 라이브러리를 들여오는데 사용한다. 또한 원하는 AppComponent를 들여오기 위해서 AppComponent가 필요하다.

부트스트래핑

루트 모듈을 부트스트랩 해보자. 먼저 화면에 보이기 위해서 템플릿 파일인 app.component.html 이 있다. 이것은 AppComponent에 바인딩 된다. 결국 AppComponent 가 AppModule이 로드될 때 부트스트랩된다고 알 수 있다.

그래서 앱이 올라올 때 Angular에게 AppModule을 적재하자고 묻는데 이것은 src/main.ts 파일에서 완성된다.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

index.html

앱의 메인 페이지이다. **** 셀렉터가 콤포넌트를 태그 처럼 사용하게 한다. app.component.ts에 선언한데로 이 셀렉터에 템플릿이 표시된다.

다른 파일

app 폴더 밑에 다른 파일을 살펴보자.

Assets 폴더

이미지 혹은 앱을 빌드하는데 필요한 자원을 넣어 두는 곳.

polyfills.ts

웹 표준을 다르게 구현/지원하는 여러 브라우저를 위해 일반화를 해준다. 브라우저 지원 가이드에 따라서 core-js, zone.js 로 관리한다.

styles.css

전역에 지원하는 스타일을 선언한다.

test.ts

단위 테스트를 위한 관문.

tsconfig.{applspec}.json

타입스크립 컴파일러 구성 과 테스트 구성파일.

ng 명령

ng new, init,

ng new 명령

ng new <project-name> [Options]

참조