Angular 구성 요소와 모듈의 차이점은 무엇입니까?

Angular 구성 요소와 모듈의 차이점은 무엇입니까?

동영상을 보고 기사를 읽고 있는데 이 특정 기사는 기사 시작 부분에서 너무 혼란스럽습니다.

Angular의 응용 프로그램은 모듈식 구조를 따릅니다.Angular 앱에는 많은 모듈이 포함되어 있으며, 각 모듈은 단일 목적을 위해 전용됩니다.일반적으로 모듈은 Angular 앱을 실행하기 위해 다른 모듈과 통합된 코드 그룹입니다.

모듈은 코드에서 일부 클래스, 기능 및 값을 내보냅니다.구성요소는 Angular의 기본 블록이며 여러 구성요소가 응용프로그램을 구성합니다.

모듈은 다른 모듈의 라이브러리가 될 수 있습니다.예를 들어, 기본 Angular 라이브러리 모듈인 Angular2/core 라이브러리는 다른 구성 요소에서 가져옵니다.

교환 가능한 조건입니까?구성 요소가 모듈입니까?하지만 그 반대는 아니겠죠?

구성요소는 보기(html)를 제어합니다.또한 다른 구성 요소 및 서비스와 통신하여 앱에 기능을 제공합니다.

모듈은 하나 이상의 구성 요소로 구성됩니다.그들은 어떤 html도 제어하지 않습니다.모듈은 다른 모듈에 속한 구성 요소에서 사용할 수 있는 구성 요소, 종속성 인젝터에서 주입할 클래스 및 부트스트랩되는 구성 요소를 선언합니다.모듈을 사용하면 구성 요소를 관리하여 앱에 모듈화 기능을 제공할 수 있습니다.

글쎄요, 답변을 올리기에는 너무 늦었지만, 제 설명은 앵귤러 초보자들이 이해하기 쉬울 것 같습니다.다음은 제가 발표하는 예시 중 하나입니다.

각진 응용프로그램을 건물로 간주합니다.건물은 다음을 가질 수 있습니다.N됩니다.아파트는 모듈로 간주됩니다.아파트는 그 다음을 가질 수 있습니다.N구성요소라는 Angular 응용프로그램의 구성요소에 해당하는 룸 수입니다.

이제 각 아파트(모듈)에는 아파트 안팎으로 더 큰 이동이 가능하도록 객실(부품), 승강기(서비스), 전선(파이프) 등이 설치돼 아파트에서 유용하게 활용될 예정입니다.

당신은 또한 수영장, 테니스 코트와 같은 모든 건물 거주자들이 공유하는 장소를 갖게 될 것입니다.따라서 이러한 구성 요소는 Shared Module 내부의 구성 요소로 간주할 수 있습니다.

기본적으로 그 차이는 다음과 같습니다.

다음은 에 대한 세션입니다.

슬라이드를 따라 Angular 응용 프로그램의 구성 요소 이해

가장 간단한 설명:

모듈은 구성 요소, 서비스, 파이프라고 하는 하나 이상의 작은 컨테이너를 포함하는 큰 컨테이너와 같습니다.

구성 요소에는 다음이 포함됩니다.

• HTML 템플릿 또는 HTML 코드

• 코드(타입스크립트)

• 서비스:코드를 다시 쓸 필요가 없도록 구성 요소가 공유하는 재사용 가능한 코드입니다.

• 파이프: 데이터를 입력으로 받아 원하는 출력으로 변환합니다.

참조: https://scrimba.com/

각도 성분

구성 요소는 Angular 앱의 기본 구성 요소 중 하나입니다.앱에는 둘 이상의 구성 요소가 있을 수 있습니다.일반 앱에서 구성 요소는 HTML 보기 페이지 클래스 파일, HTML 페이지의 동작을 제어하는 클래스 파일 및 HTML 보기 스타일을 지정하는 CSS/scss 파일을 포함합니다.다음을 사용하여 구성 요소를 만들 수 있습니다.@Component의일인장가의 일부인 @angular/core모듈.

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

구성 요소를 생성합니다.

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

구성 요소 또는 각도 앱을 만드는 방법은 자습서입니다.

각도 모듈

각 모듈은 구성 요소, 지침, 서비스 등과 같은 각진 기본 구성 요소로 구성되어 있습니다.앱에는 두 개 이상의 모듈이 있을 수 있습니다.

다음을 사용하여 모듈을 생성할 수 있습니다.@NgModule장식가

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

사진 한 장이 천 마디의 가치가 있습니다!

Angular의 개념은 매우 간단합니다.그것은 "브릭" -> 모듈로 앱을 "구축"할 것을 제안합니다.

이 개념을 사용하면 코드를 더 잘 구성하고 재사용 및 공유를 촉진할 수 있습니다.

Angular 모듈과 ES2015 / TypeScript 모듈이 혼동되지 않도록 주의하십시오.

Angular 모듈과 관련하여 다음을 위한 메커니즘입니다.

1그룹 구성 요소(서비스, 지침, 파이프 등)

2- 종속성 정의

3- 가시성을 정의합니다.

Angular 모듈은 클래스(일반적으로 비어 있음)와 NgModule 장식기로 간단히 정의됩니다.

Angular 2의 모듈은 구성 요소, 지침, 서비스 등으로 만들어진 것입니다.하나 이상의 모듈이 결합하여 응용프로그램을 만듭니다.모듈은 응용 프로그램을 논리적 코드 조각으로 분할합니다.각 모듈은 단일 작업을 수행합니다.

Angular 2의 구성요소는 표시할 페이지에 대한 논리를 작성하는 클래스입니다.구성요소는 보기(html)를 제어합니다.구성 요소는 다른 구성 요소 및 서비스와 통신합니다.

구성 요소는the template(view) + a class (Typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template).

모듈basically group the related components, services together독립적으로 실행할 수 있는 기능 덩어리를 가질 수 있습니다.예를 들어, 앱에 기능 모듈이 있을 수 있고, 대시보드와 같은 앱의 특정 기능에 대한 구성 요소를 그룹화할 수 있으며, 이 모듈을 다른 애플리케이션 내에서 간단히 가져와 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/40073941/whats-the-difference-between-an-angular-component-and-module