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

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

## 前提知識
### jade
htmlを作成するテンプレートエンジン。タグで囲む代わりにインデントで表現できる。  
[Jade - Template Engine](http://jade-lang.com/)

### bootstrap
デザインセンスが無くてもそれなりの見栄えを整えられるCSSフレームワーク  
[Bootstrap · The world's most popular mobile-first and responsive front-end framework.](http://getbootstrap.com/)

### angular
jQueryではできないこともやってくれる憎いあんちくしょう。  
[AngularJS — Superheroic JavaScript MVW Framework](https://angularjs.org/)  
[Q. AngularJSとjQueryの違いは何でしょうか？ | POSTD](http://postd.cc/how-is-angular-js-different-from-jquery/)  

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

[Angular directives for Bootstrap](http://angular-ui.github.io/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](http://localhost:1337/)をブラウザで見てみます。   
この段階ではbootstrap、angularを読み込んでいないのでちゃんと表示できていませんが、 
`hello {{t.name}}!`と表示されていればまずはOKです。
___
![スクリーンショット 2015-02-27 12.31.06.png](https://qiita-image-store.s3.amazonaws.com/0/4784/b72b569f-09d3-7073-3d7d-0e3a3a014fbf.png)
---

## bootstrapの設定

[Getting started · Bootstrap](http://getbootstrap.com/getting-started/#download)

ここからダウンロードします。  
解凍したら`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](http://localhost:1337/)で確認してみてください。  
ボタンが青くなっていればOKです。

---
![スクリーンショット 2015-02-27 12.34.08.png](https://qiita-image-store.s3.amazonaws.com/0/4784/e1d3d881-79d1-45cb-8f70-57121775373f.png)

---

## angularの設定

[AngularJS — Superheroic JavaScript MVW Framework](https://angularjs.org/)

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


今回はstableの1.3.x,zipをダウンロードしました。  
`angular.min.js`と`angular.min.js.map` の２つを`assets/js/dependencies/``に移動します。  
dependenciesディレクトリに入れたファイルは、他のjsファイルより先に読み込まれます。  

次に`assets/js/script.coffee`を作ります。  
内容は以下の通り。

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

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

 
> angular1.3からcontrollerの書き方が少し変わっています。  
> 以前は第２引数が配列でしたが、関数になっています。

---
![スクリーンショット 2015-02-27 12.36.31.png](https://qiita-image-store.s3.amazonaws.com/0/4784/1d14dad4-d898-b3fb-1cc2-511daefab3c1.png)

---
 
## ui-bootstrapの設定

[Angular directives for Bootstrap](http://angular-ui.github.io/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](http://localhost:1337/)をリロードして、ボタンを押した時に文字が消えたらOKです。

以上です。

---

### sails関連記事

[[node.js] sailsで非公開のModelを作成する - Qiita](http://qiita.com/_wats/items/766e4888ebe776e22293)

[Node.js - [node] sailsでPassportを使わずにBasic認証する方法 - Qiita](http://qiita.com/_wats/items/81b332c81a18c898f403)