Aurelia 学ぶ ６

Aurelia（アウレリア）の勉強をしています。
http://aurelia.io/

チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1

前回のつづき


ローディング時の表示

nprogressを使うので、インストール。
$ npm install nprogress --save

aurelia.jsonファイルを開く。
vendor-bundle.jsの部分に記述する
   
"dependencies": [
  ...
  {
    "name": "nprogress",
    "path": "../node_modules/nprogress",
    "main": "nprogress",
    "resources": [
      "nprogress.css"
    ]
  }
  ...
]

これで、利用の準備は完了。

src/resources/elements　フォルダに、 loading-indicator.jsを作成

import * as nprogress from 'nprogress';
import {bindable, noView, decorators} from 'aurelia-framework';

export let LoadingIndicator = decorators(
  noView(['nprogress/nprogress.css']),
  bindable({name: 'loading', defaultValue: false})
).on(class {
  loadingChanged(newValue){
    if (newValue) {
      nprogress.start();
    } else {
      nprogress.done();
    }
  }
});

resources/index.jsファイル

export function configure(config) {
  config.globalResources(['./elements/loading-indicator']);
}

app.jsの修正
web-apiを、ここで扱えるようにする。

import {WebAPI} from './web-api';

export class App {
  static inject() { return [WebAPI]; }

  constructor(api) {
    this.api = api;
  }

  configureRouter(config, router){
    config.title = 'Contacts';
    config.map([
      { route: '',              moduleId: 'no-selection',   title: 'Select'},
      { route: 'contacts/:id',  moduleId: 'contact-detail', name:'contacts' }
    ]);

    this.router = router;
  }
}

app.htmlを修正
indicatorを表示する。
   
<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="./styles.css"></require>
  <require from="./contact-list"></require>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-user"></i>
        <span>Contacts</span>
      </a>
    </div>
  </nav>

  <loading-indicator loading.bind="router.isNavigating || api.isRequesting"></loading-indicator>

  <div class="container">
    <div class="row">
      <contact-list class="col-md-4"></contact-list>
      <router-view class="col-md-8"></router-view>
    </div>
  </div>
</template>

これで、詳細をロードするときに、ローディングの表示が出る。
これで、一区切り。