1)Rails controller
$ 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
2)AngularJS template view
$ 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>
3)css
$ 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; } }