Angular で Router アプリケーションを使用する方法-jsチュートリアル-php.cn

Angular で Router アプリケーションを使用する方法

php中世界最好的语言

リリース： 2018-05-26 14:37:20

オリジナル

1357 人が閲覧しました

今回は、Angular で Router (ルーティング) アプリケーションを使用する方法と、Angular で Router (ルーティング) アプリケーションを使用する際の注意事項を説明します。以下は実際のケースです。

はじめに:

Angular APPビュー間のジャンプはRouterに依存します

例を挙げて説明します

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

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

ng g c home
ng g c about
ng g c ダッシュボード

と構成

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

Angular Router を使用する場合は、次のように Router

Module を導入する必要があります:

// 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

この routerConfigue ファイルの呼び出し方法? 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 が正常にコンパイルされたら、 , in ブラウザーのアドレスバーに「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'
   },

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS を使用して HTML タグを動的に追加する方法

React Router v4 を最初から使用する

以上がAngular で Router アプリケーションを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。