Angularのルートモジュールとフィーチャーモジュールの詳細な説明

この記事では、Angular のフィーチャー テンプレートとルート テンプレートについて説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular cli がインストールされていることを前提としています。以降のファイル作成のほとんどは cli に依存します#提供されるディレクティブ

<span style="font-size: 20px;">Angular</span>属性テンプレートとルート テンプレート (<span style="font-size: 20px;">AppModule</span> ##) #)

違いは、機能テンプレートがアプリケーションを分割できることです。私の個人的な理解は、コンポーネント化と似ています。

1. 機能テンプレート作成されたコマンド

ng g modulearticle、ここでは ng g modulearticle --routing で、article-routing.module.ts ルーティング ファイル # を生成できます。 ##2. この時点で、

CLI

は、app フォルダーの下に別のフォルダー article、article ファイルを作成します。 article.module.ts と article-routing.module.ts3 の 2 つのファイルが含まれています。

ng g コンポーネント

を使用して For two を生成しますコンポーネントの場合、指定されたテンプレートは article です。指定されたテンプレートは自動的に article.modules.ts にインポートされ、declarations 配列に登録されます ( 注) : declarations に登録されているコンポーネントを削除しないでください。削除しないと、コンポーネント内の一部の仕様が使用できなくなります。

ng g コンポーネントの説明

• ng g コンポーネントarticle/article-list -m=article
• 、article フォルダ ## の下に article-list フォルダ コンポーネント## を生成します。 ng gコンポーネントarticle/article-create -m=article
、
• article

  フォルダ#の下にarticle-createフォルダcomponentを生成します。 4、

  article.module.ts
CLI によって生成された機能モジュールでは、ファイルの先頭に 2 つの JavaScript インポート ステートメントがあります。最初のインポートは

NgModule

であり、これは次と同じです。ルート モジュールでは、@NgModule デコレータを使用できます。2 番目のモジュールでは、ngIf や ngFor ## などの多くの関数を提供する CommonModule をインポートします。 # このような一般的な指示。機能モジュールは BrowserModule ではなく CommonModule をインポートします。これはルート モジュールに 1 回だけインポートする必要があります。 CommonModule には、ほとんどのテンプレートで使用される ngIf や ngFor などの一般的に使用されるディレクティブに関する情報のみが含まれますが、BrowserModule アプリケーション構成ブラウザ用に作成されたものは 1 回のみ使用されます。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ArticleRoutingModule } from './article-routing.module';
import { ArticleListComponent } from './article-list/article-list.component';
import { ArticleCreateComponent } from './article-create/article-create.component';


@NgModule({
  declarations: [ArticleListComponent, ArticleCreateComponent],
  imports: [
    CommonModule,
    ArticleRoutingModule
  ]
})
export class ArticleModule { }

ログイン後にコピー

関連する推奨事項: "angular チュートリアル "

5、

article-routing.module.ts、ルーティング アドレスのネストされた構成、ここにアドレスこの設定は、現在のモジュールのルーティング プレフィックスが app-routing.module

ルート ルーティング モジュールの

article に設定されているため、次のルートは直接設定することしかできません。ルートルートによって設定されたルーティングプレフィックス。 たとえば、ルート ルートは article に設定され、ここでの設定は

list

であり、アクセス アドレスは
• article/ である必要があります。 list

  import { NgModule } from '@angular/core'
  import { Routes, RouterModule } from '@angular/router'
  
  import { ArticleListComponent } from './article-list/article-list.component'
  import { ArticleCreateComponent } from './article-create/article-create.component'
  const routes: Routes = [
      {
          path: '',
          children: [
              {
                  path: '',
                  pathMatch:'full',
                  redirectTo: '/article/list'
              },
              {
                  path: 'list',
                  component: ArticleListComponent
              },
              {
                  path: 'create',
                  component: ArticleCreateComponent
              }
          ]
      }
  ]
  @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
  })
  export class ArticleRoutingModule {}

  ログイン後にコピー
  6. ルート モジュール app.mudles.ts、
app-routing.module

ファイルをインポートしてグローバルを設定しますrouting

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'

import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ログイン後にコピー

7. ルート モジュールのルーティングapp-routing.module.ts loadChildren

は遅延読み込み機能モジュールを使用します。デフォルトでは、

NgModule は「緊急にロードされます」です。つまり、アプリケーションがロードされるとすぐにロードされます。これは、すぐに必要かどうかに関係なく、すべてのモジュールに当てはまります。多くのルートを持つ大規模なアプリケーションの場合は、オンデマンドで NgModule をロードするパターンである遅延ロードの使用を検討してください。遅延ロードにより、初期バンドル サイズが削減されるため、ロード時間が短縮されます。

import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'
import { LoginComponent } from './login/login.component'
const routes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: 'article',
        loadChildren: () => import('./article/article.module').then((m) => m.ArticleModule)
    }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

ログイン後にコピー

8. 最後に、article の下にある list

および

create ルートにアクセスする場合は、アドレス article/ を入力します。ブラウザ内のリスト #article/list

• ##または

  article /create

  

• プログラミング関連の知識については、

  プログラミング ビデオ

  をご覧ください。 ！

以上がAngularのルートモジュールとフィーチャーモジュールの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。