「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();
};
});