Agenda

  • Services, Factories y Providers
  • Decoradores
    • Patron Decorador
  • Directivas
    • ¿Qué es una directiva en Angular?
    • Directivas nativas
    • Directivas propias o de terceros
      • Tipos
      • Scope
      • Link

Factories & Services

http://jsfiddle.net/mravinale/tehwjpt5/

//objeto singleton inyectable
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!"
    };
});

//creacion de nuevas instancioas
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!"
        }
    };
});

Providers

http://jsfiddle.net/mravinale/tehwjpt5/

//factory configurable    
myApp.provider('helloWorld', function() {

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!"
            }
        }
    };

    this.setName = function(name) {
        this.name = name;
    };
});
          
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});

Patron decorador

Wikipedia

Decorador en angular

odetocode.com/blogs/scott/archive/2013/06/06/decorating-angularjs-services.aspx​

$provide.decorator("$exceptionHandler", function($delegate, $injector){
        return function(exception, cause){
            //modify the behavior before invoke
 
            $delegate( exception , cause);
 
        };
    });

Ejemplo en Blog-Mean

https://github.com/makingsensetraining/blog-example

¿Qué es una directiva?

Es un componente utilizado en el HTML y se la puede asignar a cualquier etiqueta por medio de atributos.


Cuando se ejecuta una app Angular, existe un "HTML Compiler" que se encarga de recorrer el documento, localizar las directivas que se hayan utilizado y las ejecuta.

Directivas nativas

  • ngApp: Indica cual es el elemento raíz de la aplicación
  • ngModel: Informa al "HTML Compiler" que estás usando una variable del modelo.
  • ngController: Relación entre un controlador y una vista
  • ngShow / ngHide: Oculta o muestra un elemento del HTML en base a una expresión
  • muchas más...

Ejemplo

/*SCRIPT.JS*/

angular.module('inputExample', [])
    .controller('PersonController', ['$scope', function($scope) {
        $scope.personas = 5;
    }]);
<!--INDEX.HTML-->

<body ng-app="inputExample">
    <form name="formulario" ng-controller="PersonController">
        <input type="text" name="personas" ng-model="personas" /><br/>
        <span ng-show="personas">Número de personas: {{personas}}</span>
    </form>
</body>
Número de personas: 5
5

Output:

JSFiddle

Directivas propias/terceros

/*SCRIPT.JS*/

angular.module('inputExample', [])
    .controller('personController', ['$scope', function($scope) {
        $scope.person = {
            firstName: 'Mariano',
            lastName: 'Ravinale'
        };
    }])
    .directive('myPerson', function() {
      return {
        templateUrl: 'my-person.html'
      };
    });
<!--INDEX.HTML-->

<div ng-controller="personController">
    <div my-person></div>
</div>
<!--MY-PERSON.HTML-->

FirstName: {{person.firstName}} <br /> LastName: {{person.lastName}}
JSFiddle

Tipos

Hay 4 tipos de directivas que podemos crear

  • E (Elemento)
  • A (Atributo)
  • M (Comentario)
  • C (Clase)

También se pueden combinar entre ellos como por ejemplo "AE" y de esta forma la directiva la podemos usar tanto como un tag HTML o como un atributo dentro de una etiqueta.

Para esto, dentro de la directiva podemos agregar el parámetro "restrict"

<my-person></my-person>

<span my-person></span>

<!-- directive: my-person -->

<span class="my-person"></span>

Tipos

/*SCRIPT.JS*/

angular.module('inputExample', [])
    .controller('personController', ['$scope', function($scope) {
        $scope.person = {
            firstName: 'Mariano',
            lastName: 'Ravinale'
        };
    }])
    .directive('myPerson', function() {
      return {
        restrict: 'E',
        templateUrl: 'my-person.html'
      };
    });
<!--INDEX.HTML-->

<div ng-controller="personController">
    <my-person></my-person>
</div>
<!--MY-PERSON.HTML-->

FirstName: {{person.firstName}} <br /> LastName: {{person.lastName}}
JSFiddle

Scope

El scope de la directiva es el scope del controller de esta directiva.

Si queremos separar los scope, podemos usar la opción "scope" dentro de la directiva y recibir los datos por parámetro.

Esta es una buena práctica para que la directiva se pueda reutilizar.

/*SCRIPT.JS*/

angular.module('inputExample', [])
    .controller('personController', ['$scope', function($scope) {
        $scope.person = {
            firstName: 'Mariano',
            lastName: 'Ravinale'
        };
    }]);

angular.module('inputExample', [])
    .directive('myPerson', function() {
      return {
        restrict: 'E',
        scope: {
            p: '=personData' /* si el parámetro se llama info, acá usaríamos '=info' */
        },
        templateUrl: 'my-person.html'
      };
    });
<!--INDEX.HTML-->

<div ng-controller="personController">
    <my-person person-data="person"></my-person>
</div>

Scope

JSFiddle

Link

Si queremos hacer cambios dinámicamente en el DOM desde una directiva tenemos que hacerlo a través de la opción "link" y es una función de este tipo:

function link(scope, element, attrs) { ... }
/*SCRIPT.JS*/

angular.module('example', [])
    .directive('myColor', function() {
      return {
        restrict: 'AE',
        link: function(scope, element, attrs){
          var htmlColor;
          switch (attrs.color) {
            case "rojo":
                htmlColor="#FF0000";
                break;
            case "verde":
                htmlColor="#00FF00";
                break;
            default:
                htmlColor="#000000";
                break;
          }
          element.css("color",htmlColor);
        }
      };
    });

Ejemplo

<!--INDEX.HTML-->

<div ng-controller="personController">
    <div my-color color="verde">Color</div>
</div>
JSFiddle

Ejemplo Mean-Seed

Made with Slides.com