web-dev-qa-db-ja.com

@NgModuleの実際の角度は何ですか？

angular 2は初めてです。

実際には何ですか@NgModule in angular 2？私は、公式の文書を介して、角度を付けて参照しました。しかし、明確さはありませんでした。

誰か助けてもらえますか？

angularng-modules
9
manohar

まず、もう一度 https://angular.io/docs/ts/latest/guide/ngmodule.html を読み、間違いなく https://angular.io/docs/ ts/latest/cookbook/ngmodule-faq.html も同様です。

@NgModuleはすべての魔法の設定を行います。依存関係の注入を設定し、使用するサードパーティのモジュールをプルし、すべてのコンポーネント/ディレクティブ/パイプ/などを宣言します。モジュール内で使用され、それらのコンポーネントなどを他のモジュールに公開し、モジュールのルーティングを設定し、ルートコンポーネントとして使用できる「ブースト」コンポーネントを設定します。

モジュールには2つのタイプがあります。まず、アプリのエントリポイントである 'Root module'があります。技術的には、アプリ内のすべてを1つのモジュールにまとめることができます。

次に、「機能モジュール」があります。これらは、開発中の問題の分離に使用されるだけでなく、アプリの一部の遅延読み込みなどにも使用されます。これは、より大きなアプリの場合はさらに問題になりますが、早期に実行すると、「正しく」設定するのに役立ちます。

1
Fiddles

Angular NgModulesはJavaScript（ES2015）モジュールとは異なり、補完します。 NgModuleは、アプリケーションドメイン、ワークフロー、または密接に関連する一連の機能専用の一連のコンポーネントのコンパイルコンテキストを宣言します。 NgModuleは、コンポーネントをサービスなどの関連コードに関連付けて、機能単位を形成できます。

NgModuleは、@ NgModule（）で装飾されたクラスによって定義されます。 @NgModule（）デコレータは、モジュールを説明するプロパティを持つ単一のメタデータオブジェクトを受け取る関数です。最も重要なプロパティは次のとおりです。

宣言：このNgModuleに属するコンポーネント、ディレクティブ、およびパイプ。

エクスポート：他のNgModuleのコンポーネントテンプレートで表示および使用できる宣言のサブセット。

imports：このNgModuleで宣言されたコンポーネントテンプレートがエクスポートしたクラスを必要とする他のモジュール。

プロバイダー：このNgModuleがサービスのグローバルコレクションに貢献するサービスの作成者。アプリのすべての部分でアクセス可能になります。 （コンポーネントレベルでプロバイダーを指定することもできます。

ブートストラップ：ルートコンポーネントと呼ばれる他のすべてのアプリビューをホストするメインアプリケーションビュー。ルートNgModuleだけがbootstrapプロパティを設定する必要があります。

1
Nayas Subramanian

@ NgModuleは、RC5に追加された新しいデコレーターであり、Angularのコアと開発者の両方のエルゴノミクスに役立つ多数の機能を提供します。

NgModuleの基本的な使用法は次のようになります。

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ MyComponent ],
  bootstrap: [ MyComponent ]
})
class MyAppModule {}

このデコレータは、Angularアプリケーションに2つの重要なことを伝えます。

宣言通知angular MyComponentはMyAppModuleに属している

bootstrapアドバイスangular起動時にこのモジュールを作成するときに、自動的にbootstrap MyComponent DOM。

1
Sanket

docs から

NgModuleは、@ NgModuleデコレータによってマークされたクラスです。 @ NgModuleは、コンポーネントのテンプレートをコンパイルする方法と実行時にインジェクターを作成する方法を記述するメタデータオブジェクトを取ります。これは、モジュールの独自のコンポーネント、ディレクティブ、およびパイプを識別し、exportsプロパティを介してそれらの一部を公開して、外部コンポーネントがそれらを使用できるようにします。 @ NgModuleは、アプリケーション依存関係インジェクターにサービスプロバイダーを追加することもできます。

NgModuleメタデータは次のことを行います。

  • モジュールに属するコンポーネント、ディレクティブ、およびパイプを宣言します。
  • これらのコンポーネント、ディレクティブ、およびパイプの一部をパブリックにして、他のモジュールのコンポーネントテンプレートがそれらを使用できるようにします。
  • 現在のモジュールのコンポーネントに必要なコンポーネント、ディレクティブ、パイプを含む他のモジュールをインポートします。
  • 他のアプリケーションコンポーネントが使用できるサービスを提供します。
0
Abdullah Khan

アプリケーションがますます複雑になるにつれて、すべてのアプリケーションをmodulesに分割する必要があることが明らかになりました。各モジュールはそれ自体が小さなミニアプリケーションですが、これらのすべてのミニアプリケーションをバンドルして、より大きなアプリケーションを作成できます。

enter image description here

モジュールの作成に対するAngularの答えは@NgModuleです。これは、モジュールを作成するためのタグです。 angular=のモジュールは、componentsまたはother module's componentsと、これから説明しない他の要素で構成されています。

したがって、アプリケーションにウィッシュリストとカートの2つの大きなセクションがあるとします。それぞれのモジュールを作成できます-WishlistModuleおよびCartModule。 WishlistModuleには、アイテムの表示、アイテムのドラッグアンドドロップなど、いくつかのコンポーネント（@NgComponentとして装飾）があります。CartModuleについても同様です。

モジュールを作成するには、以下のように@NgModuleを使用する必要があります。

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

import { WishlistMainComponent }   from './wishlistMain.component';
import { WishlistShowComponent }   from './wishlistShow.component';
import { WishlistDragComponent }   from './wishlistDrag.component';
import { HeaderModule }   from './header.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    HeaderModule
  ],
  declarations: [
    WishlistMainComponent, WishlistShowComponent, WishlistDragComponent
  ],
  bootstrap: [ WishlistMainComponent ]
})
export class WishlistModule { }

他の答えがすでに指摘しているように、@NgModuleは裏で多くのことを行いますが、簡単に言えば、モジュールを宣言します。 Javaクラスのようなもので、bootstrapオプションで渡すものはすべてmain（）メソッドのようなものです。

モジュール（または@NgModule）自体は、componentsの束を含むブリーフケースにすぎません。実際、コンポーネントは、実際にアプリケーションを構成するものです。コンポーネントはタグを定義します。 <wishlist></wishlist> where angularは、すべてのウィッシュリストコードを配置します。モジュールがコンポーネントのすぐ下にあり、外部コンポーネントを使用する場合は、インポートすることによってのみ実行できます。 Javaクラスとメソッドのように、そのモジュール。

0
Rash