「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。前回、ホームページにログイン済みユーザーのフォロアーの数を表示しました。今回は同様にユーザープロファイルページにフォロアー数を表示するように設定します。

１）Railsコントローラにフォロー数の情報追加
　
$ vi app/controllers/users_controller.rb

  def show
    user = User.find(params[:id])
    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
    microposts = user.microposts
    @user_info = {
      user: user,
      gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}",
      microposts: microposts,
      followed_users: user.followed_users,
      followers:  user.followers
    }
    render json: @user_info
  end

　
２）AngularJSビューにフォロアー数の表示設定追加
　
$ vi app/assets/templates/users/show.html.erb

<div class="col-xs-6 col-sm-4">
  <h3>
    <img alt="{\{user_info.user.name}}" src="{\{user_info.gravatar_url}}" />
      {\{user_info.user.name}}
  </h3>
  <div class="stats">
    <a href="#">
      <strong id="following" class="stat">
        {\{user_info.followed_users.length}}
      </strong>
      following
    </a>
    <a href="#">
      <strong id="followers" class="stat">
        {\{user_info.followers.length}}
      </strong>
      followers
    </a>
  </div>
</div>