AngularJS on Rails
Tweet
最近は子供中心の生活になっている、技術推進室の中村です。 先日RailsとAngularJSの連携について調べていましたので、それについて簡単に紹介したいと思います。
AngularJSとは、Googleが作成したJavaScriptのMVCフレームワークです。同じようなフレームワークでBackbone.jsがありますが、Backbone.jsが機能が少ない軽量なフレームワークなのに対し、AngularJSは機能が豊富なフレームワークです。 以降では、このAngularJSをRailsで使う方法を紹介したいと思います。
環境構築
今回使用するRailsのバージョンは4.0.2です。またAngularJSのバージョンは1.2.1を使います。 まずはサンプル用のRailsアプリケーションを作成します。
$ rails new angularjs_sample
作成されたら、次にangularjs_sample/Gemfileにangular-gemを追加します。
gem "angular-gem", '~> 1.2.1'
このgemを使うとapp/assets以下にAngularJSのフォルダ構成のテンプレートを生成し、app/assets/javascripts/application.jsに生成したフォルダとgemに含まれているAngularJSのJavaScriptライブラリを読み込む設定を追加してくれます。 ではGemfileに追記したら、bundle installを実行し、その後rails gを実行しましょう。
$ bundle install $ rails g angular:install append app/assets/javascripts/application.js create app/assets/javascripts/angular/controllers create app/assets/javascripts/angular/controllers/.gitkeep create app/assets/javascripts/angular/filters create app/assets/javascripts/angular/filters/.gitkeep create app/assets/javascripts/angular/services create app/assets/javascripts/angular/services/.gitkeep create app/assets/javascripts/angular/widgets create app/assets/javascripts/angular/widgets/.gitkeep create app/assets/templates create app/assets/templates/.gitkeep create spec/javascripts/angular create spec/javascripts/angular/.gitkeep
実行した直後のapp/assets/javascripts/application.jsは以下のようになります。最後の2行にAngularJSのライブラリを読み込む設定が追加されているのが確認できると思います。
今回使用するgemに含まれているAngularJSはバージョンが1.2.1ですが最新バージョンは1.2.5です。もし最新バージョンを使いたい場合はapp/assets/javascripts/application.jsの17行目の //= require angularを削除してhttp://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.jsを使うように修正してください。 これで環境設定は終わりです。それでは次にAngularJSのサンプルを簡単に作って動かしてみます。
AngularJSを動かす
AngularJSは僅かな記述をするだけで、フレームワークが持っている豊富な機能を使うことができます。 まずは簡単なサンプルを作ってみます。先ほど作成したRailsプロジェクトangularjs_sampleの直下に移動し、public以下にindex.htmlというファイルを作成し、以下のコードを入力します。
この例は入力した内容をそのままHelloの横に表示するというものです。最初にng-appと宣言していますが、これでこのページがAngularJSを使うということを宣言しています。 ちなみにAngularJSでは、どのAPIもng~と先頭に「ng」がつきますが、これはAngularJSの「AngularJS」からきています。 次にAngularJSのコントローラ機能を使ってみます。サンプルは以下のようになります。まずはJavaScriptです。public/js/testScript.jsというファイルを作成し以下のようにコードを入力します。
次にpublic/index.htmlに今作成したJavaScriptファイルを追記してusersの中身を出力するようにしてみます。
上記のように定義すると、コントローラ側でjson形式で返しているusersがpublic/index.html内の<div ng-controller="testCtrl"></div>内で参照することができます。 では、次にRails側でjson形式で返したデータをAngularJSを通してHTML上に表示するようにしてみます。
AngularJSからRailsのAPIを呼ぶ
では引き続きangularjs_sampleにコードを追加していきます。今回はeventsテーブルに入ったデータを一覧で表示するサンプルを作成します。更にview側をerbを使わずhtmlを使うようにします。
モデルとコントローラを作成
まずはeventsコントローラを作成し、一覧表示画面を作成していきます。 最初にeventモデルを作成します。
$ rails g model event title description invoke active_record create db/migrate/20131210024654_create_events.rb create app/models/event.rb invoke test_unit create test/models/event_test.rb create test/fixtures/events.yml
続いてeventsコントローラを作成します。
$ rails g controller events index create app/controllers/events_controller.rb route get "events/index" invoke erb create app/views/events create app/views/events/index.html.erb invoke test_unit create test/controllers/events_controller_test.rb invoke helper create app/helpers/events_helper.rb invoke test_unit create test/helpers/events_helper_test.rb invoke assets invoke coffee create app/assets/javascripts/events.js.coffee invoke scss create app/assets/stylesheets/events.css.scss
では生成したapp/controllers/events_controller.rbを編集します。 eventsテーブルの中身を取ってきて、それをjson形式で返すようにします。
次にマイグレーションを実行してテーブルを作成しておきます。
$ rake db:migrate == CreateEvents: migrating =================================================== -- create_table(:events) -> 0.0013s == CreateEvents: migrated (0.0013s) ==========================================
そして初期データ投入を行います。db/seeds.rbを以下のように編集します。
編集したら、rakeコマンドを入力して初期データを登録します。
$ rake db:seed
以上でRails側の準備は終わりです。次はAngularJS側の実装です。
AngularJS service層・controller層の実装
それではAngularJS側の実装に入ります。まずはapp/assets/javascripts/angular/services以下にevents.js.coffeeという名前のcoffeescriptのファイルを作成し、その中でRails側のevents_controllerのindexメソッドを実行してjson形式のデータを取得する処理をEventsという名前で作成します。
次にapp/assets/javascripts/angular/controllers以下にevents_ctrl.js.coffeeという名前のcoffeescriptファイルを作成し、先ほど作成したEventsサービスを呼び出します。
次にapp/assets/javascripts/app.js.coffeeを作成し、以下のように書きます。
app/assets/javascripts/app.js.coffeeでモジュール定義をしています。今回のサンプルではEventSampleという名前で定義しています。そしてpublic/index.htmlのhtmlタグ内のng-appでそのモジュールを使うことを宣言しています。 次にapp/assets/javascripts/application.jsの中身を編集します。今回のサンプルでは、jqueryなど使いませんのでそれら関係ないものは削除します。代わりにAngularJSのライブラリや先ほど作成したcoffeescriptを読み込むようにします。
2行目の//= require angular-resourceはAngularJSのngResourceモジュールが含まれていて今回ループ機能を使うので追記します。
HTML側の編集
それではpublic/index.htmlを編集してeventsテーブルの内容を表示してみましょう。
eventsテーブルの中身を取得し、AngularJSのng-repeatを使ってjson形式のデータを取得し一覧表示しています。
最後に
最後にAngularJSが提供する機能を使って一覧表示の絞り込み機能を追加したコードをgithubにアップしておきましたので、興味のある方はご覧下さい。 サンプルはこちらから入手できます。 次回はbowerとRailsの連携について紹介しようと思います。 では、また
