Angular 5.x スタディ ノート ルーター アプリケーション

この記事は、編集者が非常に良いと思った Angular 5.x の Router アプリケーションを主に紹介し、参考にさせていただきます。エディターをフォローして一緒に見てみましょう

はじめに:

Angular APP ビュー間のジャンプは Router (ルーティング) に依存します この章では、Router のアプリケーションについて説明します

例を挙げて説明します

実行結果は以下の通りです。 ホーム、バージョン情報、ダッシュボードの 3 つのナビゲーション バーが設定されています。 別のナビゲーション バーをクリックして、対応するページに移動します:

3 つのコンポーネントを作成します

1. ng g c home

2. ng g c about

3. ng c ダッシュボード

ルーティングと構成

(1) **Angular Router の導入 **

Angular Router を使用する場合は、次のように RouterModule を導入する必要があります:

// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
 BrowserModule, RouterModule
],

(2) ルーティング設定

誰がそれをしたか覚えていますか?コンポーネントを管理します。はい、モジュールによって管理されます。 そのため、新しく作成したコンポーネントをapp.moudleに導入します。 以下の通り:

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

import { appRoutes } from './routerConfig';

import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

ヒント: 管理を容易にするために、新しく作成したコンポーネントをコンポーネントフォルダーに移動しました。

Router Configure ファイルを作成する

アプリディレクトリに、routerConfig.ts ファイルを作成します。 コードは次のとおりです:

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

export const appRoutes: Routes = [
 { path: 'home', 
 component: HomeComponent 
 },
 {
 path: 'about',
 component: AboutComponent
 },
 { path: 'dashboard',
 component: DashboardComponent
 }
];

説明: Angular 2.X 以降では、JavaScript の代わりに TypeScript を使用してコードを作成するため、ファイルのサフィックスは js ではなく ts になります

これを呼び出す方法routerConfigure ファイル 毛織物？ app.moudle.ts は Angular アプリ全体への入り口であるため、app.module.ts にロードする必要があります。

// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

ルーターアウトレットの宣言

app.component.html ファイルに次のコードを追加します:

<p style="text-align:center">
 <h1>
  {{title}}!!
 </h1>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="dashboard">Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 </p>

Run

プロジェクトが配置されているパスを入力して実行します。

ng serve --open

webpack が正常にコンパイルされたら、ブラウザのアドレス バーに http://localhost:4200

と入力して、この記事の冒頭にある結果を確認してください。

ルーターについて、別の書き方:

app.moudle.ts ファイルのコードは次のとおりです:

 imports: [
  BrowserModule,
  RouterModule.forRoot(
  [
   { path: 'home', 
   component: HomeComponent 
   },
   {
   path: 'about',
   component: AboutComponent
   },
   {
   path: 'dashboard',
   component: DashboardComponent
   }
  ]
  )
 ],

この方法では、別個のルーターを作成する必要はありません。 routerConfigure.ts ファイル。

概要

コンポーネント指向(コンポーネント)の導入により、ルーティング管理がAngularJS(1.X)よりもはるかに便利になりました。

さらなる最適化:

おそらく、http://localhost:4200 にアクセスするとき、そのパスは「/」である必要があり、このデフォルトのパスを設定する必要があることに気づいたと思います。

{
   path: '',
   redirectTo:'/home',
   pathMatch: 'full'
   },

以上、皆様の参考になれば幸いです。

関連記事:

AJAXをゼロから学ぶためのAJAXフレームワーク

AJAXをゼロから学び、自動検証されるフォームを作成する

Ajax getリクエストキャッシュ処理ソリューション

以上がAngular 5.x スタディ ノート ルーター アプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。