在Angularjs 1.3中顯示Laravel 5驗證錯誤

Question

我是Laravel 5和angularjs的新手。 我正在一個項目中，該項目使用laravel 5作為后端，並使用angularjs作為前端。 我將laravel 5用於RESTful API路由，這些路由可通過angularjs前端訪問。

我已經找到了一種解決方案，用於捕獲laravel 5表單驗證錯誤並將其顯示在angularjs前端中，如下所示。

我的問題是：這是可接受的工作方式嗎？ 還是有更好的方法來實現這一目標？

我的代碼：

在Laravel 5中 ：1.我正在通過專用的請求類進行表單驗證。 例如，對於創建頁面表單，我在app\\requests文件夾中有一個PageRequest類，其代碼如下：

class PageRequest extends Request {

/**
 * Determine if the user is authorized to make this request.
 *
 * @return bool
 */
public function authorize()
{
    //any authorized user validations here..
    return true;
}

/**
 * Get the validation rules that apply to the request.
 *
 * @return array
 */
public function rules()
{
    return [
        'menuName' => 'required | min:5 | max:50',
        'position' => 'required',
        'visible'  => 'required'
    ];
}

}
2.接下來，在我的PagesController中，該頁面提供了RESTful api的方法，例如create page表單將發回到PagesController的store方法，如下所示：

class PagesController extends BaseController{

    /**
     * Store a newly created resource in storage.
     *
     * @param PageRequest $request
     * @return Response
     */
    public function store(PageRequest $request)
    {
        $request['slug'] =$request['menuName'];
        return $this->page->create($request->all()) ? json_encode(['success'=>'true']) : json_encode($request->messages());
    }
}  

3.然后在我的angular content.js文件中，該文件使用控制器定義了ui路由器狀態，我有以下代碼片段來處理創建頁面：

.state('content.subjects.pages.create',{
            url:'/create',
            views:{
                'forms@content.subjects':{
                    templateUrl:'/partials/create-page.html',
                    controller:['$scope', '$stateParams','$state', 'Subject', 'Page',
                    function($scope, $stateParams, $state, Subject, Page){
                        $scope.subject = {};
                        $scope.pages={};
                        $scope.messages={}; //place holder for the error messages
                        Subject.edit($stateParams.subjectSlug).success(function(data){
                           $scope.subject = data;
                        });
                        Subject.pages($stateParams.subjectSlug).success(function(data){
                            $scope.pages = data;
                        });
                        $scope.subject_id = $scope.subject.id;
                        $scope.submitPage = function(){
                            $scope.pageData['subject_id'] = $scope.subject.id;
                            Page.save($scope.pageData).success(function(data){
                                $scope.pages.push($scope.pageData);
                                $state.go('content.subjects.pages', {subjectSlug:$scope.subject.slug});
                            }).error(function(data){
                                //if the validation in laravel fails it will return the $request->messages as json
                                // we assign it to the $scope.messages object
                               $scope.messages = data;
                            });
                        };
                    }]
                }
            }
        })  

4.最后，在create-pages.html部分中，我可以將$ scope.messages引用為：

<div class="row page create-form" >
<!--<div id="messages" ng-show="message">{{ message }}</div>-->
<form class="form-horizontal create page" role="form" data-ng-submit="submitPage()">
    <h4 class="form-title">Create New Page</h4>
    <div class="form-group menuName">
        <div class="input-group has-feedback" data-ng-class="{'has-error':errorMenuName}">
            <span class="input-group-addon">Page Name</span>
            <input type="text" class="form-control menuName" name="menuName" data-ng-model="pageData.menuName"/>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <span class="text-danger">{{messages['menuName']}}</span>
    </div>
    <div class="form-group position">
        <div class="input-group has-feedback" data-ng-class="{'has-error':errorPosition}">
            <span class="input-group-addon">Position</span>
            <input type="text" class="form-control position" name="position" data-ng-model="pageData.position"/>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback">}</span>
        </div>
        <span class="text-danger">{{messages['position'][0]}}</span>
    </div>
    <div class="form-group visible">
        <div class="input-group has-feedback" data-ng-class="{'has-error':errorVisible}">
            <span class="input-group-addon">Published</span>
            <input type="text" class="form-control visible" name="visible" data-ng-model="pageData.visible"/>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <span class="text-danger">{{messages['visible'][0]}}</span>
    </div>
    <div class="form-group layout">
        <div class="input-group hidden has-feedback" data-ng-class="{'has-error':errorLayout}">
            <span class="input-group-addon">Page Layout</span>
            <input type="text" class="form-control layout" name="layout" data-ng-model="pageData.layout"/>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
    </div>
    <div class="form-group form-action create">
        <div class="btn-container create">
            <button class="btn btn-formIcon" type="submit"><span class="glyphicon glyphicon-plus"> Create</span></button>
        </div>
    </div>
</form>

有更好的方法嗎？

任何有關更好方法的建議將不勝感激。