1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

やること

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?