Introducción a Angular JS

¿Qué son los decoradores? Más videos

Descripción del tema

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!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

1Comentario

  • Avatar-6 luis 26/10/2015

    Hola, quisiera saber si es posible aplicar un decorador en base a una funcion if. poco un ejemplo. Tengo 2 decoradores en mi app.config pero cada uno esta evaluado por un if esperando un true, si el usuario abre un modal. se acciona un disparador y cambia el valor en true y el decorador se activa , se que una vez cargada la vista no se puede modificar el config hasta recargar la pagina

    Instructor del curso

    Crysfel3

    Autor: Crysfel Villa

    Ha participado en varios proyectos con Angular y es participante activo del grupo de Angular NYC.

    Descarga video Ver Demostración

    Regístrate a este curso

    Este tutorial pertenece al curso Introducción a Angular JS, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

    Tendrás acceso a descargar los videos, códigos y material adicional.

    Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

    Llevarás un registro de tu avance.