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

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

１）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
　
２）登録用の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ページに遷移します。
　
３）ユーザー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();
  };
});