「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、ホームページにログイン済みユーザーのユーザー情報、マイクロポスト、gravatarの情報を表示するようにしました。

１）セッションコントローラを修整
　
新規ログインアクション（create）とログイン済みユーザー情報を返すアクション（current_user）にマイクロポストとgravatarの情報を追加するように修整しました。
　
$ vi app/controllers/sessions_controller.rb

  def create
    user = User.find_by(email: session_params[:email].downcase)
    if user && user.authenticate(session_params[:password])
      remember_token = User.new_remember_token
      cookies.permanent[:remember_token] = remember_token
      user.update_attribute(:remember_token, User.encrypt(remember_token))
      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, status: :accepted, location: user
    else
      msg = {"password" => ["Invalid email/password combination"]}
      render json: msg, status: :unprocessable_entity
    end
  end

  def current_user
    remember_token = User.encrypt(cookies[:remember_token])
    current_user ||= User.find_by(remember_token: remember_token)
    if current_user
      gravatar_id = Digest::MD5::hexdigest(current_user.email.downcase)
      microposts = current_user.microposts
      @user_info = {
        user: current_user,
        gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}",
        microposts: microposts
      }
      render json: @user_info, status: :accepted
    else
      head :no_content
    end
  end

　
２）ユーザー新規登録時のAngularJSコントローラを修正
　
ユーザー新規登録時にユーザー情報を”flashService”に登録しますが、このときにgravatarの情報を登録するように修正します。
　

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService, $routeParams, sessionResource, $q) {
　　：
  $scope.submit = function() {
    function success(response) {
　　　　　：
      var user_info = { 
        user: response,
        gravatar_url: "https://secure.gravatar.com/avatar/" + md5(response.email.toLowerCase())
      };
      flashService.setUser(user_info);
      $location.path("/users/" + response.id);
    }

　
３）ホームページを制御するAngularJSコントローラとビューを修整
　
①AngularJSコントローラ”HomeCtrl”を追加
　
$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("HomeCtrl", function($scope,flashService) {
  $scope.chkSignin = function() {
    return flashService.getUser();
  };
});
　
②homeビューを修正
　
$ 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">
      <a href="/users/{\{chkSignin().user.id}}">
        <img alt="{\{chkSignin().user.name}}"
             src="{\{chkSignin().gravatar_url}}?s=60"
             class="gravatar"
        />
      </a>
      <h4>{\{chkSignin().user.name}}</h4>
      <span><a href="/users/{\{chkSignin().user.id}}">view my profile</a></span><br />
      <ng-pluralize count="chkSignin().microposts.length"
                    when="{'0': '0 micropost',
                           'one': '1 micropost',
                           'other': '{} microposts'}">
      </ng-pluralize>
    </div>
  </div>
  <div ng-hide="chkSignin().user.id > 0">
    <div class="jumbotron">
      <h1>Welcome to the Sample App</h1>
　　　　：