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 18:01]
admin [Variaciones del nombre en HTML]
unidades:09_directivas:01_introduccion [2014/10/28 17:05] (actual)
admin [Prefijos en Directivas]
Línea 33: Línea 33:
  
 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>​
Línea 43: Línea 43:
  
 ==== 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.
  
Línea 94: Línea 94:
  
 ===== Creando una directiva ===== ===== Creando una directiva =====
-Para crear una directiva debemos definirla dentro de un módulo al igula que hacíamos para los controladores,​ filtros, etc. +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)''​+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.1409241675.txt.gz · Última modificación: 2014/08/28 18:01 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