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

前略

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

環境

Vagrant + CentOS6.5
Rails 4.1.8
Ruby 2.1.5

Bowerをインストール

npmでbowerをインストール

$ npm install bower

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

Gemfile

・
・
# javascripts↲
gem 'bower-rails', '~> 0.9.1'
gem 'jquery-rails'
・
・

で、bundle install

bower

コマンド確認

$ 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などを記載します。

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

Bower経由でインストール

$ 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 add vendor/assets
$ git commit -m 'angular and bootstrap'

Rails側の設定

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

config/application.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を追記。

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

app/assets/stylesheets/application.css.scss

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

• @importの行を追記

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

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

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

config/routes.rb

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

controller

$ rails g controller welcome index

class WelcomeController < ApplicationController
  def index
  end
end

view

<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

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

できたもの

References

• Creating a Skeleton App | AngularJS with Ruby on Rails
  by David Bryant Copeland