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;
}
}