在Angularjs 1.3中显示Laravel 5验证错误

Question

I am a newbie to Laravel 5 and angularjs. I am working on a project which uses laravel 5 as backend and angularjs as front-end. I am utilizing laravel 5 for RESTful api routes which are accessed by angularjs front-end.

I have worked out a solution for capturing the laravel 5 form validation errors and displaying it in angularjs front end as below.

My question is: Is this an acceptable way of working? Or there is a better approach to achieve this?

My code:

In Laravel 5 : 1. I am doing form validations through a dedicated request class. For eg for a create page form I have a PageRequest class in app\\requests folder with the following code:

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. Next in my PagesController which provides the methods for RESTful api, for example the create Page form will post back to the store method in the PagesController which can be as follows:

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. Then in my angular content.js file which defines the ui-router states with controllers, I have the following snippet to handle the create page:

.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. And finally in the create-pages.html partial I am able to reference the $scope.messages as :

<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>

Is there a better way of doing this?

Any suggestions for a better approach will be appreciated.