「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、ユーザー一覧表示機能を作成します。

１）Rails側のコントローラに設定追加
　
ログインしている場合のみユーザー一覧表示できるようにします。
beforeフィルターに”index”アクションを追加します。
　
$ vi app/controllers/users_controller.rb

class UsersController < ApplicationController
  before_action :signed_in_user, only: [:index, :update]

  def index
    @users = User.all
    render json: @users
  end

　
２）AngularJSルート設定を確認
　
$ vi app/assets/javascripts/mymodule.js.erb

.when("/users", {
 templateUrl: "<%= asset_path('users/index.html.erb') %>"
 })

　
３）JavaScript-MD5を実装
　
gravatarを表示するため、JavaScript-MD5を実装します。個別のユーザー表示ビューでもgravatarを表示していましたが、その際はサーバー側でmd5ハッシュを作成していました。
　
今回はクライアント側でmd5ハッシュを生成してgravatarを表示します。
　
①ダウンロード
https://github.com/blueimp/JavaScript-MD5
　
②vendor/assets/javascripts/に配置
　
③インクルードの設定
$ vi app/assets/javascripts/application.js
　
//= require md5.min
　
４）ユーザー一覧のビューを作成
　
$ vi app/assets/templates/users/index.html.erb

<div ng-controller="UsersIndexCtrl">
  <h1 class="text-center">All users</h1>
  <ul ng-repeat="user in users" class="users">
    <li><img alt="{\{user.name}}" src="https://secure.gravatar.com/avatar/{\{hash(user.email)}}?s=52" />
      <a href="/users/{\{user.id}}">{\{user.name}}</a>
    </li>
  </ul>
</div>

　
５）スタイルシートの設定
　
$ vi app/assets/stylesheets/custom.css.scss

$grayLighter: rgb(238, 238, 238);

/* users index */

.users {
  list-style: none;
  margin: 0;
  li {
    overflow: auto;
    padding: 10px 0;
    border-top: 1px solid $grayLighter;
    &:last-child {
      border-bottom: 1px solid $grayLighter;
    }
  }
}

　
６）AngularJSコントローラを設定
　
ログインしていない場合は、ログイン画面に遷移させます。
　
$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersIndexCtrl", function($scope, userResource, flashService, $location, sessionResource, $q) {
  var qgetUser = function(deferred) {
    if (flashService.getUser()) {
      var quser_info = flashService.getUser();
      deferred.resolve(quser_info);
    } else {
      sessionResource.current_user({}, function(response) {
        if (response.user.id) {
          var quser_info = response;
        } else {
          var quser_info = { user: {id: 0} };
        }
        flashService.setUser(quser_info);
        deferred.resolve(quser_info);
      });
    }
  }
  var deferred = $q.defer();
  deferred.promise.then(function (result) {
    var user_info = result;
    if (user_info.user.id > 0) {
      $scope.users = userResource.index();
    } else {
      $location.path("/signin");
    }
  },function (reason) {
    console.log("qgetUser-Error");
  })
  qgetUser (deferred);

  $scope.hash = function(email) {
    return md5(email.toLowerCase());
  };
});

　
７）ユーザー一覧のリンク
　
ナビゲーションメニューにユーザー一覧へのリンクを設定します。ログイン済みの場合のみ表示します。
　
$ vi app/views/layouts/_header.html.erb
　
<li ng-show="chkSignin().user.id > 0"><%= link_to "Users", "/users" %></li>