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が自動作成されますので修正します。
module.exports =
index: (req,res)->
res.view()
config/routes.jsを修正して、ルートがリクエストされた時にRootControllerが呼ばれるように設定します。
'/': {
controller: 'RootController',
action: "index"
}
jadeの設定
※sails newする時にjadeを指定するオプションもあるのですが、忘れてた時の設定です。
まずjadeをインストール
npm i jade -S
ちなみに[i]は[install]のエイリアスで、[-S]は[--save]のエイリアスです。
次にconfig/views.jsを開いてejsの設定をjadeに変更します。
// engine: 'ejs',
engine: '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を読み込んでいます
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です。
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です。
angularの設定
AngularJS — Superheroic JavaScript MVW Framework
ここからダウンロードします。
今回はstableの1.3.x,zipをダウンロードしました。
angular.min.jsとangular.min.js.map の２つをassets/js/dependencies/`に移動します。
dependenciesディレクトリに入れたファイルは、他のjsファイルより先に読み込まれます。
次にassets/js/script.coffeeを作ります。
内容は以下の通り。
angular.module("testapp", [])
.controller 'testCtrl',($window,$http,$timeout)->
@name = 'hoge'
return
localhost:1337をリロードして[hello hoge!]と表示されていたらOKです。
angular1.3からcontrollerの書き方が少し変わっています。
以前は第２引数が配列でしたが、関数になっています。
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'の部分を追加しただけです。
angular.module("testapp", ['ui.bootstrap'])
.controller 'testCtrl',($window,$http,$timeout)->
@name = 'hoge'
@isCollapsed = false
return
localhost:1337をリロードして、ボタンを押した時に文字が消えたらOKです。
以上です。