Single Page App with Node.js

bemoren
2013/05/08 16:52답글

수정|삭제

npm 설치시 -g 옵션(글로벌 설치) 을 주려면 sudo 명령으로 설치해야하는듯 ...

웹페이지를 HTML을 몰라도 깔끔하게 만들수가 있군요.

그동안 오픈소스 웹페이지들은 그럼 모두 이렇게 만들어진 것들인가?


길똥고
2013/11/27 16:28답글

수정|삭제

// app.js ----------------

/*
* 모듈 의존성 설정.
*/
var express = require('express')
, stylus = require('stylus')
, nib = require('nib')


길똥고
2013/11/27 16:35답글

수정|삭제

// app.ls 2 ------- Jade와 Stylus를 사용하여 Express 시동.

var app = express()
function compile(str, path) {
return stylus(str)
.set('filename', path)
.use(nib())
}
app.set('views', __dirname + '/views')
app.set('view engine', 'jade')
app.use(express.logger('dev'))
app.use(stylus.middleware(
{ src: __dirname + '/public'
, compile: compile
}
))
app.use(express.static(__dirname + '/public'))


길똥고
2013/11/27 16:42답글

수정|삭제

The app.set() directives tell Express that we want to use Jade, and where we will keep our views.

On that note, let's create a folder called 'views' in the project root where we will put our Jade files.


길똥고
2013/11/27 16:44답글

수정|삭제

The app.use() calls pass 'middleware' functions for Express to use.

Middleware are simply functions that have the signature fn(req, res, next).

They take the request object, the response object and next, which will call the next piece of middleware.

Express executes them in the order in which they are passed, and any of them may send a repines, preventing the execution of any remaining in the series (by not calling next()).


길똥고
2013/11/27 16:48답글

수정|삭제

The first piece of middleware we apply is the Express logger in 'dev' mode.
This will simply log incoming requests to the console.
Next, the Stylus middleware is applied, which will compile our .styl files to CSS.


길똥고
2013/11/27 16:54답글

수정|삭제

// app.js 3 ------------

app.get('/', function (req, res) {
res.end('Hi there!')
})
app.listen(3000)


길똥고
2013/11/27 16:54답글

수정|삭제

This creates a 'route', simply a function which takes the request and response object, and sends the plain-text response 'Hi there!'.

We then tell the Express application to listen on port 3000.

If you run node app.js in the terminal, then navigate to http://localhost:3000/ in your browser, you should see the plain-text response.


길똥고
2013/11/27 16:56답글

수정|삭제

// layout.jade --------------

!!!5
html
head
title #{title} - My Site
link(rel='stylesheet', href='/stylesheets/style.css')
body
header
h1 My Site
.container
.main-content
block content
.sidebar
block sidebar
footer
p Running on node with Express, Jade and Stylus


길똥고
2013/11/27 17:07답글

수정|삭제

Firstly, the !!!5 part tells Jade to output the HTML5 doctype.

Then, each word beginning a line represents a tag. Indentations after that line denote the tag's content, so rather than having to close a tag, you just stop indenting lines.

Within the head tag we output the contents of a title variable with #{title} -- you'll see later on where this gets defined.

We are also linking to the place we expect our compiled Stylus to be.
The only thing left to explain here is block. Since we won't be filling in this file with our page contents, we can denote blocks.

Templates which inherit from this one can define their own content to be output within these blocks.


길똥고
2013/11/27 17:16답글

수정|삭제

// index.jade ----------

extend layout
block content
p
| Vivamus hendrerit arcu sed erat molestie
| vehicula. Sed auctor neque eu tellus
| rhoncus ut eleifend nibh porttitor. Ut in.
p
| Donec congue lacinia dui, a porttitor
| lectus condimentum laoreet. Nunc eu
| ullamcorper orci. Quisque eget odio ac
| lectus vestibulum faucibus eget in metus.
| In pellentesque faucibus vestibulum. Nulla
| at nulla justo, eget luctus tortor.
block sidebar
.widget
h1 Widget
p
| Sed auctor neque eu tellus rhoncus ut
| eleifend nibh porttitor. Ut in nulla enim.
p
| Vivamus hendrerit arcu sed erat molestie
| vehicula.