Creando widgets reusables en AngularJs

¿Qué es una directiva? Las directivas de Angular son componentes muy poderosos. Tienen la capacidad de controlar cómo se renderiza la página en muchas maneras diferentes, muchos de los tags y atributos que vienen incluidos con Angular son directivas. Una de las maneras en que podemos usarlas es creando widgets HTML. Éstos van a tener un propósito específico y también debemos intentar que sean los más independientes posibles para que de esta forma, con tan solo consumir algunos parámetros logramos tener un componente independiente, testeable y reusable.

¿Cómo se escribe y cómo se usa una directiva?


app.directive('domManipulation', function () {

return {

link: function ($scope, element, attrs) {

element.bind('click', function () {

element.html('Click detected!');

});

element.bind('mouseenter', function () {

element.css('background-color', 'orange');

});

element.bind('mouseleave', function () {

element.css('background-color', 'white');

});

}

};

});

Por medio de “directive” le definimos una directiva a nuestra aplicación. Directive soporta la siguiente lista de opciones:

-Restrict: determina si la directiva se puede usar por medio de un elemento “E”, un atributo “A”, una clase de CSS “C” o como comentario “M”.

-Scope: utilizar el scope padre o utilizar un nuevo scope.

-Template: define el contenido que tendrá como salida la directiva, puede ser HTML, expresiones u otra directiva.

-TemplateUrl: ubicación al template HTML.

-Controller: para definir un controller que estaría asociado a la directiva.

-Link: función utilizada para las manipulaciones de DOM y que tiene acceso a un scope a diferencia de compile.

-Replace: si queremos o no reemplazar el HTML que invoca nuestra directiva.

En el ejemplo anterior por medio de “link” estamos haciendo que el DOM cambie.

¿Cómo usamos la directiva?

</pre>
<div>Click! aca!</div>
<pre>

Eso es todo cuando el mouse pase por nuestro tag, nuestro componente actuará como lo definimos en la directiva. Para más detalles sobre las directivas se puede consultar la documentación oficial de Angular. Widgets reusables Ya vimos cómo es una directiva, las opciones que soporta y cómo usarla pero ahora veamos un ejemplo un poco más útil de lo que significa un widget reusable: Un ejemplo puede ser un form, ya que es algo que utilizamos muy seguido en una aplicación web y suele llevar a mucha repetición de código. Ahora, ¿qué tal si tuviéramos un widget que sea reutilizable, testeable y que sea simple?, de esta manera usando una única porción de HMTL podríamos resolver todos los forms de la aplicación.


mainModule.directive('myFormDirective', function () {

return {

restrict: 'EC',

templateUrl: '/someUrlToTemplate/form.html',

scope: {

formItems: '='

}

};

});

En este caso tenemos nuestra directiva definida con un sub scope (isolated scope), esto es importante para lograr que el widget sea independiente y no esté acoplado a nada, algo clave para lograr la reutilización. Definimos la variable “formItems” con el símbolo “=”, para lograr el bindeo, la cual creará un array de elementos. Estos serán nuestros campos definidos, que definiremos donde sea que lo utilicemos. El template de la directiva será:

</pre>
<div>
<div><input type="text" data-ng-model="formItem.content" />

<input type="number" data-ng-model="formItem.content" />

<input type="checkbox" data-ng-model="formItem.content" />
<select class="formItem.selectedClass" data-ng-model="formItem.content"></select></div>
<div></div>
</div>
<pre>

Como pueden ver iteramos por los elementos de “formItems” y dependiendo cada caso rederizamos. Por último para utilizar esta directiva solo tenemos que hacer lo siguiente:

</pre>
<div class="”my-form-directive”"></div>
<pre>

En este caso someController es nuestro controlador, cuyo scope contiene los elementos y esos elementos tendrán un formato como cualquier array JSON.


var elements = [{type: ‘text’, selectedClass: ‘someClass’, content: {}}];

En conclusión, en cada controller solo definimos los elementos que queremos tener en nuestro form y con una sola línea de HTML estaremos generando el form y reutilizando el único template. Esto hace que sea fácil de testear y en caso de que lo modifiquemos será igual en todos lados.

Esten atentos, proximamente estaremos mostrando cómo podemos testear estos widgets reusables.

Facebook Twitter Linkedin Mail BVision