[Rails 4.1] BowerでAngular.js関係のファイルをインストール・管理してみる

# 前略

今回はBowerのみでangularを取り扱ってみます。

# 環境

Vagrant + CentOS6.5
Rails 4.1.8
Ruby 2.1.5

# Bowerをインストール

## npmでbowerをインストール

```rb
$ npm install bower
```

## bower-railsのgemをbundlerでインストール

```rb:Gemfile
・
・
# javascripts↲
gem 'bower-rails', '~> 0.9.1'
gem 'jquery-rails'
・
・
```

で、bundle install


# bower

## コマンド確認

```rb
$ rake -T bower
----

rake bower:cache:clean                   # Clear the bower cache ('bower cache clean')
rake bower:clean                         # Attempt to keep only files listed in 'main' of each component's bower.json
rake bower:install[options]              # Install components from bower
rake bower:install:deployment[options]   # Install components from bower using previously generated bower.json
rake bower:install:development[options]  # Install both dependencies and devDependencies from bower
rake bower:install:production[options]   # Install only dependencies, excluding devDependencies from bower
rake bower:list                          # List bower components
rake bower:resolve                       # Resolve assets paths in bower components
rake bower:update[options]               # Update bower components
rake bower:update:prune[options]         # Update existing components and uninstalls extraneous components
```

## Bowerfileを作成

プロジェクトルートにBowerfileを作ります。

angularなどを記載します。

```rb
$ vi Bowerfile
----
asset 'angular'
asset 'bootstrap-sass-official'
# vim: ft=ruby
```

## Bower経由でインストール

```zsh
$ rake bower:install
----


bower.js files generated
/home/hoge/project/node_modules/.bin/bower install -p
[?] May bower anonymously report usage statistics to improve the tool over time? Yes
bower angular#*             not-cached git://github.com/angular/bower-angular.git#*
bower angular#*                resolve git://github.com/angular/bower-angular.git#*
bower bootstrap-sass-official#*       not-cached git://github.com/twbs/bootstrap-sass.git#*
bower bootstrap-sass-official#*          resolve git://github.com/twbs/bootstrap-sass.git#*
bower bootstrap-sass-official#*         download https://github.com/twbs/bootstrap-sass/archive/v3.3.1.tar.gz
bower angular#*                         download https://github.com/angular/bower-angular/archive/v1.3.4.tar.gz
bower bootstrap-sass-official#*          extract archive.tar.gz
bower bootstrap-sass-official#*         resolved git://github.com/twbs/bootstrap-sass.git#3.3.1
bower angular#*                          extract archive.tar.gz
bower angular#*                         resolved git://github.com/angular/bower-angular.git#1.3.4
bower jquery#>= 1.9.0                 not-cached git://github.com/jquery/jquery.git#>= 1.9.0
bower jquery#>= 1.9.0                    resolve git://github.com/jquery/jquery.git#>= 1.9.0
bower jquery#>= 1.9.0                   download https://github.com/jquery/jquery/archive/2.1.1.tar.gz
bower jquery#>= 1.9.0                    extract archive.tar.gz
bower jquery#>= 1.9.0                   resolved git://github.com/jquery/jquery.git#2.1.1
bower bootstrap-sass-official#*          install bootstrap-sass-official#3.3.1
bower angular#*                          install angular#1.3.4
bower jquery#>= 1.9.0                    install jquery#2.1.1

bootstrap-sass-official#3.3.1 bower_components/bootstrap-sass-official
└── jquery#2.1.1

angular#1.3.4 bower_components/angular

jquery#2.1.1 bower_components/jquery
```

とりあえずこれでBowerを使ったインストールは終わりで、次は今落としてきたものをRailsで使えるように設定していきます。

## 一旦git commit 

```git
$ git add vendor/assets
$ git commit -m 'angular and bootstrap'
```

# Rails側の設定

Bowerで落としてきたファイルにパスを通します。

## config/application.rb

```rb
module CheckersNote
  class Application < Rails::Application
　　　・
　　　・
    # config.i18n.default_locale = :de
　　　・

    # 以下を追加
    # files managed by bower
    config.assets.paths << Rails.root.join("vendor","assets","bower_components")
    config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap-sass-official","assets","fonts")
    config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff)$)
　　# ここまで
　　・
　　・
```

## app/assets/javascripts/application.js

- turbolinksを消して、angular/angularを追記。

```js
//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require_tree .
```

## app/assets/stylesheets/application.css.scss

- まず、application.cssをapplication.css.scssにリネームします。

- @importの行を追記

```scss
　　・
　　・
  *
  *= require_self
  *= require_tree .
  */
　　・
　　・
@import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";
```

これでRails側の設定も終了です。

# angularのサンプルを書いてみる

## config/routes.rb

```rb
get 'welcome' => 'welcome#index'
root 'welcome#index'
```

## controller

```zsh
$ rails g controller welcome index
```

```rb
class WelcomeController < ApplicationController
  def index
  end
end
```

## view

```html
<div class="container-fluid" ng-app="receta">
  <div class="panel panel-success">
    <div class="panel-heading">
      <h1 ng-if="name">Hello, {{name}}</h1>
    </div>
    <div class="panel-body">
      <form class="form-inline">
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Enter your name" autofocus ng-model="name">
        </div>
      </form>
    </div>
  </div>
</div>
```

## app/assets/javascripts/app.coffee

```coffeescript
receta = angular.module('receta',[
])
```

## できたもの

![Screen Shot 2014-12-03 at 15.24.27.png](https://qiita-image-store.s3.amazonaws.com/0/18705/56a65b94-9c35-0b90-dd95-6a541248f507.png)

# References

- [Creating a Skeleton App | AngularJS with Ruby on Rails
by David Bryant Copeland](http://angular-rails.com/bootstrap.html)