「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、ユーザー編集機能を作成します。

（１）Railsコントローラのupdateアクション定義を追加
　

$ vi app/controllers/users_controller.rb

  def update
    @user = User.find(params[:id])
    if @user.update_attributes(user_params)
      render json: @user, status: :created, location: @user
    else
      render json: @user.errors, status: :unprocessable_entity
    end
  end

　
(２）AngularJSのルート設定
　
パーシャルビューをユーザー登録と共用します。
$ 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/edit", {
     templateUrl: "<%= asset_path('users/new.html.erb') %> "
     })

　
(３）AngularJSコントローラの設定
　
登録用に定義したAngularJSコントローラとビューに編集用の機能を追加します。
　
１）仕様
　
①登録と編集で共用し、切り替える部分
　
・ページヘッダー部のタイトル
$scope.title = “Sing up”;
$scope.title = “Update your profile”;
　
・ボタンの名前
$scope.btn_name = “Create my account”;
$scope.btn_name = “Save changes”;
　
・登録・編集成功後のフラッシュメッセージ
var msg = “Welcome to the Sample App!”;
var msg = “Profile updated”;
　
②編集のみに使用する機能
　
・フォームの各入力欄に現状の設定値を表示
・ユーザーのグラバターを表示
　
２）AngularJSコントローラを修正
　
$routeParams.idの有無に応じて登録と編集の処理を切り替えます。
　
$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService, $routeParams) {
  if ($routeParams.id) {
    var msg = "Profile updated";
    $scope.title = "Update your profile";
    $scope.btn_name = "Save changes";
    userResource.show({ id: $routeParams.id }, function(user_info) {
      $scope.user = user_info.user;
      $scope.gravatar_url = user_info.gravatar_url;
    })
  } else {
    var msg = "Welcome to the Sample App!";
    $scope.title = "Sing up";
    $scope.btn_name = "Create my account";
    $scope.user = new userResource();
  }
  $scope.submit = function() {
　　　：
    if ($routeParams.id) {
      userResource.update($scope.user, success, failure);
    } else {
      userResource.create($scope.user, success, failure);
    }
  };

　
※Railsコントローラのshowアクションの定義内容

  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ビューの修正
　
ページヘッダー部のタイトル、ボタン名の部分を変更し、グラバターの部分を追加します。
　
$ vi app/assets/templates/users/new.html.erb

<h1 class="text-center">{\{title}}</h1>
　　：
<button ng-click="submit()" class="btn btn-primary"
         ng-disabled="userNewForm.$invalid" >
  {\{btn_name}}
</button>
　　：
<span ng-show="user.id">
  <img alt="{\{user.name}}" src="{\{gravatar_url}}" />
  <a href="http://gravatar.com/emails">change</a>
</span>

　
（５）ナビゲーションメニューにユーザー編集メニュー追加
　
ヘッダー部のメニューにユーザー編集へのリンクを追加します。
　
$ vi app/views/layouts/_header.html.erb
　
<li><%= link_to “Settings”, “/users/{\{chkSignin().user.id}}/edit” %></li>