「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。マイクロポストの登録、削除時のアクセス制御、登録時のエラーメッセージの設定を行いました。
(1)Railsアクセスコントローラにアクセス制限の設定追加
beforeフィルターを使って、登録実行時にログイン済みかどうか、削除実行時にログイン済みで正しいユーザーかチェックします。
Micropostsコントローラにbeforeフィルターを定義します。
$ vi app/controllers/microposts_controller.rb
class MicropostsController
(2)バリデーションエラー時のエラーメッセージを設定
1)AngularJSコントローラ
$ vi app/assets/javascripts/mymodule.js.erbmyModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource) { $scope.submit = function() { function success(response) { : } function failure(response) { _.each(response.data, function(errors, key) { _.each(errors, function(e) { $scope.micropostForm[key].$dirty = true; $scope.micropostForm[key].$setValidity(e, false); }); }); } micropostsResource.create($scope.micropost, success, failure); }; $scope.errorMessage = function(name) { var s = $scope.micropostForm[name].$error; result = []; _.each(s, function(key, value) { result.push(name + " " + value); }); return result.join(", "); };
2)AngularJSビュー
$ vi app/assets/templates/static_pages/home.html.erb<div ng-controller="HomeCtrl"> : <form name="micropostForm" ng-submit="submit()" novalidate> <textarea name="micropost" class="form-control" ng-model="micropost.content" rows="3" ng-maxlength="140" required> </textarea> <span class="text-danger" ng-show="micropostForm.content.$dirty && micropostForm.content.$error.maxlength"> content is too long (maximum is 140 characters) </span> <span class="text-danger" ng-show="micropostForm.content.$invalid && micropostForm.content.$dirty"> {\{errorMessage('content')}} </span><br /> <button type="submit" ng-disabled="micropostForm.$invalid" class="btn btn-large btn-primary">Post </button> </form>