Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

Ruby on Rails Tutorial AngularJSを使って2カラム構成のユーザーshowページ作成

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

1)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

2)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') %> "
     })

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

4)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>

5)ブラウザリロード対策

ブラウザのアドレス欄に直接URLを入力したり、ブラウザリロードなどで"http://localhost:3000/users/1"に直接アクセスすると"No route"のエラーとなってしまうため、とりあえず下記ルート設定を追加しました。

$ vi config/routes.rb

get 'users/*other', to: 'layouts#index'