Programación Funcional y Scripting

Proveedores y Directivas

Proveedores

  • Value
  • Factory
  • Service
  • Provider
  • Constant
var myApp = angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x');
myApp.factory('apiToken', ['clientId', 
    function apiTokenFactory(clientId) {

  var encrypt = function(data1, data2) {
    // NSA-proof encryption algorithm:
    return (data1 + ':' + data2).toUpperCase();
  };

  var secret = window.localStorage
                     .getItem('myApp.secret');
  var apiToken = encrypt(clientId, secret);

  return apiToken;
}]);
function UnicornLauncher(apiToken) {

  this.launchedCount = 0;
  this.launch = function() {
    // Make a request to the 
    //remote API and include the apiToken
    ...
    this.launchedCount++;
  }
}

myApp.service('unicornLauncher', [
    "apiToken", 
    UnicornLauncher
]);
myApp.provider('unicornLauncher', 
    function UnicornLauncherProvider() {

  var useTinfoilShielding = false;

  this.useTinfoilShielding = function(value) {
    useTinfoilShielding = !!value;
  };

  this.$get = ["apiToken", 
      function unicornLauncherFactory(apiToken) {

    return new UnicornLauncher(apiToken, 
                           useTinfoilShielding);
  }];
});
myApp.constant('planetName', 'Greasy Giant');

Directivas

  • Son marcadores en el DOM, que le indican al compilador de HTML de Angular que inyecten comportamiento a un elemento.
  • Tipos de directivas:
    • Definidas como elemento (<mi-directiva></mi-directiva>)
    • Definidas como atributos (<div mi-directiva="val"></div>)
    • Definidas como clase (<img class="mi-directiva: val"/>)
  • La declaración de una directiva debería retornar un objeto con las diferentes opciones que le digan a $compile como debería comportarse la directiva.

Directivas

template y templateUrl (opcionales)

angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

Definen el HTML que representa a esta directiva.

Directivas

restrict (opcional)

angular.module('docsRestrictDirective', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    templateUrl: 'my-customer.html'
  };
});

Define el tipo de directiva que vamos a crear

  • 'A' Sólo como atributo
  • 'E' Sólo como elemento
  • 'C' Sólo como clase

Por defecto, el valor es 'AE'

Directivas

scope (opcional)

angular.module('docsRestrictDirective', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerInfo: '=info'
    },
    templateUrl: 'my-customer-iso.html'
  };
});

Permite encapsular el scope de la directiva.

Directivas

link (opcional)

Se utiliza cuando la directiva va a manipular el DOM.

link debe ser una función del siguiente tipo:

function link(scope, element, attrs, controller, transcludeFn) { ... }

Directivas

link (opcional)

angular.module('docsRestrictDirective', [])
.directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {

  function link(scope, element, attrs) {
    var format,
        timeoutId;

    function updateTime() {
      element.text(dateFilter(new Date(), format));
    }

    scope.$watch(attrs.myCurrentTime, function(value) {
      format = value;
      updateTime();
    });

    element.on('$destroy', function() {
      $interval.cancel(timeoutId);
    });

    // start the UI update process; save the timeoutId for canceling
    timeoutId = $interval(function() {
      updateTime(); // update DOM
    }, 1000);
  }

  return {
    link: link
  };
}]);

Directivas

transclude (opcional)

angular.module('docsTransclusionDirective', [])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    templateUrl: 'my-dialog.html'
  };
});

Permite obtener el contenido de la directiva, y colocarlo en otra parte específica (indicada con la directiva ng-transclude dentro de nuestro template)

<div class="alert" ng-transclude>
</div>

Ejercicio

  • Crear un Provider que realice operaciones matemáticas y números aleatorios.
  • A dicho provider se le debe poder configurar las operaciones válidas (por defecto todas).
  • Crear una directiva de tipo atributo, que provoque que al hacer click sobre el elemento cambie background a un color aleatorio (utilizar el provider).
  • Crear una directiva de tipo elemento, que escriba un encabezado cuyo valor fue pasado como atributo, y que encierre el contenido del mismo en un div con bordes, pero el encabezado y los bordes sólo deben ser visibles cuando paso el mouse por arriba del elemento.
Made with Slides.com