やること

各コンポーネントへヘッダー・フッターナビゲーションから遷移できるようにする
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で実装する