web-dev-qa-db-ja.com

app.module.tsファイルの役割は何ですか?その中で何をすべきですか?

Angular 2に慣れてきましたが、app.module.tsファイルに関していくつか質問があります。

  • app.components.tsファイルで再度入力を行うので、なぜこのファイルでインポートを行わなければならないのですか?.

例:カスタムパイプをインポートしてから、もう一度app.components.tsファイルにインポートする必要があります

import { FirstPipePipe } from './first-pipe.pipe';

@NgModule({
     declarations: [
       AppComponent,
       SecondComponent,
       ThirdComponent,
       FirstComponent,
       FirstPipePipe
     ],
     imports: [
       BrowserModule, RouterModule.forRoot(appRoutes), HttpModule
     ],
     providers: [FetchDataService],
     bootstrap: [AppComponent]    })

それから私は

imports: [
           BrowserModule, RouterModule.forRoot(appRoutes), HttpModule
         ],

一部のクラスをインポートし、他のクラスをインポートしないのはなぜですか?

なぜプロバイダーがここにあるのか、繰り返しますが、app.component.tsに表示されます

providers: [FetchDataService]

基本的に、私はapp.component.tsファイルのすべてを書き直さなければなりません。

app.module.tsの目的は何ですか

12
masterach

モジュールは、コードを整理および分離する方法です。複数のモジュールを使用して、一部のモジュールを遅延ロードすることができます。

他のモジュールはimportsセクションにインポートします。

declarationsでコンポーネントを宣言します。そのモジュールのルーティングで使用されるすべてのコンポーネントは、そのモジュールで宣言する必要があります。コンポーネントが別のモジュールで使用されている場合は、それらをその別のモジュールにのみリストします。

また、providersセクションでサービスを提供します。

モジュールは、依存性注入の制御にも役立ちます...コンポーネントレベルまたはモジュールレベルでサービスをprovideできます。モジュールレベルでサービスを提供すると、モジュール全体で共有するサービスのインスタンスが作成されます。コンポーネントレベルでサービスを提供する場合、それはそのコンポーネントの一意のインスタンスです。混乱を避けるために、1つのレベルでのみサービスを提供することをお勧めします-モジュールレベルまたはコンポーネントレベル(必要な各コンポーネントで)。ほとんどの場合、私自身にとっては、モジュールレベルでのみサービスを提供することが最も簡単です。 pipesなどでも同じですが、作成するコンポーネント/パイプはdeclarationsで宣言する必要があります。

10
Tyler Jennings

app.module.tsの目的は何ですか?

  • それはあなたのアプリケーションを起動し、あなたの他のモジュールへのリンクを設定することです。

1-モジュールは、アプリケーションのロジックレイヤーです。各モジュールは、物事を論理的にパッケージ化するために存在します。これにより、複数のモジュールで構成されたアプリケーションを人々が簡単に理解して保守できるようになります。たとえば、リッチアプリケーションを実行している場合は、LoginModuleAuthenticationModuleなど...

2-Angularが何を使用するかがわかるように、モジュールにインポートする必要があります。基本的には、あなたのLoginModuleはAngularFormModuleAuthenticationModuleには必要ない場合があります

3-これは私たちをここに導きます:AppModuleしたがって、それがリンクされている他のモジュール、およびglobally必要なサービスを提供します。将来のLoginModuleにはサービスを提供する必要はありませんが、AuthenticationModuleAuthenticationServiceが含まれる可能性が高いです。

これらは基本的な概念です。このテーマに関する多くの知識を提供する公式ドキュメントを読んでみてください: https://angular.io/guide/ngmodule

3
Alex Beugnet

AppModuleとはAppModuleは、angularアプリケーションをブートストラップして起動するルートモジュールです。任意の名前を付けることができますが、慣例により、 AppModuleという名前です。

2つのシステムモジュールをインポートします-BrowserModuleおよびNgModule

BrowserModule-ブラウザで実行されるすべてのアプリケーションには、このモジュールが必要です。 NgIfおよびNgForディレクティブもこのモジュールで提供されます。

NgModule-@componentデコレータはメタデータをangularコンポーネントクラスに追加します。同様に@NgModuleデコレータは、メタデータをangularモジュールクラスに追加します。

0
vivek nuna