「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>