[Angular] Component

글 작성자: daily_zi

▣ ng new {project}

Angular 5를 사용한 개발의 주요 부분은 Components에서 수행된다.

Components는 기본적으로 브라우저에 표시되는 구성 요소의 .html 파일과 상호 작용하는 클래스이다.

파일 구조에는 app 구성 요소가 있으며 다음 파일로 구성된다.

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

위의 파일은 angular-cli 명령을 사용하여 새 프로젝트를 만들 때 기본적으로 만들어졌다.

app.module.ts 파일을 열면 가져온 라이브러리와 app component에 다음과 같이 지정된 선언문이 있다.

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

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

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

@NgModule({m declarations: [

AppCoponent

imports: [

BrowserModule

];

providers [],

bootstrap: [AppComponent]

})

export class AppModule { }

▣ ng g component {new-cmp}

angular-cli에는 사용자 만드는 Component 명령이 있다.

그러나 기본적으로 생성 된 app Component는 항상 부모로 유지되며 생성 된 다음 Component는 하위로 형성된다.

$ ng g component dashboard

installing component

create src\app\dashboard\dashboard.component.css

create src\app\dashboard\dashboard.component.html

create src\app\dashboard\dashboard.component.spec.ts

create src\app\dashboard\dashboard.component.ts

update src\app\app.module.ts

생성된 파일 구조를 확인하려면 src/app 폴더 아래에 dashboard 새 폴더가 만들어진다.

dashboard.component.css − css 파일
dashboard.component.html − html 파일
dashboard.component.spec.ts − 단위 테스트에 사용
dashboard.component.ts − 모듈, 속성 기타 등을 정의

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
// includes the new-cmp component we created

@NgModule({
   declarations: [
      AppComponent,
      DashboardComponent // 여기에 추가되고 자식 구성 요소로 작동
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

dashboard.component.ts 파일은 다음과 같이 생성된다.

import { Component, OnInit } from '@angular/core'; // 여기는 angular/core가 임포트됨.

@Component({
   // @ 기호로 시작하는 선언자이다. 굵게 표시된 Component 단어는 동일해야 함.
   selector: 'dashboard', //
   templateUrl: './dashboard.component.html', 
   // 새 Component에서 만든 html에 대한 참조.
   styleUrls: ['./dashboard.component.css'] // 스타일 파일에 대한 참조.
})

export class DashboardCmponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

위의 dashboard.component.ts 파일을 보면 DashboardComponent라는 새 클래스가 만들어진다.

이 클래스는 생성자와 ngOnInit()이라는 메서드가있는 OnInit.In을 구현한다.

ngOnInit은 클래스가 실행될 때 기본적으로 호출된다.

▣ index.html

http://localhost:4200/ 브라우저에서 url을 치면, 먼저 아래에 보이는 index.html 파일을 실행한다.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</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></app-root>

기본적으로 Angular로 작성된 root 태그이다. 이 태그는 main.ts 파일에 참조를 가지고 있다.

저작자표시 비영리 변경금지

'프로젝트 > Angular' 카테고리의 다른 글

[Angular2] 환경구성 (0)	2019.09.03

로즈마리

[Angular] Component

'프로젝트 > Angular' 카테고리의 다른 글

티스토리툴바