Step by Step Ruby on Rails

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

Ruby on Rails Tutorial ユーザー登録成功後、AngularJSでウェルカムメッセージ表示

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、ユーザー登録成功後にユーザーshowページに遷移し、Railsのflashを模したウェルカムメッセージを表示できるようにします。

1)flashを模したサービスを定義

$ vi app/assets/javascripts/mymodule.js.erb

myModule.factory("flashService", function ($rootScope) {
  var queue = [];
  var currentMessage = "";

  $rootScope.$on("$routeChangeSuccess", function() {
    currentMessage = queue.shift() || "";
  });

  return {
    push: function (msg) {
      queue.push(msg);
    },
    get: function () {
      return currentMessage;
    }
  };
});


まず、ユーザー登録成功時に上記pushメソッドでキューにウェルカムメッセージを設定します。

その後、ユーザーshowページに画面遷移する際、$routeサービスによって画面遷移が成功するとrouteChangeSuccessイベントがブロードキャストされるので、このイベントを$rootScopeのリスナーで検知し、キューからウェルカムメッセージを取り出します。

これでキューの中身は空になるので、ユーザー登録成功直後の遷移のみウェルカムメッセージが表示されます。

※routeChangeSuccessイベント
https://docs.angularjs.org/api/ngRoute/service/$route

2)登録用のAngularJSコントローラを修整

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService) {
  var msg = "Welcome to the Sample App!";
  $scope.user = new userResource();
  $scope.submit = function() {
    function success(response) {
      flashService.push(msg);
      $location.path("/users/" + response.id);
    }
    function failure(response) {
      console.log("failure", response)
    }
    userResource.create($scope.user, success, failure);
  };
});


・依存性にflashServiceを追加します。

・ユーザー登録成功時にflashSeviceのpushメソッドを実行し、ウェルカムメッセージを登録します。

・サーバーのレスポンス(response)から登録したユーザーのidを取得し、そのユーザーIDをURLに追加し、登録したユーザーのユーザーshowページに遷移します。

3)ユーザーshowのビューとコントローラを修整

ウェルカムメッセージが設定されている場合は、ウェルカムメッセージを取得して表示します。

①showページを修正

$ vi app/assets/templates/users/show.html.erb

<div ng-controller="UsersShowCtrl">
  <div class="row">
    <div class="bg-success" ng-show="getMessage()">
      <p>{\{getMessage()}}</p>
    </div>
   :

②AngularJSコントローラ

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource, flashService) {
  $scope.user = userResource.show({ id: $routeParams.id });
  $scope.getMessage = function() {
    return flashService.get();
  };
});