back-end errors or serverError handling in Angularjs

app.factory('ActionMessageService', function () {

 var objToReturn = {};

 var _MESSAGE_DETAIL = {
  ERROR: {
   type: "ERROR",
   bootstrapClass: "alert alert-danger"
  },
  OK: {
   type: "OK",
   bootstrapClass: "alert alert-success"
  },
  INFO: {
   type: "INFO",
   bootstrapClass: "alert alert-info"
  },
  WARNING: {
   type: "WARNING",
   bootstrapClass: "alert alert-warning"
  },
     NOT_FOUND: {
         type: "ERROR",
     bootstrapClass: "alert alert-danger"
     },
  
 };
 var _MESSAGE_STATUS = {
     400: _MESSAGE_DETAIL.WARNING,
  200: _MESSAGE_DETAIL.OK,
  500: _MESSAGE_DETAIL.ERROR,
  404: _MESSAGE_DETAIL.NOT_FOUND
 };

 var _getActionMessage = function (response) {
     var actionMessage = response.data.Message;
     if (response.data.ModelState) {
            _.forEach(_.flatMap(response.data.ModelState), function (value) {
    actionMessage += ("<br>" + value);
   });
  }
  return {
   message: actionMessage,
   isShow: true,
   detail:  _MESSAGE_STATUS[response.status]
  };
 }
    
 var _getSuccessMessage = function (response) {
     
     return {
         message: "Success",
         isShow: true,
         detail: _MESSAGE_STATUS[200]
     };
 }
 var _getErrorMessage = function (response) {
     debugger;
     var actionMessage = response.data;
     if (response.data.Message) {
         actionMessage = response.data.Message;
     }
     return {
         message: actionMessage,
         isShow: true,
         detail: _MESSAGE_STATUS[response.status]
     };
 }
 var _getResponse = function (response) {
     debugger;
     var Message = "";
     var isShowMessage = false;
     if (response.data.Message) {
         Message = response.data.Message;
     } else {
         Message = response.data.statusText;
     }
     if (Message != "") {
         isShowMessage = true;
     }
     return {
         message: Message,
         isShow: isShowMessage,
         detail: _MESSAGE_STATUS[response.data.status]
     };
 }
 var _getFileUploadExceptionMessage = function (response) {
     var _status = 500;
     var actionMessage = "";
     if (response.ExceptionMessage) {
         actionMessage = response.ExceptionMessage;
     } else {
         actionMessage = response.Message;
     }
     if (response.ModelState) {
         actionMessage = response.Message;
         _.forEach(_.flatMap(response.ModelState), function (value) {
             actionMessage += ("<br>" + value);
         });
         _status = 400;
     }
     return {
         message: actionMessage,
         isShow: true,
         detail: _MESSAGE_STATUS[_status]
     };
 }
 objToReturn.getActionMessage = _getActionMessage;
 objToReturn.getSuccessMessage = _getSuccessMessage;
 objToReturn.getErrorMessage = _getErrorMessage;
 objToReturn.getFileUploadExceptionMessage = _getFileUploadExceptionMessage;
 objToReturn.getResponse = _getResponse;
 return objToReturn;
});

app.directive('serverSideMessage',
function () {
  return {
    template: '<div class="{{message.detail.bootstrapClass}}" ng-show="message.isShow">'
    + '<div ng-bind-html="message.message | to_trusted"  ></div>'
    + '</div>',
    restrict: 'E',
    transclude: false,
    replace:true,
    scope: {
      message: '='
    },
    link: function (scope, $element, attrs) {}
  };
});

CONTROLLER :

  $scope.serverMessage = ActionMessageService.getErrorMessage(response);

HTML VIEWS: 

 <server-side-message message='serverMessage'></server-side-message>

Comments

Popular posts from this blog

Easy Ui Jquery easyui-textbox change onChange event

Provision AWS EC2 Instance and RDS with Terraform, and Deploy Spring Boot App to EC2 Instance via GitHub Action Pipeline

npm install gets stuck at fetchMetadata