Angular의 구성 요소 대 모듈

1. Angular의 모듈
2. Angular의 구성 요소
3. 결론

이 기사에서는 Angular의 구성 요소와 모듈을 소개하고 차이점에 대해 설명합니다.

Angular의 모듈

이 모듈은 우리 애플리케이션의 완전한 기능입니다.

예를 들어 사용자 인증은 사용자 로그인, 등록 및 인증(비밀번호 찾기 및 이메일 확인)을 포함하는 완전한 기능입니다. 따라서 사용자 인증은 애플리케이션의 모듈입니다.

사용자 인증과 마찬가지로 서로 관련된 기능 그룹이 있는 경우 모듈에는 하나 이상의 구성 요소, 서비스 및 핍이 포함됩니다.

예를 들어 사용자 인증에는 login, register, forget password 세 가지 구성 요소가 있습니다. 우리 서비스는 사용자 인증에서 API 호출이 될 것이며 pips는 도우미가 될 것입니다.

따라서 서로 관련된 이러한 다양한 기능을 결합하면 Angular 애플리케이션에서 하나의 모듈이 됩니다.

이제 다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.

# angular
ng new my-app

Angular에서 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

그런 다음 app.module.ts 파일을 엽니다.

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

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

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

위의 코드에서 볼 수 있듯이 앱 모듈에서 NgModule과 BrowserModule을 가져왔습니다. 또한 하나의 구성 요소인 AppComponent를 가져왔습니다.

그러나 모듈에서 더 많은 구성 요소를 가져오려면 선언을 사용하여 모듈에 구성 요소를 등록할 수 있습니다. 다른 모듈을 가져오려는 경우 imports를 사용할 수 있습니다.

다음 명령을 사용하여 Angular 애플리케이션에서 새 모듈을 쉽게 만들 수 있습니다.

# angular
ng generate module user-auth

이 명령은 아래와 같이 App 폴더 안에 새 폴더를 만들고 새 모듈을 만듭니다.

출력:

Angular의 구성 요소

구성 요소는 특정 작업을 위해 생성된 코드 조각입니다.

예를 들어 사용자가 스스로 등록하기를 원하면 사용자가 애플리케이션에 등록할 수 있도록 하는 register라는 새 구성 요소를 만들 수 있습니다.

컴포넌트는 재사용할 수 있는 곳에서 필요에 따라 재사용할 수 있습니다. 예를 들어 Angular 애플리케이션의 모든 웹 페이지에서 머리글과 바닥글을 사용하려면 header와 footer를 만들고 사용하려는 모든 위치에서 이러한 구성 요소를 가져올 수 있습니다.

구성 요소는 4개의 파일로 구성됩니다.

1. 구성 요소의 스타일을 작성하는 데 사용되는 CSS 파일입니다.
2. 컴포넌트의 프론트엔드 또는 뷰를 작성하는 데 사용되는 HTML 파일입니다.
3. 테스트 케이스 작성에 사용되는 스펙 파일.
4. 함수, API 호출 등을 포함하는 구성 요소의 논리적 부분을 작성하는 구성 요소 파일

이제 다음 명령을 사용하여 새 응용 프로그램을 생성해 보겠습니다.

# angular
ng new my-app

Angular에서 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

그런 다음 app.component.ts 파일을 엽니다.

# angular
import { Component } from "@angular/core";

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

위의 코드에서 볼 수 있듯이 @angular/core에서 component 메소드를 가져왔습니다. 이제 방금 가져온 component를 사용하여 구성 요소에 대한 selector, templateUrl 및 styleUrls를 정의할 수 있습니다.

선택기는 Angular 애플리케이션에서 구성 요소의 콘텐츠를 표시하는 데 사용되는 태그입니다.

위의 코드에서 index.html 파일에 <app-root></app-root> 태그를 생성하면 Angular 애플리케이션이 태그를 감지하고 이를 구성 요소의 콘텐츠로 대체합니다.

templateUrl은 구성 요소의 템플릿을 정의하는 데 사용됩니다. 그리고 styleUrls는 스타일이 작성되는 구성 요소에 대한 CSS 파일을 정의합니다.

다음 명령을 사용하여 Angular 애플리케이션에서 새 구성 요소를 쉽게 만들 수 있습니다.

# angular
ng generate component login

이 명령은 구성 요소에 대한 새 선택기로 4개의 새 파일을 만듭니다.

출력:

결론

이 튜토리얼에서는 Angular의 모듈과 구성 요소, 새 구성 요소를 만드는 방법, 해당 방법 및 구성 요소에 대해 배웠습니다.