「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、ホームページにマイクロポストの一覧を表示します。
1)Userモデルにfeedメソッドを追加
user_idが現在のユーザーidと等しいマイクロポスト取得するメソッドを定義します。
$ vi app/models/user.rb
def feed Micropost.where("user_id = ?", id) end
2)セッションコントローラにfeedを追加
新規ログインアクション(create)とログイン済みユーザー情報を返すアクション(current_user)にfeedを追加します。
$ vi app/controllers/sessions_controller.rb
def create user = User.find_by(email: session_params[:email].downcase) if user && user.authenticate(session_params[:password]) : @user_info = { user: user, gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}", microposts: microposts, feed: user.feed } render json: @user_info, status: :accepted, location: user else : def current_user : @user_info = { user: current_user, gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}", microposts: microposts, feed: current_user.feed } render json: @user_info, status: :accepted
3)ホームページにfeedの表示を追加
$ vi app/assets/templates/static_pages/home.html.erb
<div ng-controller="HomeCtrl"> <div ng-show="chkSignin().user.id > 0" class="row"> <div class="col-sm-4"> : </div> <div class="col-sm-8"> <h3>Micropost Feed</h3> <ol class="microposts"> <li ng-repeat="mp in chkSignin().feed"> <a href="/users/{\{chkSignin().user.id}}"> <img alt="{\{chkSignin().user.name}}" src="{\{chkSignin().gravatar_url}}?s=60" class="gravatar" /> </a> <a href="/users/{\{chkSignin().user.id}}">{\{chkSignin().user.name}}</a> <div>{\{mp.content}}</div> <small class="text-muted">Posted {\{mp.created_at | date:'medium'}}</small> </li> </ol> </div> </div>