컴포넌트 기초 실습

Angular2 스터디 발표 자료
컴포넌트 사용은 크게 다음 두가지 과정을 거침
- 컴포넌트 추가
- 컴포넌트를 모듈에 등록

1. 컴포넌트 추가

• 컴포넌트 네이밍 규칙

name.component.ts
name-other.component.ts

• 컴포넌트 구조

import { component } from '@angular/core'

@Component({
  selector : 'ComponentName',
  template : 'HTML 템플릿',
  styles : ['div{background:blue;}']
})
export class ComponentClass{
  component 로직
}

2. 컴포넌트를 모듈에 등록

• 어플리케이션 모듈 파일(app.module.ts)을 열어 어플리케이션 시작시 사용할 컴포넌트 등록
• declarations 속성에 임포트한 컴포넌트를 선언

...
import { HelloComponent } from './hello.component';

@NgModule({
  declarations: [
    HelloComponent
  ],
  ...
})
export class AppModule { }

3. 실습

• angular-cli 설치
• 프로젝트 생성
• 컴포넌트 생성
• 컴포넌트 등록
• 적용 확인

1. angular-cli 설치
> npm install -g @angular-cli

2. 프로젝트 생성
> ng new hello-ng2
> cd hello-ng2

3. package.json 수정
> 현재 angular4버전이 나와서 기본 모듈이 4버전으로 되어있으니 책에나온 버전으로 변경 2.0.2 router만 3.0.2

4. 컴포넌트 생성
> /hello-ng2/src/app/hello.component.ts

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

@Component({
  selector : 'hello-component',
  template : '<div>{{title}}</div>',
  styles : ['div{border:1px solid;}']
})

export class HelloComponent{
  title = 'Hello Angular2';
}

5. 컴포넌트 등록
> /hello-ng2/src/app/app.module.ts
.....
import { HelloComponent } from './hello.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

6. 실행 및 확인
> hello-ng2/ng serve
http://localhost:4200

소스확인