「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。前回、micropostモデルを作成し、userモデルとの間にアソシエーションを定義し、テストデータを登録しました。今回は、AngularJSのビューでユーザープロファイルページにそのユーザーのマイクロポストを表示します。

１）Railsコントローラを修整
　
対象ユーザーが保持するマイクロポストをユーザー情報と一緒にJSON形式でリターンします。
　
$ 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
    }
    render json: @user_info
  end

　
２）AngularJSビューを修整
　
サーバーから取得したユーザー情報とマイクロポストの情報を表示します。
$ vi app/assets/templates/users/show.html.erb

<div ng-controller="UsersShowCtrl">
  <div class="row">
　　　：
    <div class="col-xs-6 col-sm-8">
      <h3>Microposts({\{user_info.microposts.length}})</h3>
      <ol class="microposts">
        <li ng-repeat="mp in user_info.microposts">
          <div>{\{mp.content}}</div>
          <small class="text-muted">Posted {\{mp.created_at | date:'medium'}}</small>
        </li>
      </ol>
    </div>
  </div>
</div>

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

/* microposts */

.microposts {
  list-style: none;
  margin: 10px 0 0 0;

  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }
}