Angular のルート テンプレートと属性テンプレートの詳細な説明

この記事では、Angular10 のルート テンプレートと機能テンプレートを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular cli がインストールされていることを前提としています。以降のファイル作成のほとんどは に依存しますcli によって提供される手順

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

1. 機能テンプレートの作成手順 ng g モジュール記事

、ここで使用されているのは

ですng g modulearticle --routing は、article-routing.module.ts ルーティング ファイルを生成できます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]2. この時点で、CLI

は

app フォルダー # の下に別のフォルダーを作成します。 ##article、article フォルダーには、2 つのファイル article.module.ts と article-routing.module.ts 3 が含まれていますng gComponent を使用して 2 つのコンポーネントを生成し、テンプレートを

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-createFolderComponent4, article.module.ts CLI によって生成された機能モジュールには、上部に 2 つの JavaScript インポートがあります。ファイルのステートメント: 最初のものは
NgModule

をインポートし、ルート モジュールと同じように

@NgModule デコレータを使用できるようにします。2 つ目は CommonModule をインポートします。 ngIf や ngFor などの一般的なディレクティブが多数提供されています。機能モジュールは 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 { }

5、article-routing.module.ts、ルーティング アドレスのネストされた構成

、ここでのアドレス設定は、

app-routing.module # にあるためです。 ##articleには現在のモジュールのルーティングプレフィックスがルートルーティングモジュールに設定されているので、以下のルートは直接設定するだけで済みますので、アクセスする際にはルートルーティングで設定したルーティングプレフィックスを持ってきてください。 たとえば、ルート ルートは article に設定され、ここでの設定は list

であり、アクセス アドレスは

article/ である必要があります。 list
• <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { NgModule } from &amp;#39;@angular/core&amp;#39; import { Routes, RouterModule } from &amp;#39;@angular/router&amp;#39; import { ArticleListComponent } from &amp;#39;./article-list/article-list.component&amp;#39; import { ArticleCreateComponent } from &amp;#39;./article-create/article-create.component&amp;#39; const routes: Routes = [ { path: &amp;#39;&amp;#39;, children: [ { path: &amp;#39;&amp;#39;, pathMatch:&amp;#39;full&amp;#39;, redirectTo: &amp;#39;/article/list&amp;#39; }, { path: &amp;#39;list&amp;#39;, component: ArticleListComponent }, { path: &amp;#39;create&amp;#39;, component: ArticleCreateComponent } ] } ] @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ArticleRoutingModule {}</pre><div class="contentsignin">ログイン後にコピー</div></div>6. ルート モジュール
app.mudles.ts
• 、app-routing.module# をインポートします## ファイル (構成可能) グローバル ルーティング

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 は 遅延読み込み機能を使用しますmodule

デフォルト この場合、

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 サイトの他の関連記事を参照してください。