RailsチュートリアルCh5 をAurelia2 で作り直す（ルーティング設定）

やること

• 各コンポーネントへヘッダー・フッターナビゲーションから遷移できるようにする
• Bootstrapをアプリケーションに追加する

ToDo

• アプリケーションにルーティング設定を追加する
• ヘッダーナビゲーションにルートを指定する
• フッターナビゲーションにルートを指定する
• ルーティングしたコンテンツのレンダリングをする
• デフォルトでレンダリングするコンポーネントを指定する
• Bootstrapをアプリケーションに追加する

アプリケーションにルーティング設定を追加する

main.ts ファイルにRouterConfigurationを追加する。

import Aurelia from 'aurelia';
import { MyApp } from './my-app';
// RouterConfiguration を追加する
import { RouterConfiguration } from 'aurelia';

Aurelia
  // ルーティング設定をアプリケーションに追加する
  .register(RouterConfiguration)
  .app(MyApp)
  .start();

ヘッダーナビゲーションにルートを指定する

aタグ内にgoto="コンポーネント名"を追加することでルートを指定する。

<!---一部省略-->
<nav>
  <ul class="nav navbar-nav navbar-right">
       <li class="nav-item"><a goto="home-page">Home</a></li>
       <li class="nav-item"><a goto="help-page">Help</a></li>
       <li class="nav-item"><a goto="login-page">Log in</a></li>
   </ul>
 </nav>

フッターナビゲーションにルートを指定する

上記のヘッダーと同様にaタグ内にルートを指定する。

ルーティングしたコンテンツをレンダリングする

my-app.html にルーティングしたコンテンツのレンダリングをするためにタグを追加する

<import from="./shared/header/header-component"></import>
<import from="./pages/home/home-page"></import>
<import from="./pages/about/about-page"></import>
<import from="./pages/content/content-page"></import>
<import from="./pages/help/help-page"></import>
<import from="./pages/login/login-page"></import>
<import from="./pages/news/news-page"></import>
<import from="./shared/footer/footer-component"></import>

<header-component></header-component>
<div class="container>
    <au-viewport></au-viewport>
    <footer-component></footer-component>
</div>

デフォルトのコンポーネントを指定する

この時点で、アプリケーションをnpm startで起動してみるとルートパスにアクセスした際に、ヘッダーとフッター以外のコンテンツがレンダリングされない。期待する動作はルートパスにアクセスした際にもhome-pageのコンテンツがレンダリングされることなので、デフォルトのコンテンツとしてhome-pageを指定する。
先ほど追加したにデフォルトのコンテンツをしていする。

<!--一部省略-->
<div class="container">
   <au-viewport default="home-page"></au-viewport>
   <footer-component></footer-component>
</div>

Bootstrapをアプリケーションに追加する

Bootstarap をnpm installで追加した上で、my-app.tsにインポートすることで適応する。

import 'bootstrap/dist/css/bootstrap.css';

export class MyApp {
}

次にやること

RailsチュートリアルCh6をAurelia2で実装する