컴포넌트별로 나누어서 개발하여 재사용에 용이하게 함
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로 사용할 수 있도록 만들기
'개발 > TIL' 카테고리의 다른 글
| [230424] Angular - Observable subscribe, Router, ActiveRoute (0) | 2023.04.24 |
|---|---|
| [230421] 변수 바인딩 event 주의, 컴포넌트 구분, routerLink (0) | 2023.04.21 |
| [230420] 데이터 추상화, Angular 라이프사이클 (0) | 2023.04.20 |
| 2021.02.02 (0) | 2022.02.03 |
| 2021.01.31 (0) | 2022.02.02 |