「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。AngularJSのルートサービスとテンプレートビューを使ってユーザーshowページを作成します。

１）Railsコントローラを設定
　
$ vi app/controllers/users_controller.rb

  def show
    user = User.find(params[:id])
    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
    @user_info = {
      user: user,
      gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}"
    }
    render json: @user_info
  end

　
２）AngularJSのルート設定にshowを追加
　
$ vi app/assets/javascripts/mymodule.js.erb
　

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);

myModule.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
　　　：
    .when("/users/:id", {
     templateUrl: "<%= asset_path('users/show.html.erb') %> "
     })

　
３）showページに対応するAngularJSコントローラ”UsersShowCtrl”を定義
　
$ vi app/assets/javascripts/mymodule.js.erb

myModule.factory("userResource", function($resource) {
  return $resource("/app/users/:id", { id: "@id" },
    {
　　　　：
      'show':    { method: 'GET', isArray: false },
　　　　：
    }
  );
});

myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource) {
  $scope.user_info = userResource.show({ id: $routeParams.id });
});

　
４）showページのテンプレートを追加
　
$ vi app/assets/templates/users/show.html.erb

<div ng-controller="UsersShowCtrl">
  <div class="row">
    <div class="col-xs-6 col-sm-4">
      <h3>{\{user_info.user.name}}</h3>
      <h1>
        <img alt="{\{user_info.user.name}}" src="{\{user_info.gravatar_url}}" />
        {\{user_info.user.name}}
      </h1>
    </div>
    <div class="col-xs-6 col-sm-8">
      <h3>Main View</h3>
    </div>
  </div>
</div>

　
５）ブラウザリロード対策
　
ブラウザのアドレス欄に直接URLを入力したり、ブラウザリロードなどで”http://localhost:3000/users/1″に直接アクセスすると”No route”のエラーとなってしまうため、とりあえず下記ルート設定を追加しました。
　
$ vi config/routes.rb
　
get ‘users/*other’, to: ‘layouts#index’