読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

RailsでAngularJSを使ってTodoアプリを作成 - 2. UI Bootstrapのインストール方法

Rails中級 AngularJS 連載

f:id:nipe880324:20150112194806p:plain

「RailsでAngularJSを使ってTodoアプリを作成」の連載2回目です。
Todoアプリを作成していく前に、AngularJS用のBootstrap(UI Bootstrap)を導入しましょう。

これを導入することで、タブ、モーダル、ページネーションなどのBootstrapが提供している機能がAngularJSで使いやすくなります。


* 連載記事一覧

f:id:nipe880324:20150114203508j:plain:w480

動作確認

  • Rails 4.2.0
  • AngularJS 1.3.8
  • Bootstrap 3.3.1
  • UI Bootstrap 0.12.0

目次

  1. UI Bootstrap のインストール方法
  2. UI Bootstrap の動作確認

UI Bootstrap のインストール方法

UI Bootstrapを入れるためには、AngularJSとBootstrap CSSが必要です。
AngularJSは導入済みのため、Bootstrap CSSを取得します。

curl https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css > vendor/assets/stylesheets/bootstrap.min.css


RailsからBootstrap CSSを読み込むようにするために、application.cssBootstrap CSSを追加します。

# app/assets/stylesheets/application.css
 *= require bootstrap.min


BootstrapのGlyphiconsも使えるようにしたいので、Bootstrap - Downloadからzip形式でファイルをダウンロードし、dist/fontvendor/assets/に配置します。

そして、applciation.cssに下記を追加します。こうすることで、BootstrapのGlyphiconsが使えるようになります。

# app/assets/stylesheets/application.css
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}


次に、UI Bootstrapファイルを取得します。
UI Bootstrapには、2つのファイルが用意されています。

  • ui-bootstrap-[version].min.js - 表示をカスタマイズする必要がある場合。テンプレートを別途用意する必要がある。
  • ui-bootstrap-tpls-[version].min.js - 表示をカスタマイズする必要がない場合。Bootstrapのデフォルトのテンプレートが同梱されている。

今回は、カスタマイズをしなくて良いので、ui-bootstrap-tpls-[version].min.jsを取得します。

curl https://raw.githubusercontent.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.12.0.min.js > vendor/assets/javascripts/ui-bootstrap-tpls-0.12.0.min.js


こちらも、RailsからUI Bootstrapを読み込むようにするために、application.jsui-bootstrap-tpls-0.12.0.minを追加します。
(順番が重要です。AngularJSに依存しているので、angular.minの後ろであり、appに依存されているので appの前である必要があります。)

# app/assets/javascripts/application.js
...
//= require angular.min
//= require ui-bootstrap-tpls-0.12.0.min
//= require app
//= require_tree .


アプリがUI Bootstrapを読み込むようにするために、app.coffeeui.bootstrapを追加します。

# app/assets/javascripts/app.coffee
app = angular.module('sampleApp', ['ui.bootstrap'])

BootstrapとAngularJSで競合があり、CSSのスタイリングが適用されない問題があるので、次のスタイリングをapplication.cssに追加します。

# app/assets/stylesheets/application.css
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }


UI Bootstrap の動作確認

動作確認として、ツールチップを使ってみます。
ページネーション、モーダルなどその他のUI Bootstrapの機能の使い方は、UI Bootstrap - 公式ページを参照してください。

# app/views/templates/index.html.erb
<div class="container">
  <h1>Templates#index</h1>

  <form class="form-horizontal">
    <div class="form-group">
      <%= label_tag :text, "テキスト", class: "col-md-3 control-label" %>
      <div class="col-md-5">
        <%= text_field_tag :text, "", "ng-model" => "text", class: "form-control" %>
      </div>
    </div>
    <div class="form-group">
      <%= label_tag :tooltipText, "ツールチップのテキスト", class: "col-md-3 control-label" %>
      <div class="col-md-5">
        <%= text_field_tag :tooltipText, "", "ng-model" => "tooltipText", class: "form-control" %>
      </div>
    </div>
  </form>

  <a href="#" tooltip="{{tooltipText}}" class="control-label">{{text}}</a>
</div>


「文字列」と「ツールチップの文字列」を動的にできます。それぞれテキストフィールドに入力した値を表示するようにしています。
f:id:nipe880324:20150112195029j:plain:w480


以上です。