Aurelia（アウレリア）の勉強を始めました。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
前回のつづき
ファイルをダウンロードする。
web-api.js
utility.js
style.css
これらを、プロジェクトのsrcフォルダにコピーする。
app.jsを修正。
export class App {
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;
}
}
ルーティングの設定
ルーティングは、アクセスするURLと、呼び出されるリソースや処理を関連づけること。
route: '', moduleId: 'no-selection'の部分は、ルートが、no-selectionに関連付けられる。
app.html
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./styles.css"></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>
<div class="container">
<div class="row">
<div class="col-md-4">Contact List Placeholder</div>
<router-view class="col-md-8"></router-view>
</div>
</div>
</template>
router-viewの部分に表示する内容を設定していく。
その前に、このプロジェクトでは、Bootstrapを使う。好みのフレームワークを使うこともできる。
bootstrapのインストール
$ npm install bootstrap --save
warningが出た。
fsevents関係に問題があるらしい。
とりあえず、問題は先送り。
bootstrapは、jQueryが必要なので、インストール
$ npm install jquery@^2.2.4 --save
--save付きでインストールしたため、Node.js用の設定ファイルには設定が保存されるが、aureliaの設定には保存されないため、手動で修正する。
aurelia_projectフォルダのaurelia.jsonファイルを開く。
3rd partyのライブラリに関しては、vendor-bundle.jsに記述する。
ここに、jQueryと、bootstrapの設定を記述する。
"dependencies": [
...
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
...
]
ルーティングのモジュールを作成する
srcフォルダ内にファイルを作成。
export class NoSelection {
constructor() {
this.message = "Please Select a Contact.";
}
}
no-selection.html
<template>
<div class="no-selection text-center">
<h2>${message}</h2>
</div>
</template>
先の
route: '', moduleId: 'no-selection'
の、no-selectionが、この部分に対応する。
ここまでで、
index.htmlの<body aurelia-app="main">の部分に、app.htmlが表示される。
app.htmlの<router-view>の部分に、no-selection.htmlが表示される。
とりあえず、router-viewは、configureRouterを使う場合の、デフォルトのタグと考えておく。
これで、右側に、Please Select a Contact.と表示されました。
まだ、繋がりが、ぼんやりとしか見えていませんが、つづく。
0 件のコメント:
コメントを投稿