개발/TIL

[230417] Angular Service, Component

ash_ 2023. 4. 18. 08:53

컴포넌트별로 나누어서 개발하여 재사용에 용이하게 함

MVC(Model-View-Controller)모델

ng generate component test
ng g c test

ng g c test --skip-test // spec.ts 없이 생성
ng g c test/sub-test // test 폴더 아래에 생성

test.component.ts
test.component.scss
test.component.html
test.component.spec.ts // 테스트용 파일이라 사용하지 않음.

네 개의 파일이 생성됨. 기본적으로 …/src/app/ 아래에 폴더 생성 후 생성된다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FirstApp</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>

app-root

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

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

  onNavigate(feature: string) {
    this.loadedFeature = feature;
  }
}

app 컴포넌트 (루트 컴포넌트)

컴포넌트 사용할 땐 html 내부에 <app-component> 로 사용함.

app.module.ts에 등록해야 함.

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

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

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

각 컴포넌트를 등록해야 모듈로 사용할 수 있다.

 

---

 

컴포넌트를 너무 크게 생각한 것 같다. 좀 더 작은 단위로 생각해서 정하자!

ex) 페이지네이션 컴포넌트를 만든다면, 모든 데이터 list로 사용할 수 있도록 만들기