From 89d4c017790ead4a018b88259d0e5a509750a28d Mon Sep 17 00:00:00 2001 From: shioyang Date: Fri, 24 Nov 2017 11:39:35 +0900 Subject: [PATCH 1/2] Translate toh-pt5 --- aio-ja/content/tutorial/toh-pt5.md | 430 ++++++++++++++--------------- 1 file changed, 209 insertions(+), 221 deletions(-) diff --git a/aio-ja/content/tutorial/toh-pt5.md b/aio-ja/content/tutorial/toh-pt5.md index 9a915f9b24..08021b1261 100644 --- a/aio-ja/content/tutorial/toh-pt5.md +++ b/aio-ja/content/tutorial/toh-pt5.md @@ -1,13 +1,13 @@ -# Routing +# ルーティング -There are new requirements for the Tour of Heroes app: +Tour of Heroes アプリケーションには新しい要求があります： -* Add a *Dashboard* view. -* Add the ability to navigate between the *Heroes* and *Dashboard* views. -* When users click a hero name in either view, navigate to a detail view of the selected hero. -* When users click a *deep link* in an email, open the detail view for a particular hero. +* *ダッシュボード*ビューを追加する。 +* *ヒーローズ*ビューと*ダッシュボード*ビューの間で行き来できる機能を追加する。 +* ユーザーが各ビューでヒーロー名をクリックしたとき、選択されたヒーローの詳細ビューを表示する。 +* ユーザーがEメール上で*ディープリンク*をクリックしたとき、特定のヒーローの詳細ビューを開く。 -When you’re done, users will be able to navigate the app like this: +これらの変更が完了したら、ユーザは図のようにアプリケーションを行き来できるようになるでしょう：
@@ -15,14 +15,13 @@ When you’re done, users will be able to navigate the app like this:
-## Add the _AppRoutingModule_ +## _AppRoutingModule_ を追加する -An Angular best practice is to load and configure the router in a separate, top-level module -that is dedicated to routing and imported by the root `AppModule`. +Angularのベストプラクティスは、ルーティングのみを行いルートの`AppModule`からインポートされる独立したトップレベルのモジュールにて、ルーターをロードし管理することです。 -By convention, the module class name is `AppRoutingModule` and it belongs in the `app-routing.module.ts` in the `src/app` folder. +慣例では、そのモジュールのクラス名は`AppRoutingModule`とし、`src/app`フォルダの`app-routing.module.ts`に書きます。 -Use the CLI to generate it. +CLIを使って生成することができます。 ng generate module app-routing --flat --module=app @@ -30,122 +29,118 @@ Use the CLI to generate it.
-`--flat` puts the file in `src/app` instead of its own folder.
-`--module=app` tells the CLI to register it in the `imports` array of the `AppModule`. +`--flat`は、コマンドが実行されたフォルダの代わりに、`src/app`に生成したファイルを置きます。
+`--module=app`は、`AppModule`の`imports`配列に、生成したモジュールを登録するようCLIに指示します。
-The generated file looks like this: +生成されたファイルはこのようになります： -You generally don't declare components in a routing module so you can delete the -`@NgModule.declarations` array and delete `CommonModule` references too. +通常、ルーティング・モジュールでコンポーネントの宣言はしないので、`@NgModule.declarations`配列と`CommonModule`への参照は削除できます。 -You'll configure the router with `Routes` in the `RouterModule` -so import those two symbols from the `@angular/router` library. +`RouterModule`の`Routes`を使ってルーターを管理するので、`@angular/router`ライブラリからこれらふたつのシンボルをインポートしておきます。 -Add an `@NgModule.exports` array with `RouterModule` in it. -Exporting `RouterModule` makes router directives available for use -in the `AppModule` components that will need them. +`@NgModule.exports`の配列の中に`RouterModule`を追加します。 +`RouterModule`をエクスポートすることで、 +ルーターのディレクティブを必要とする`AppModule`コンポーネントで利用できるようになります。 -`AppRoutingModule` looks like this now: +編集後の`AppRoutingModule`はこのようになります： -### Add routes +### ルートを追加する -*Routes* tell the router which view to display when a user clicks a link or -pastes a URL into the browser address bar. +*ルート*は、ユーザーがリンクをクリックしたとき、またはURLをブラウザのアドレスバーに貼り付けたときに、 +どのビューを表示したらよいかをルーターに伝えます。 -A typical Angular `Route` has two properties: +典型的なAngularの`Route`はふたつのプロパティを持っています： -1. `path`: a string that matches the URL in the browser address bar. -1. `component`: the component that the router should create when navigating to this route. +1. `path`：ブラウザのアドレスバーにある URL にマッチする文字列 +1. `component`：そのルートに遷移するときにルーターが作成すべきコンポーネント -You intend to navigate to the `HeroesComponent` when the URL is something like `localhost:4200/heroes`. +URLが`localhost:4200/heroes`のようであったときに`HeroesComponent`へ遷移させようとしている、とします。 -Import the `HeroesComponent` so you can reference it in a `Route`. -Then define an array of routes with a single `route` to that component. +`Route`で`HeroesComponent`を参照できるようにインポートします。 +そして、そのコンポーネントへのひとつの`route`としてルートの配列を定義します。 -Once you've finished setting up, the router will match that URL to `path: 'heroes'` -and display the `HeroesComponent`, . +一度このセットアップが完了すると、ルーターはURLを`path: 'heroes'`にマッチして`HeroesComponent`を表示するようになります。 ### _RouterModule.forRoot()_ +まず始めにルーターの初期化が必要で、ルーターがブラウザのロケーションの変化を検知し始めます。 You first must initialize the router and start it listening for browser location changes. -Add `RouterModule` to the `@NgModule.imports` array and -configure it with the `routes` in one step by calling -`RouterModule.forRoot()` _within_ the `imports` array, like this: +次のように、`@NgModule.imports`配列に`RouterModule`を追加して、 +`imports`配列の_中で_`RouterModule.forRoot()`を呼び出すことで`routes`を使ってそれを設定します：
- - The method is called `forRoot()` because you configure the router at the application's root level. - The `forRoot()` method supplies the service providers and directives needed for routing, - and performs the initial navigation based on the current browser URL. + アプリケーションのルートのレベルでルーターを設定しているので、このメソッドは`forRoot()`と呼ばれています。 + この`forRoot()`メソッドは、ルーティングに必要なサービス・プロバイダーとディレクティブを提供し、 + ブラウザの現在のURLを元に最初の遷移を行います。
-## Add _RouterOutlet_ +## _RouterOutlet_ を追加する -Open the `AppComponent` template replace the `` element with a `` element. +`AppComponent`テンプレートを開き、``要素を``で置き換えます。 -You removed `` because you will only display the `HeroesComponent` when the user navigates to it. +ユーザーが`HeroesComponent`に来たときに`HeroesComponent`だけを表示したいので、 +``を削除します。 -The `` tells the router where to display routed views. +この``はルーターに辿ってきたビューをどこに表示するかを教えます。
-The `RouterOutlet` is one of the router directives that became available to the `AppComponent` -because `AppModule` imports `AppRoutingModule` which exported `RouterModule`. +`RouterModule`をエクスポートした`AppRoutingModule`を`AppModule`がインポートしているので、 +この`RouterOutlet`は、この`AppComponent`で利用できるようになったルーターのディレクティブのひとつです。
-#### Try it +#### 試す -You should still be running with this CLI command. +こちらのCLIコマンドを使用して実行する必要があります。 ng serve -The browser should refresh and display the app title but not the list of heroes. +ブラウザを更新するとアプリのタイトルは表示されますがヒーローのリストは表示されないはずです。 -Look at the browser's address bar. -The URL ends in `/`. -The route path to `HeroesComponent` is `/heroes`. +ブラウザのアドレスバーを見てみましょう。 +URLが`/`で終わっています。 +`HeroesComponent`へのルーターのパスは`/heroes`です。 -Append `/heroes` to the URL in the browser address bar. -You should see the familiar heroes master/detail view. +ブラウザのアドレスバーでURLに`/heroes`を追加します。 +おなじみのヒーローのマスター／詳細ビューが見れるはずです。 {@a routerlink} -## Add a navigation link (_routerLink_) +## ナビゲーション・リンクを追加する (_routerLink_) -Users shouldn't have to paste a route URL into the address bar. -They should be able to click a link to navigate. +ユーザーはブラウザのアドレスバーにルーターのURLを貼り付ける必要はありません。 +行き来するためのリンクをクリックできるべきです。 -Add a `