O'ReillyのSPA本のサンプルを読みながら、せっかくだからjade式に書いてみよう、なんて思ったら、scriptべた書きを上手く表現できなかったので。
構成
基本的にnodeclipseのexpressプロジェクトの構成をそのままに。
app.js
実はapp.jsの中身は良く理解していない。(今後の課題）
prettyをtrueにして、読み易いHTMLを出力するようにだけした。
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' === app.get('env')) {
app.use(express.errorHandler());
app.locals.pretty = true; //ここだけ追加
}
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
layout.jade
デフォルトだとコンテンツのみをblockで呼び出していたが、scriptはページごとに違うの呼びたいよねってことで、script部分にもblockをいれた。（というか、headerって名前にしておけばいいんじゃないだろうか）
本だとスタイルシートもべた書きしているけれど、デフォルトでstylesheets/style.cssを読み込むように設定されていたので、そっちに記載することにした。
doctype html
html
head
title= "SAP Chapter1 section 1.2.2"
link(rel='stylesheet', href='/stylesheets/style.css')
script(type='text/javascript', src='/scripts/jquery-2.1.js') //jqueryはどのページでもロード
block scripts //個別のスクリプトは別途記述
body
block content
index.jade
jade環境下で生javascriptを書くときは、scriptタグの尻尾に.を打ってやる。これでscriptタグの内部がjade構文でないと認識されるらしい。
extends layout
block scripts
script(type='text/javascript'). //文末の.が重要
var spa = (function( $ ){
var configMap={},
$chatSlider,
toggleSlider, onClickSlider, initModule;
...
}());
block content
#spa //<div id="spa">の省略記法
.spa-slider //<div class="spa-slider">の省略記法
結果
<!DOCTYPE html>
<html>
<head>
<title>SAP Chapter1 section 1.2.2</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<script type="text/javascript" src="/scripts/jquery-2.1.js"></script>
<script type="text/javascript">
var spa = (function( $ ){
var configMap={},
$chatSlider,
toggleSlider, onClickSlider, initModule;
}());
</script>
</head>
<body>
<div id="spa">
<div class="spa-slider"></div>
</div>
</body>
</html>
というわけで、やりたいことは実現できたわけだけれども、jadeエディタ上ではjavascriptのシンタックスチェックしてくれないし、オートインデントも効かなくなるから、外だししてロードする方が色々と楽かも。小さなページでちょっとだけスクリプト書きたいとか、よっぽどの用途がない限りもうやらないな。
memo
appの立ち上げ
app.jsはnode appで立ち上げるより、supervisor.jsを使って
$ supervisor app
としておいたほうが楽。これで参照フォルダ内で変更が起きた際に自動で再ロードしてくれるようになる。今はコイツをターミナルで呼んでるけれど、Eclipseの外部コマンド呼び出しに設定してやればいいかな。
jadeファイルだけ監視する場合は-w viewsとかオプションを付けてやればいいと思う。
supervisor.jsは
sudo npm install -g supervisor
としてインストール。-gオプションの影響か、スーパーユーザ権限を聞かれたので、sudoで解決。（Macで開発してます)