Jedidas Mora realizó la siguiente pregunta en el canal de youtube:

"quería consultarte sobre un caso de uso para los Decoradores en AngularJS, como funcionan y en que casos podria utilizarlos?"

Los decoradores en Angular JS nos permiten agregar funcionalidad extra a servicios, generalmente usamos los decoradores para extender servicios de terceros, de esta manera evitamos modificar el código original del módulo y en tiempo de ejecución agregamos el funcionamiento que necesitamos.

A continuación muestro un pequeño ejemplo de como podemos decorar un servicio de Angular Material.

angular.module('MyApp',[
  'ngMaterial'
])
.config(function($provide){
      $provide.decorator('$mdDialog', function($delegate) {
        $delegate.prompt = function(options){
           return angular.extend({
             controller : function(scope, $mdDialog){
                scope.hide = function(){
                  $mdDialog.hide();
                };
             },
             template: [
               '<md-dialog aria-label="Promp" class="md-default-theme">',
                   '<md-content class="md-default-theme">',
                     '<h2>My Prompt</h2>',
                     '<input type="text" />',
                     '<div class="md-actions">',
                       '<md-button ng-click="hide()" class="md-raised  md-primary" ng-click="showPrompt()">Ok</md-button>',
                     '</div>',
                   '</md-content>',
               '</md-dialog>'
             ].join('')
           },options);
        };
        return $delegate;
      });
})

El servicio que estamos modificando es el $mdDialog, simplemente le agregamos un nuevo método llamado prompt, este método despliega una ventana modal con una caja de texto y un botón.

Para utilizar este nuevo método creamos un controlador de la siguiente manera.

.controller('MainController',function($scope,$mdDialog){

  $scope.showAlert = function(){
     $mdDialog.show(
        $mdDialog.alert()
        .title('This is an alert title')
        .content('You can specify some description text in here.')
        .ariaLabel('Alert Dialog Demo')
        .ok('Got it!')
        .targetEvent(document.body)
    );
  };
  
  $scope.showPrompt = function(){
     $mdDialog.show(
        $mdDialog.prompt()
    );
  };
})

El método showAlert contiene código original del servicio $mdDialog, pero el método showPrompt está llamando al nuevo método que creamos con el decorador. Puedes ver el demo de este ejemplo funcionando en jsBin.

Te recomiendo ver el video completo donde encontrarás una mejor explicación.

Deja tus preguntas

Si tienes preguntas sobre Angular JS, JavaScript, CSS, HTML o cualquier otra cosa relacionado al desarrollo de software, te invito a dejar tus preguntas en el canal de youtube, cada semana intentare responder la mayor cantidad de preguntas posible.

Este es un experimento que estoy haciendo, ya veremos que sale de todo esto. Nos vemos hasta la próxima.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!