AngularJS: gerenciador de falhas global

Leia a postagem original do blog http://blog.mindcrime-ilab.de/?p=457

AngularJS é uma ótima estrutura que simplifica o desenvolvimento de aplicativos JavaScript. O exemplo a seguir mostra como configurar um manipulador de erros global para notificar o usuário sobre o estado dos aplicativos.

Para se beneficiar dos superpoderes do angulars, a parte do gerenciador de falhas global visível para o usuário é encapsulada em uma diretiva angular que é uma maneira fácil, mas poderosa, de aprimorar a nuvem de tags HTML com seus próprios componentes. Construir o manipulador envolve aproximadamente as seguintes etapas:

Nota: Para aqueles que não são fluentes em CoffeeScript, o código pode ser ‘compilado’ para JavaScript na página inicial do CoffeeScript usando a guia ‘Try CoffeeScript’.

1. Adicionar gerenciador de falhas global e método de limpeza

app.run ($rootScope, $log) ->
  ###
  # fault handler
  ###
  $rootScope.faultHandler = (data) ->
    $log.debug "[faultHandler] error data[#{data}]"
    # handle and process error data here
    # assign error message to global fault message
    $rootScope = "ERROR: #{data}"

  ###
  # clear fault
  ###
  $rootScope.clearFault = () ->
    $log.debug "[faultHandler] clearing fault[#{$rootScope.errorMessage}]"
    $rootScope.errorMessage = undefined 

1. Crie uma tag personalizada para incluir o manipulador de erros

'use strict'

angular.module('myApp')
  .directive('errorMessages', () ->
    template: "<div class='alert alert-danger' data-ng-show='errorMessage'><strong>Achtung:&nbsp;</strong><span data-ng-bind='errorMessage'></span></div>"
    restrict: 'E'
  )

1. Consulte o gerenciador de falhas

  'use strict'

angular.module('myApp')
.controller 'UserprofilCtrl', ($scope, $rootScope, $log, UserProfilService) ->
    $scope.profil = $rootScope.user

    # query userprofile by UID
    result = UserProfilService.get({id: $scope.profil.uid})

    result.$promise.then (profil) ->
      $scope.profil = profil
      $rootScope.clearFault()
    .catch $rootScope.faultHandler

1. Use-o

<!-- include the following place holder tag into your page -->
<x-error-messages></x-error-messages>