컴포넌트 배치 방법

1. 컴포넌트 배치를 위한 프로젝트

1. 터미널 실행

2. 컴포넌트 생성하기

   1. header.componant.ts 생성하기
   • Cli 사용하여 component 생성 및 모듈 등록

   	PS C:\\Users\\K4\\go\\hello-ang\\front-end> ng generate component header
   

   • 결과 : 모듈이 추가됨

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { HeaderComponent } from './header/header.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       HeaderComponent,
     ],
     imports: [
       BrowserModule,
       AppRoutingModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   • 결과화면 - 해더 컴포넌트 폴더 생성

   

   b. footer.component.ts 생성하기

   • Cli 사용하여 component 생성 및 모듈 등록

   PS C:\\Users\\K4\\go\\hello-ang\\front-end> ng generate component header
   

   • 결과 : footer 추가

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { HeaderComponent } from './header/header.component';
   import { FooterComponent } from './footer/footer.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       HeaderComponent,
       FooterComponent,
     ],
     imports: [
       BrowserModule,
       AppRoutingModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   c. section 컴포넌트 생성하기

   • cli를 사용하여 section component 생성 및 모듈 등록

   PS C:\\Users\\K4\\go\\hello-ang\\front-end> ng g c section
   

   • 결과 : section componet 생성 및 등록

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { HeaderComponent } from './header/header.component';
   import { FooterComponent } from './footer/footer.component';
   import { SectionComponent } from './section/section.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       HeaderComponent,
       FooterComponent,
       SectionComponent,
     ],
     imports: [
       BrowserModule,
       AppRoutingModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   d. 컴포넌트 생성 및 결과 확인을 위하여 app.component.html 의 모든내용 삭제 후 "루트 " 입력 후 localhost:4200 실행하고 화면 확인

   결과 화면 :

   

3. component 3가지로 조립해보기

   1. app.component.html에 component selector의 태그 이름 쓰기
   • 내용 확인

   // selector 이름이란?
   // header.component.ts 의 내용
   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-header',    // << ==== header의 셀럭터 태그 이름
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss']
   })
   export class HeaderComponent implements OnInit {
   
     constructor() { }
   
     ngOnInit(): void {
     }
   
   }
   
   //... 나머지 같음
   

   • app.component.html 작성하기

   // 위치 app.component.html
   
   <app-header></app-header>
   
   <app-section></app-section>
   
   <app-footer></app-footer>
   

   • 결과화면

   

   b. header.component.html 꾸미고 캡슐화 진행

   // header.component.html
   
   <div class="title"> 
       여기는 헤더 입니다.
   </div>
   

   c. title의 css 꾸미기

   // header.component.scss
   .title{
       width: 100%;    
       height: 10vh;
       background-color: blue;
       font-size: 30px;
       color: white;
   }
   

   • 결과 화면

   

   d. html과 css 꾸미기 반복

   // html
   <div class="title">
   
       여기는 푸터 입니다.
   
   </div>
   
   // css
   .title{
       width: 100%;    
       height: 10vh;
       background-color: green;
       font-size: 15px;
       color: white;
   }
   
   

   • 결과 화면

   

4. 하위 컴포넌트 생성하기

   1. section 컴포넌트 아래 time-display, buttons 컴포넌트 생성

   PS C:\\Users\\K4\\go\\hello-ang\\front-end> ng g c section/time-display
   PS C:\\Users\\K4\\go\\hello-ang\\front-end> ng g c section/buttons
   

   • 결과 : section아래 time-display와 buttons 폴더 생성됨

   

b. section.html에 하위 컴포넌트들 적용시키기

// 위치 : section.component.html
<div class="title">

    여기는 섹션입니다.

    <app-time-display></app-time-display>
    <app-buttons></app-buttons>

</div>

• 결과