Angular my-app 예제로 살펴보는 기본 구조

Tools/ANGULAR

Angular my-app 예제로 살펴보는 기본 구조

칼쵸쵸 2023. 2. 26. 15:06

1 . Angular.json

- 기본 프로젝트 프로퍼티 (아이콘 ,이름) 설정

2 package.json

- 실행 환경 설정(실행 옵션)

3-1. main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

시작 지점 , AppModule(app.module.ts에 존재) 실행

3-2. index.html

<!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>
  <app-root></app-root>
</body>
</html>

시작 화, body에서 <app-root> 라는 컴포넌트를 호출함

4-1. app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProductDetailsComponent } from './product-details/product-details.component';
import {RouterModule} from "@angular/router";
import { ProductListComponent } from './product-list/product-list.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductDetailsComponent,
    ProductListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

- main.ts에서 호출한 클래스, 어노테이션으로 AppComponet 및 실행 중 사용할 컴포넌트를 등록

- BrowserModule(Angular 라이브러리에 있는 내장 객체) , AppRoutingModule를 import함

- bootstrap: Appcomponent로 시작 화면에서 AppComponent 객체를 사용한다고 정의

( 이는 index.html에서 <app-root>로 등록되어 있는 컴포넌트가 저장되어 있는 객체)

5. app.component

컴포넌트는 4가지 파일로 구성

1) html : 실제 컴포넌트가 만들 화면을 정의함

2) componet.css : 컴포넌트의 css

3) app.componet.ts: 컴포넌트의 데이터 정의 및 어노테이션을 활용하여 컴포넌트 구성

- 컴포넌트의 이름 (html에서 사용될)

- 컴포넌트가 사용할 html

- 컴포넌트가 사용할 스타일 (css)

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

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

AppComponent 클래스에서 만들어진 title이라는 데이터를 html에서 사용하게됨

{{ title }} 형식으로 정의해서 html에서 데이터 바인딩 할수 있도록 되어있음

4) app.componet.spec.ts : 컴포넌트 테스트 코드

6. 정리

index.html과 main.ts를 실행
index.html(첫화면) 에서 필요한 컴포넌트 정의(예제의 app-root) , main.ts에서 app.module.ts를 호출
app.module.ts에서 필요한 라이브러리, 클래스, 첫화면 출력시 필요한 컴포넌트등 단계별로 호출
3에서 호출한 app.conponent에서 app-root 컴포넌트 생성
index에서 app-root 렌더링 후 사용자에게 전달

저작자표시

현재글Angular my-app 예제로 살펴보는 기본 구조

칼의 치치