web-dev-qa-db-ja.com

Angularコンポーネントとモジュールの違いは何ですか

私はビデオを見たり記事を読んだりしていますが、この 特定の記事 は記事の冒頭で私をとても混乱させます

Angularのアプリケーションはモジュラー構造に従います。 Angularアプリには多数のモジュールが含まれており、それぞれが単一の目的専用です。通常moduleはあなたのAngularアプリを実行するために他のモジュールと統合されたまとまりのあるコードのグループです。

モジュールはそのコードからいくつかのクラス、関数および値をエクスポートします。 ComponentはAngularの基本ブロックであり、複数のコンポーネントがアプリケーションを構成します。

モジュールは他のモジュールのライブラリになることができます。たとえば、Angularプライマリライブラリモジュールであるangular2/coreライブラリは、他のコンポーネントによってインポートされます。

それらは交換可能な用語ですか？コンポーネントはモジュールですか？しかし逆ではない？

angularmodulecomponents
118
Luis Pena

コンポーネントはビュー（html）を制御します。他のコンポーネントやサービスとも通信して、アプリに機能をもたらします。

モジュールは1つ以上のコンポーネントで構成されています。それらはHTMLを制御しません。あなたのモジュールは、他のモジュールに属するコンポーネントがどのコンポーネントを使用できるか、どのクラスが依存性インジェクタによって注入されるか、そしてどのコンポーネントがブートストラップされるかを宣言します。モジュールを使用すると、コンポーネントを管理してアプリにモジュール性を持たせることができます。

170
Sefa

さて、答えを投稿するのは遅すぎますが、easyの初心者を理解するのはAngularになると思います。プレゼンテーション中に私があげる例の一つ。

angularアプリケーションをBuildingとして考えてください。建物にはNの数のApartmentsを含めることができます。 Apartmentは、Moduleと見なされます。アパートメントには、Nの数のroomsを含めることができます。これはComponentsという名前のAngularアプリケーションのビルディングブロックに対応します。

現在、各Apartment (Module)にはRooms (Components)があり、Lifts (Services)はアパート内外でより大きな移動を可能にし、Wires (Pipes)は情報を移動します周りでそれをアパートで便利にします。

swimming pool, tennis courtのような場所もあり、すべての建物の居住者が共有しています。したがって、これらはSharedModule内のコンポーネントと見なすことができます。

基本的に、違いは次のとおりです。

enter image description here

スライドに従って、 Angularアプリケーションの構成要素 を理解してください。

104
Sajeetharan - MSFT

角成分

コンポーネント は、Angularアプリの基本的な構成要素の1つです。アプリは複数のコンポーネントを持つことができます。通常のアプリケーションでは、コンポーネントには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 { }
36
Sunil Garg

enter image description here

最も簡単な説明：

モジュールは、Component、Service、Pipeという1つまたは複数の小さなコンテナを含む大きなコンテナのようなものです。

コンポーネントには、次のものが含まれます。

  • HTMLテンプレートまたはHTMLコード

  • コード（TypeScript）

  • サービス：コンポーネントによって共有される再利用可能なコードであるため、コードの書き換えは不要です。

  • Pipe：データを入力として受け取り、それを目的の出力に変換します

。

34
wins999

Angular 2のモジュールは、コンポーネント、ディレクティブ、サービスなどから作成されたものです。1つまたは複数のモジュールを組み合わせてアプリケーションを作成します。モジュールはアプリケーションを論理的なコードに分割します。各モジュールは単一のタスクを実行します。

Angular 2のコンポーネントは、表示したいページのロジックを記述するクラスです。コンポーネントはビュー（html）を制御します。コンポーネントは他のコンポーネントやサービスと通信します。

10
Jayani Sumudini

コンポーネントは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を使用すると、その後独立して実行できる機能の塊を持つことができます。たとえば、ダッシュボードなど、アプリの特定の機能のコンポーネントをグループ化するための機能モジュールを持つことができます。ダッシュボードは、他のアプリケーション内で簡単に取得して使用できます。

3
Daksh