Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:09_directivas:01_introduccion [2014/08/28 14:41]
admin [Nombre]
unidades:09_directivas:01_introduccion [2014/10/28 17:05] (actual)
admin [Prefijos en Directivas]
Línea 25: Línea 25:
 Etc. , etc. Etc. , etc.
  
 +
 +====== Características ======
 Pasemos ahora a ver alguna característica de las directivas Pasemos ahora a ver alguna característica de las directivas
  
-===== Formas ​=====+==== Formas ====
 Lo primero que hemos notado es que hemos usado una directiva como un atributo, como en ''​ca-fecha''​ pero también se puede hace como si fuera directamente un nuevo tag HTML , como en ''​ca-paginacion''​. ​ Lo primero que hemos notado es que hemos usado una directiva como un atributo, como en ''​ca-fecha''​ pero también se puede hace como si fuera directamente un nuevo tag HTML , como en ''​ca-paginacion''​. ​
  
 AngularJS permite ambas formas e incluso como clases CSS y como comentarios ((En Angular 1.2 ya no se permite)), pero es tan raro que mejor ni hablar de ellas. Así que a efectos prácticos una directiva se puede usar como: AngularJS permite ambas formas e incluso como clases CSS y como comentarios ((En Angular 1.2 ya no se permite)), pero es tan raro que mejor ni hablar de ellas. Así que a efectos prácticos una directiva se puede usar como:
-  * Un atributo: Se pone como un atributo de un tag +  * Un atributo: Se pone como un atributo de un elemento HTML
 <sxh html> <sxh html>
 <input ng-model="​fechaNacimiento"​ ca-fecha>​ <input ng-model="​fechaNacimiento"​ ca-fecha>​
 </​sxh>​ </​sxh>​
-  * Un tag: Es directamente un nuevo tag pero tiene la desventaja que en versiones antiguas de Internet Explorer puede dar problemas+  * Un Elemento o tag: Es directamente un nuevo elemento o tag pero tiene la desventaja que en versiones antiguas de Internet Explorer puede dar problemas
 <sxh html> <sxh html>
 <​ca-paginacion numero-paginas="​10"></​ca-paginacion>​ <​ca-paginacion numero-paginas="​10"></​ca-paginacion>​
 </​sxh>​ </​sxh>​
  
-===== Prefijos en Directivas ​===== +==== Prefijos en Directivas ==== 
-El equipo de Angular recomienda que las directivas tengan siempre un prefijo de forma que no choquen con otras directivas creadas ​pro otros desarrolladores. Por eso las directivas de AngularJS empiezan siempre por "​ng"​. En las directivas que creemos en este curso siempre empezaran por "​ca"​ por "Curso de Angular"​.+El equipo de Angular recomienda que las directivas tengan siempre un prefijo de forma que no choquen con otras directivas creadas ​por otros desarrolladores ​o con actuales o futuras etiquetas de HTML. Por eso las directivas de AngularJS empiezan siempre por "​ng"​. En las directivas que creemos en este curso siempre empezaran por "​ca"​ por "Curso de Angular"​.
  
 Ejemplos: Ejemplos:
   * ''​ng-view''​ : Prefijo ''​ng''​ para indicar que es una directiva estándar de AngularJS   * ''​ng-view''​ : Prefijo ''​ng''​ para indicar que es una directiva estándar de AngularJS
   * ''​ng-repeat''​ : Prefijo ''​ng''​ para indicar que es una directiva estándar de AngularJS   * ''​ng-repeat''​ : Prefijo ''​ng''​ para indicar que es una directiva estándar de AngularJS
-  * ''​ca-paginacion''​ : Prefijo ''​ca''​para indicar que es una directiva creada en el Curso de AngularJS+  * ''​ca-paginacion''​ : Prefijo ''​ca''​ para indicar que es una directiva creada en el Curso de AngularJS
   * Etc.   * Etc.
  
-===== Nombre ​=====+==== Nombre ====
 Hasta ahora hemos visto los nombres de las directivas con guiones para separar palabras. Hasta ahora hemos visto los nombres de las directivas con guiones para separar palabras.
  
Línea 62: Línea 64:
  
 Ej: Ej:
-  * ''​ng-repeat'' ​ -> ''​ngRepeat''​ +  * ''​ng-repeat'' ​ -> **''​ngRepeat''​** 
-  * ''​ng-if'' ​ -> ''​ngIf''​ +  * ''​ng-if'' ​ -> **''​ngIf''​** 
-  * ''​ca-paginacion'' ​ -> ''​caPaginacion''​ +  * ''​ca-paginacion'' ​ -> **''​caPaginacion''​** 
-  * ''​ca-tabs-vertical'' ​ -> ''​caTabsVertical''​+  * ''​ca-tabs-vertical'' ​ -> **''​caTabsVertical''​**
   * Etc.   * Etc.
  
-Es decir el nombre de las directivas sigue el formato de los identificadores en JavaScript.+Es decir el nombre de las directivas sigue el formato de los identificadores en JavaScript. Ese es el nombre que se usa en la documentación de AngularJS cuando se refieren a una directiva y el que usemos cuando creemos una nueva directiva.
  
-Y dado el nombre de la directiva tal y como se ve en JavaScript se puede usar en la página HTML siguiendo las siguientes reglas:+ 
 +==== Variaciones del nombre en HTML ==== 
 +Dado el nombre de la directiva tal y como se ve en JavaScript se puede usar en la página HTML siguiendo las siguientes reglas:
   * Añadir el prefijo ''​data-''​ o ''​x-''​ para que los validadores HTML sepan que es una directiva propia nuestra.   * Añadir el prefijo ''​data-''​ o ''​x-''​ para que los validadores HTML sepan que es una directiva propia nuestra.
   * Separar cada palabra con algunos de los siguientes caracteres "​-"​ , ":"​ o "​_"​.   * Separar cada palabra con algunos de los siguientes caracteres "​-"​ , ":"​ o "​_"​.
Línea 79: Línea 83:
   * ''​ng_view''​   * ''​ng_view''​
   * ''​data-ng-view''​   * ''​data-ng-view''​
 +  * ''​data-ng:​view''​
 +  * ''​data-ng_view''​
   * ''​x-ng-view''​   * ''​x-ng-view''​
 +  * ''​x-ng:​view''​
 +  * ''​x-ng_view''​
 +
 +Aunque lo normal es restringirse solo a las siguientes formas.
 +  * ''​ng-view''​
 +  * ''​data-ng-view''​
 +
 +===== Creando una directiva =====
 +Para crear una directiva debemos definirla dentro de un módulo al igual que hacíamos para los controladores,​ filtros, etc. 
 +
 +El método a usar del módulo es ''​directive(nombre,​funcionFactory)''​ siendo:
 +  * ''​nombre'':​ El nombre de la directiva siguiendo el forma de los identificadores de JavaScript.
 +  * ''​funcionFactory'':​ Es una función que nos retorna un [[https://​docs.angularjs.org/​api/​ng/​service/​$compile#​directive-definition-object|objeto con la definición de la directiva]]. Como todas las funciones factory puede ser un array para poder inyectarle dependencias.
 +
 +El objeto con la definición de la directiva es el verdadero objeto que contiene toda la información de nuestra directiva y comprender todas sus propiedades implicaría saber todo sobre las directivas así que en esta unidad solo vamos a ver unas cuantas propiedades del [[https://​docs.angularjs.org/​api/​ng/​service/​$compile#​directive-definition-object|objeto con la definición de la directiva]].
 +
 +En esta unidad solo vamos a ver las siguientes propiedades:​
 +
 +<uml>
 +class DefinicionDirectiva {
 +String template
 +String templateUrl
 +String restrict
 +boolean replace
 +boolean|Object scope
 +Function link
 +}
 +</​uml>​
 +
 +En este tema solo vamos a ver las siguientes propiedades:​
 +  * ''​template''​ :  Es un String con el HTML por el que se substituira la directiva. Si está esta propiedad no puede estar ''​templateUrl''​ ya que son excluyentes.
 +  * ''​templateUrl''​ : Es un String con una URL de un fichero que contiene el HTML por el que se substituira la directiva. Si está esta propiedad no puede estar ''​template''​ ya que son excluyentes.
 +  * ''​restrict'':​ Un String ​ que indica como puede usarse la directiva si como atributo o como elemento
 +    * Si vale "​E"​ solo se podrá usar como elemento
 +    * Si vale "​A"​ solo podrá usarse como atributo
 +    * Si vale "​EA"​ o "​AE"​ se podrá usar como elemento y como atributo. Este es el funcionamiento por defecto si no se pone nada en la propiedad ''​restrict''​.
 +  * ''​replace''​ : Si vale ''​false''​ el contenido del //​template//​ se añadirá dentro del tag de la propia directiva. Pero si vale ''​true''​ se quitará el tag de la directiva y solo estará el contenido del //​template//​.
 +<​note>​En los 2 temas siguientes veremos las propiedades ''​link''​ y ''​scope''​.</​note>​
 +
 +==== Ejemplo ====
 +Vamos a hacer nuestra primera directiva llamada "​acTitulo"​ que simplemente muestre el texto "Hola Mundo" como título ''<​h1>''​.
 +
 +<sxh js;​highlight:​ [1,​3,​4,​5,​6,​9]>​
 +app.directive("​acTitulo",​[function() {
 +  ​
 +  var directiveDefinitionObject ={
 +    restrict:"​E",​
 +    replace : true,
 +    template:"<​h1>​Hola Mundo</​h1>"​
 +  }
 +  ​
 +  return directiveDefinitionObject;​
 +}]);
 +</​sxh>​
 +  * Línea 1: Creamos la directiva de nombre "​acTitulo"​ y como segundo parámetro está la función factory.
 +  * Línea 3: Creamos el objeto ''​directiveDefinitionObject''​ que contendrá la  definición de la directiva
 +  * Línea 4: Al valer la propiedad ''​replace''​ el valor de ''​true''​ se eliminará de la página el tag de la propia directiva y solo estará el contenido del //​template//​.
 +  * Línea 5: Indicamos mediante la propiedad ''​restrict''​ que el elemento solo puede ser un elemento o tag y no pude estar como atributo de otro elemento o tag.
 +  * Línea 8: Retornamos el objeto con la definición de la directiva.
 +
 +
 +Usaremos la directiva de la siguiente forma:
 +<sxh html>
 +<​ac-titulo></​ac-titulo>​
 +</​sxh>​
 +
 +Y la directiva generará el siguiente HTML
 +<sxh html>
 +<​h1>​Hola Mundo</​h1>​
 +</​sxh>​
 +
 +Si el valor de ''​replace''​ hubiera sido ''​false''​ se hubiera generado el siguiente HTML:
 +<sxh html>
 +<​ac-titulo>​
 +    <​h1>​Hola Mundo</​h1>​
 +</​ac-titulo>​
 +</​sxh>​
  
 +<note tip>Por último destacar que el template solo puede tener un tag raiz , si queremos que la directiva tenga varios tags //​hernamos//​ deberemos ponerlos todos dentro de un nuevo tag</​note>​
 +===== Ejemplo =====
  
 +{{url>​http://​embed.plnkr.co/​pzgW2S}}
  
 +===== Referencias =====
 +  * [[https://​docs.angularjs.org/​api/​ng/​service/​$compile#​directive-definition-object|/​ API Reference / ng / service / $compile / Directive Definition Object]]
 +  * [[https://​docs.angularjs.org/​guide/​directive|/​ Developer Guide / Directives]]
 +  * [[https://​docs.angularjs.org/​api/​ng/​type/​angular.Module|/​ API Reference / ng / type / angular.Module]]
unidades/09_directivas/01_introduccion.1409229710.txt.gz · Última modificación: 2014/08/28 14:41 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0