각도 컴포넌트와 모듈의 차이점

186

나는 비디오를보고 기사를 읽었지만이 특정 기사 는 기사의 시작 부분에서 나를 혼란스럽게 만듭니다.

Angular의 응용 프로그램은 모듈 식 구조를 따릅니다. Angular 앱에는 각각 단일 용도 전용 모듈이 많이 있습니다. 일반적으로 모듈은 다른 모듈과 통합되어 Angular 앱을 실행하는 응집력있는 코드 그룹입니다.

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

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

교환 가능한 조건입니까? 구성 요소가 모듈입니까? 그러나 그 반대는 아닌가?

angular module components

— 루이스 페나
소스

246

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

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

— 세파
소스

190

답변을 게시하기에는 너무 늦었지만 Angular의 초보자는 누구인지 이해하기 쉽다고 생각합니다. 다음은 프레젠테이션 중에 제공하는 예 중 하나입니다.

각도 응용 프로그램을 건물로 고려하십시오. 건물에는 N여러 개의 아파트 가있을 수 있습니다. 아파트는 모듈로 간주됩니다. 그러면 아파트에는 N구성 요소라는 각도 응용 프로그램의 빌딩 블록에 해당하는 여러 개의 방이 있을 수 있습니다.

이제 각 아파트 (모듈)에는 방 (구성 요소), 리프트 (서비스)가있어 아파트 안팎으로 더 큰 움직임을 가능하게하고 와이어 (파이프)는 정보를 움직여 아파트에서 유용하게 사용할 수 있습니다.

또한 모든 건물 주민이 공유하는 수영장, 테니스 코트와 같은 장소가 있습니다. 따라서 이것들은 SharedModule 내부의 컴포넌트로 간주 될 수 있습니다.

기본적으로 차이점은 다음과 같습니다.

내 슬라이드를 따라 Angular 응용 프로그램 의 빌딩 블록 을 이해하십시오.

여기 내 세션이 있습니다 Building Blocks of Angular for beginners

— 사지 타란
소스

71

가장 간단한 설명 :

모듈 은 컴포넌트, 서비스, 파이프라는 하나 이상의 작은 컨테이너를 포함하는 큰 컨테이너와 같습니다.

구성 요소가 포함되어 있습니다 :

HTML 템플릿 또는 HTML 코드
코드 (TypeScript)
서비스 : 코드를 다시 작성할 필요가 없도록 구성 요소가 공유하는 재사용 가능한 코드입니다.
파이프 : 데이터를 입력으로 받아서 원하는 출력으로 변환

.

— wins999
소스

2

이 모든 것에 미치 진 않습니다. 예, 구성 요소는 서비스를 사용하지만 서비스는 모듈의 공급자 배열에 표시되어야합니다. 당신의 다이어그램은 이것을 보여주지 않습니다.

— Scott

구성 요소 내부에 하위 모듈을 추가하고 해당 모듈에 여러 구성 요소를 추가 할 수 있습니까?

— Satrughna

39

각도 구성 요소

컴포넌트 는 Angular 앱의 기본 빌딩 블록 중 하나입니다. 앱에는 둘 이상의 구성 요소가있을 수 있습니다. 일반적인 앱에서 구성 요소에는 HTML보기 페이지 클래스 파일, HTML 페이지의 동작을 제어하는 클래스 파일 및 CSS / scss 파일이 포함되어 HTML보기의 스타일을 지정합니다. 모듈의 @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 { }

— 수닐 가그
소스

14

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

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

— 자야 니 수 무니
소스

10

그림은 천 단어의 가치가 있습니다!

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

이 개념은 코드를보다 잘 구성하고 재사용 및 공유를 용이하게합니다.

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

Angular 모듈과 관련하여 다음과 같은 메커니즘이 있습니다.

1- 그룹 구성 요소 (서비스, 지시문, 파이프 등도 포함)

2- 그들의 의존성을 정의

3- 가시성을 정의하십시오.

Angular 모듈은 단순히 클래스 (일반적으로 비어 있음)와 NgModule 데코레이터로 정의됩니다.

— 프랑수아
소스

5

구성 요소는 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독립적 인 기능을 수행 할 수있는 모듈 . 예를 들어, 앱에는 대시 보드와 같이 앱의 특정 기능에 대한 구성 요소를 그룹화하기위한 기능에 대한 모듈이있을 수 있습니다.이 모듈은 다른 애플리케이션에서 간단히 잡고 사용할 수 있습니다.

— 닥크
소스