Help us understand the problem. What is going on with this article?

[node.js] sailsでjade,bootstrap,angularを使う準備

More than 5 years have passed since last update.

sailsで新規プロジェクトを作るたびに忘れてしまうのでメモしておきます。

前提知識

jade

htmlを作成するテンプレートエンジン。タグで囲む代わりにインデントで表現できる。

Jade - Template Engine

bootstrap

デザインセンスが無くてもそれなりの見栄えを整えられるCSSフレームワーク

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

angular

jQueryではできないこともやってくれる憎いあんちくしょう。

AngularJS — Superheroic JavaScript MVW Framework

Q. AngularJSとjQueryの違いは何でしょうか? | POSTD

UI Bootstrap

bootstrapのスクリプト部分をangular的に書けるコンポーネント

Angular directives for Bootstrap

注意

  • bowerとかjspmを使って設定する方法もあるみたいですが、余計なファイルを取り込んでしまう仕様が気持ち悪いので、今回は手動での設定です。

  • js部分はcoffee-scriptで書いていますが、特にコンパイルの設定などはしていません。

基本設定

[root]というコントローラーを作っておきます。

sails generate controller root --coffee

api/controllers/RootController.coffeeが自動作成されますので修正します。

RootController.coffee
module.exports =
  index: (req,res)->
    res.view()

config/routes.jsを修正して、ルートがリクエストされた時にRootControllerが呼ばれるように設定します。

config/routes.js
  '/': {
    controller: 'RootController',
    action: "index"
  }

jadeの設定

※sails newする時にjadeを指定するオプションもあるのですが、忘れてた時の設定です。


まずjadeをインストール

npm i jade -S

ちなみに[i]は[install]のエイリアスで、[-S]は[--save]のエイリアスです。


次にconfig/views.jsを開いてejsの設定をjadeに変更します。

config/views.js
  // engine: 'ejs',
  engine: 'jade',

views/layout.jadeを作ります。
使い回しできる基本レイアウトです。

views/layout.jade
doctype html  
html(lang='ja', ng-app='testapp')  
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, user-scalable=no')
    title= title
    // STYLES
    // STYLES END
    // SCRIPTS
    // SCRIPTS END
  body
    block body  


views/root/index.jadeを作ります
最初に上記のlayoutを読み込んでいます

views/root/index.jade
extends ../layout

block body
  div(ng-controller='testCtrl as t')
    button.btn.btn-primary(ng-click="t.isCollapsed = !t.isCollapsed") push
    div(collapse="t.isCollapsed")
      h1 hello {{t.name}}!


sails liftしてlocalhost:1337をブラウザで見てみます。

この段階ではbootstrap、angularを読み込んでいないのでちゃんと表示できていませんが、
hello {{t.name}}!と表示されていればまずはOKです。


スクリーンショット 2015-02-27 12.31.06.png

bootstrapの設定

Getting started · Bootstrap

ここからダウンロードします。

解凍したらassets/stylesにcssとfontsをディレクトリごとぶち込みます。

さっき作ったviews/layout.jadeを開いてみてください。

// STYLES
link(rel="stylesheet", href="/styles/css/bootstrap-theme.css")
link(rel="stylesheet", href="/styles/css/bootstrap-theme.min.css")
link(rel="stylesheet", href="/styles/css/bootstrap.css")
link(rel="stylesheet", href="/styles/css/bootstrap.min.css")
link(rel="stylesheet", href="/styles/importer.css")
// STYLES END

sailsの裏側で動いてるgruntが設定を追加してくれています。

localhost:1337で確認してみてください。

ボタンが青くなっていればOKです。


スクリーンショット 2015-02-27 12.34.08.png


angularの設定

AngularJS — Superheroic JavaScript MVW Framework

ここからダウンロードします。

今回はstableの1.3.x,zipをダウンロードしました。

angular.min.jsangular.min.js.map の2つをassets/js/dependencies/`に移動します。

dependenciesディレクトリに入れたファイルは、他のjsファイルより先に読み込まれます。

次にassets/js/script.coffeeを作ります。

内容は以下の通り。

script.coffee
angular.module("testapp", [])
.controller 'testCtrl',($window,$http,$timeout)->
  @name = 'hoge'
  return

localhost:1337をリロードして[hello hoge!]と表示されていたらOKです。

angular1.3からcontrollerの書き方が少し変わっています。

以前は第2引数が配列でしたが、関数になっています。


スクリーンショット 2015-02-27 12.36.31.png


ui-bootstrapの設定

Angular directives for Bootstrap

ここからダウンロードします。

Build: Minified  
Include Templates: Yes  

でダウンロードしました。(ui-bootstrap-tpls-0.12.1.min.js)

angularと同じように
assets/js/dependencies/に移動します。

次にassets/js/script.coffeeを編集します。

'ui.bootstrap'の部分を追加しただけです。

script.coffee
angular.module("testapp", ['ui.bootstrap'])
.controller 'testCtrl',($window,$http,$timeout)->
  @name = 'hoge'
  @isCollapsed = false
  return

localhost:1337をリロードして、ボタンを押した時に文字が消えたらOKです。

以上です。


sails関連記事

[node.js] sailsで非公開のModelを作成する - Qiita

Node.js - [node] sailsでPassportを使わずにBasic認証する方法 - Qiita

__mick
nodejs,coffee-script等で遊んでいます。 https://github.com/mick-whats
https://twitter.com/mick_x_
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away