본문 바로가기
개발/Angular

[Angular] 앵귤러 Component 실습 :: 마이자몽

by 마이자몽 🌻♚ 2018. 9. 25.

Component는 View의 한 단위다.

화면에 보여지는 하나의 구역이다.



app.component.ts

1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-jamong-app';
}
 
 
cs


'@'문자는 Decorator이다. Java의 Annotation과 비슷한 역할을 해준다.

Decorator가 붙으면 Angular가 인식을하게된다.

위 코드는 Component Decorator으로 Angular가 Component class로 인식을 한다.



app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 { }
 
 
cs


app.module.ts에 import하고 declarations 인자 배열에 추가 해주면,

이 프로젝트 어떤 곳에서도 <app-root> 태그를 사용해서,

app.component.html의 내용을 담을수 있다.



index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NgJamongApp</title>
  <base href="/">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
 
cs


body 태그 안에 app-root태그를 선언하여 Component가 담긴 하나의 View를 보여준다.




실습

이제 실습을 통해서 더 자세히 알아보자.

모듈을 생성하고 Component를 만들고 index.html에 넣어보자.


모듈을 생성하는 방법은 2가지이다.


1. 직접 생성



module 폴더를 하나 생성해주고

내부에 css, html, ts파일을 만들어준다.

spec.ts파일은 테스트용으로 사용되는 파일이므로 만들어줄 필요는 없다.



line1.component.css

1
2
3
h3 {
    color: red;
}
cs


line1.compoent.html

1
<h3>이거는 Line1</h3>
cs

line1.component.ts

1
2
3
4
5
6
7
8
9
10
11
import { Component } from "@angular/core";
 
@Component({
    selector: 'app-line1',
    templateUrl: './line1.component.html',
    styleUrls: ['./line1.component.css']
})
 
export class Line1Component {
 
}
 
cs


마지막으로 app.module.ts declarations에 class 추가해줘야한다.



2. CLI(Command Line Interface) 생성


터미널을 이용해서 위에 손으로 직접 코딩한 내용을 자동으로 만들어준다.

현재 프로젝트 위치로 이동한다.

VSCode를 사용하고 있다면, 'back quote + ctrl'을 누르면 하단에 터미널이 생긴다.


'ng g c line2'라는 명령을 실행하면, line2의 이름으로 module이 만들어지고, app.module.ts에 추가된것도 확인가능하다.

g c 는 generate component의 약자이다.



line2.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-line2',
  template: `
  <h2>이거는 Line2</h2>
  `,
  styles: [`
  h2 {
    color : blue;
  }
  `]
})
export class Line2Component implements OnInit {
 
  constructor() { }
 
  ngOnInit() {
  }
 
}
 
 
cs


이번에는 inline방식으로 template과 style을 넣어봤다.

back quote를 이용해서 파일을 참조하는게 아니라 직접 넣어줄 수도 있다.



이제 우리가 만든 line1 과 line2  component들을 화면에 출력해주기 위해, app.component.html의 내용을 바꿔주자.

1
2
<app-line1></app-line1>
<app-line2></app-line2>
cs



아직 서버를 실행하지 않았다면 실행해주자.




localhost:4200으로 결과화면을 확인하자.

위와 같이 화면에 line1 과 line2 component가 View에 출력된 것을 확인할 수 있다.

Angular는 이렇게 tag를 이용해서 Component로 화면을 구성한다.



댓글0