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

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

JQuery UI Autocomplete, custom HTML structure for result?

Easy Ui Jquery easyui-textbox change onChange event