DEV/Angular

Angular 앵귤러 배우기 - 3 컴포넌트 Component

2018. 12. 24. 15:46

코드를 보며 이해


ide는 웹스톰을 사용했습니다

프로젝트>src>index.html 을열어보면 <app-root>태그가 있는데 여기에 컴포넌트가 들어갑니다

태그셀렉터 하나당 컴포넌트 하나입니다


프로젝트>src>app>app.component.ts 를보면

컴포넌트의 구성요소

selector: 'app-root' 부분이 아까 index.html 안에있던 <app-root> 태그셀렉터가된다 사용자가원하는대로 변경할수있습니다

templateUrl: './app.component.html' 같은위치의 app.component.html 파일의 내용이 <app-root>태그의 내용을 채우게됩니다

styleUrls: ['./app.component.scss]' 같은위치의 app.component.scss 파일의 스타일이 app.component.html 에 적용됩니다

css 스타일 파일은 컴포넌트 하나당 여러개 만들수있습니다


이렇게 세개를 묶어서 컴포넌트라고 부릅니다


app.component.html 파일을보면


<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

이렇게 되있는데 {{ title }}! 이것과 <router-outlet></router-outlet> 이것은 일단 제쳐두고 이파일의 내용이 index.html의 <app-root>태그를 대신하여


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</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>
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

</body>
</html>


이렇게 된다고 볼수있습니다


이제 컴포넌트를 만들기전에 

앵귤러cli명령어들을 살펴봅니다


ng serve -o

프로젝트 루트 폴더에서 명령을 실행하면 앵귤러 프로젝트를 빌드 및 번들링 작업을 진행하고 웹팩 테스트 서버를 기동합니다. 더불어서 -o 옵션을 추가하면 브라우저가 실행되고 웹팩 테스트 서버에 접속하여 index.html 파일을 다운받아서 화면에 표시합니다.


ng g c [component-name]

새 컴포넌트를 생성합니다. 컴포넌트 전용폴더가 생성됩니다. g 문자는 generate 문자열을 줄여서 쓴 것이고 c 문자는 component 문자열을 줄여서 쓴 것입니다.


--module=app

컴포넌트를 등록할 대상 모듈을 지정합니다.


app 문자열은 AppModule 클래스에서 Module 단어를 뺀 후 소문자로 사용합니다.

생략하면 루트 모듈에 등록됩니다.

컴포넌트 생성 시 특정 폴더 밑에 만들라고 한 경우, 해당 폴더에 모듈 파일이 존재한다고 할 때, 생략하면 해당 폴더에 존재하는 모듈에 등록됩니다.

--selector=selector

컴포넌트의 selector 값을 지정합니다. 생략하면 컴포넌트명에 자동으로 지정됩니다.


--prefix=my

컴포넌트의 selector 값에서 사용할 두문자를 지정합니다. 생략하면 angular.json 파일의 설정을 따릅니다.


--inlineTemplate=true

HTML 파일을 별도로 만들지 않습니다. 생략하면 별도로 HTML 파일을 생성합니다.


--inlineStyle=true

CSS 파일을 별도로 만들지 않습니다. 생략하면 별도로 CSS 파일을 생성합니다.


--spec=false

테스트 파일(~.spec.ts)을 별도로 만들지 않습니다. 생략하면 별도로 테스트 파일을 생성합니다.


보다 자세한 내용은 공식 사이트를 참고하세요.

https://angular.io/cli/generate#component


ng g s [service-name]

새 서비스를 생성합니다. s 문자는 service 문자열을 줄여서 쓴 것입니다.

https://angular.io/cli/generate#directive


ng g g [guard-name]

새 가드를 생성합니다. 가다는 서비스의 일종으로 라우팅 처리 시 작동하는 서비스입니다. 두 번째 g 문자는 guard 문자열을 줄여서 쓴 것입니다.

https://angular.io/cli/generate#guard


ng g p [pipe-name]

새 파이프를 생성합니다. p 문자는 pipe 문자열을 줄여서 쓴 것입니다.

https://angular.io/cli/generate#pipe


ng g d [directive-name]

새 디렉티브를 생성합니다. d 문자는 directive 문자열을 줄여서 쓴 것입니다.

https://angular.io/cli/generate#directive


ng g class [class-name]

새 클래스를 생성합니다. c 문자는 component 문자열을 의미하기 때문에 사용할 수 없습니다. 이럴 때는 줄여 쓰지 말고 그대로 class 라는 문자열을 사용하면 됩니다.

https://angular.io/cli/generate#class


ng g i [interface-name]

새 인터페이스를 생성합니다. i 문자는 interface 문자열을 줄여서 쓴 것입니다.

https://angular.io/cli/generate#interface


ng g m [module-name]

새 모듈을 생성합니다. 모듈 전용폴더가 생성됩니다. m 문자는 module 문자열을 줄여서 쓴 것입니다.


--routing=true 라우팅 정보를 별도의 파일로 취급할 수 있도록 라우팅 모듈 파일을 추가로 생성합니다. 생략하면 생성되지 않고 모듈파일만 생성됩니다.


--module=app

새 모듈을 루트 모듈에 등록하는 작업을 추가로 수행합니다.


보다 자세한 내용은 공식 사이트를 참고하세요.

https://angular.io/cli/generate#module



명령 프롬프트에서 

ng g c demo

g c : generate component 의약자


컴포넌트 구성요소인 Template, Style, Class 파일이 만들어집니다 

.spec파일은 테스트를위한 파일로써 신경쓰지 않아도됩니다


demo.component.scss 파일엔 내용이 없습니다


demo.component.html 파일

<p>
  demo works!
</p>


demo.component.ts 파일

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

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

태그셀렉터가 app-demo입니다 이컴포넌트를 사용하려면 직접태그를 사용하거나 라우팅을하여 사용합니다


먼저 태그를사용하는방법입니다


우선 app.component.html에 있는 샘플내용을 모두지우고 

<h1>이것은 App 컴포넌트</h1>

<app-demo></app-demo>

<router-outlet></router-outlet>

이렇게만들어주고


명령 프롬프트에서 ng serve로 웹브라우저를통해 확인합니다

index.html 안에 <body> 태그안에 <app-root>태그안에 <app-demo> 가배치되어있습니다

컴포넌트를 만들고 템플릿안에 셀렉터를 사용하여 직접사용할수 있습니다

이런식으로 여러컴포넌트를 하나의 템플릿안에서 사용할수도있습니다

<h1>이것은 App 컴포넌트</h1>

<app-demo></app-demo>
<app-demo></app-demo>
<app-demo></app-demo>
<app-demo></app-demo>


<router-outlet></router-outlet>


'DEV > Angular' 카테고리의 다른 글

Angular 앵귤러 배우기 - 5 라우팅 Routing  (0) 2018.12.24
Angular 앵귤러 배우기 - 4 네뷸라모듈설치 NebularModule  (0) 2018.12.24
Angular 앵귤러 ngx-admin 관리자 키트  (0) 2018.11.08
Angular 앵귤러 배우기 - 2 프로젝트만들기 NewProject  (0) 2018.10.10
Angular 앵귤러 배우기 - 1 설치 install  (0) 2018.10.10
Profile
뚜루뚱 Notepad
admin write link

notice

category

recent posts

recent comments

tag cloud

my link

statistics

  • total :
  • today :
  • yesterday :

티스토리툴바