Curso de AngularJS y REST

Herramientas de usuario

Herramientas del sitio

Traza:
unidades:02_angular:08_modulos

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
unidades:02_angular:08_modulos [2014/07/24 09:29] – [Referencias] adminunidades:02_angular:08_modulos [2014/10/28 18:35] (actual) – [Varios módulos] admin
Línea 1: Línea 1:
 ====== 2.8 Modulos ====== ====== 2.8 Modulos ======
-Por ahora hemos visto unas cuantas directivas de angular ((pero aun quedan muchas por ver)), pasemos a explicar que son los módulos en AngularJS.+Por ahora hemos visto unas cuantas directivas de angular ((pero aún quedan muchas por ver)). Pasemos a explicar qué son los módulos en AngularJS.
  
 En todos los ejemplo que hemos visto ya hemos hecho uso de los módulos en AngularJS con la siguiente línea: En todos los ejemplo que hemos visto ya hemos hecho uso de los módulos en AngularJS con la siguiente línea:
Línea 8: Línea 8:
 </sxh> </sxh>
  
-Pero, ¿que es un módulo? Podríamos verlo como un paquete de Java. Es como una forma de agrupar funcionalidades de Angular. Por ejemplo podríamos crear varias directivas relacionadas con google Maps. Lo normal sería agrupar todas esas directivas en un único módulo y luego al crear nuestra aplicación decir que vamos a usar dicho módulo.+Pero, ¿qué es un módulo? Podríamos verlo como un paquete de Java. Es como una forma de agrupar funcionalidades de Angular. Por ejemplo, podríamos crear varias directivas relacionadas con google Maps. Lo normal sería agrupar todas esas directivas en un único módulo y luego al crear nuestra aplicación decir que vamos a usar dicho módulo.
  
 Sigamos viendo lo que es un módulo mediante los métodos de JavaScript que ofrece AngularJS. Sigamos viendo lo que es un módulo mediante los métodos de JavaScript que ofrece AngularJS.
Línea 21: Línea 21:
 </sxh> </sxh>
  
-Al ejecutarlo se crea el módulo "AA", aunque no contiene ninguna funcionalidad, será necesario añadirla posteriormente+Al ejecutarlo se crea el módulo "AA". Aunque no contiene ninguna funcionalidad, será necesario añadirla posteriormente.
  
-¿Porque debemos incluir los corchetes? Desgraciadamente no existe un método para obtener una referencia a un módulo y otro distinto para crear . En ambos casos se usa el método ''module''. Si incluimos un segundo parámetro con los corchetes, estamos indicando que se está creando , pero si no incluimos el segundo parámetro lo que hacemos es pedir un módulo que ya existe.+¿Por qué debemos incluir los corchetes? Desgraciadamente no existe un método para obtener una referencia a un módulo y otro distinto para crear . En ambos casos se usa el método ''module()''. Si incluimos un segundo parámetro con los corchetes, estamos indicando que se está creando , pero si no incluimos el segundo parámetro lo que hacemos es pedir un módulo que ya existe.
  
 <note warning> <note warning>
Línea 38: Línea 38:
 </sxh> </sxh>
  
-Ahora en la variable de JavaScript ''moduloAA'' tenemos una referencia al módulo llamado ''AA'', el cual existía previamente+Ahora en la variable de JavaScript ''moduloAA'' tenemos una referencia al módulo llamado ''AA'', el cual existía previamente.
  
 ==== Crear y obtener un módulo ==== ==== Crear y obtener un módulo ====
-Lo normal no es crear un módulo y luego obtener una referencia a él sino que hacerlo todo en la misma línea:+Lo normal no es crear un módulo y luego obtener una referencia a él sino hacerlo todo en la misma línea:
 <sxh js> <sxh js>
 var moduloAA=angular.module("AA",[]); var moduloAA=angular.module("AA",[]);
Línea 51: Línea 51:
  
 ===== Artefactos ===== ===== Artefactos =====
-En los módulos se puedes definir diversos artefactos ((He usado esa palabra aunque no exista en la documentación de AngularJS)) que permitirán configurar nuestra aplicación.+En los módulos se pueden definir diversos artefactos ((he usado esa palabra aunque no exista en la documentación de AngularJS)) que permitirán configurar nuestra aplicación.
  
-Un artefacto es por ejemplo una directiva o un controlador , teniendo que definir estos artefactos en módulos de AngularJS+Un artefacto es por ejemplo una directiva o un controlador , teniendo que definir estos artefactos en módulos de AngularJS.
  
 ==== Controladores ==== ==== Controladores ====
Línea 69: Línea 69:
   * Línea 3: Creamos un  controlador llamado "PruebaController", el cual añadimos al módulo ''app''.   * Línea 3: Creamos un  controlador llamado "PruebaController", el cual añadimos al módulo ''app''.
  
-El método ''controller'' acepta dos parámetros, el primero nombre del controlador y el segundo la función ((Ya veremos posteriormente como la forma correcta sería pasar un array)) con el código JavaScript del controlador.+El método ''controller'' acepta dos parámetros, el primero es el nombre del controlador y el segundo la función ((Ya veremos posteriormente como la forma correcta sería pasar un array)) con el código JavaScript del controlador.
  
 <note warning> <note warning>
 Todos los controladores que usemos en nuestra aplicación deben siempre definirse dentro de un módulo y no como funciones sueltas.  Todos los controladores que usemos en nuestra aplicación deben siempre definirse dentro de un módulo y no como funciones sueltas. 
-Esto es importante ya que a partir de la versión **1.3** de AngularJS no funcionaran los controladores que no estén dentro de un módulo+É es importante ya que a partir de la versión **1.3** de AngularJS no funcionarán los controladores que no estén dentro de un módulo.
 </note> </note>
  
Línea 85: Línea 85:
 </sxh> </sxh>
  
-Ya veremos mas adelante como crear nuevas directivas pero por ahora simplemente recordar que al igual que los controladores, las directivas deben añadirse a un módulo.+Ya veremos más adelante cómo crear nuevas directivas pero por ahora simplemente recordad que al igual que los controladores, las directivas deben añadirse a un módulo.
 ==== Otros artefactos ==== ==== Otros artefactos ====
 Hasta ahora hemos visto que AngularJS dispone de 2 artefactos : Hasta ahora hemos visto que AngularJS dispone de 2 artefactos :
Línea 101: Línea 101:
   * Etc.   * Etc.
  
-Es decir y para acabar con la explicación de que es un módulo: +Es decir y para acabar con la explicación de qué es un módulo: 
  
 //Un módulo es donde se añaden los distintos artefactos que usaremos en nuestra aplicación.// //Un módulo es donde se añaden los distintos artefactos que usaremos en nuestra aplicación.//
Línea 112: Línea 112:
 En cualquier aplicación que desarrollemos acabaremos organizando nuestro código en distintos módulos o usando [[http://ngmodules.org/|módulos de terceros]]. En cualquier aplicación que desarrollemos acabaremos organizando nuestro código en distintos módulos o usando [[http://ngmodules.org/|módulos de terceros]].
  
-¿como indicamos que AngularJS debe cargar el código de los otros módulos? Es decri, ¿como le decimos que nuestro módulo depende de otros módulos? Por fin vamos a explicar el significado de los corchetes al crear un módulo. Si sabes algo de JavaScript ya habrás deducido que los 2 corchetes corresponden a un array vacio. Pero, ¿que significado tiene dicho array? Pues son la lista de nombre de módulos de los que dependemos.+¿Cómo indicamos que AngularJS debe cargar el código de los otros módulos? Es decir, ¿cómo le decimos que nuestro módulo depende de otros módulos? Por fin vamos a explicar el significado de los corchetes al crear un módulo. Si sabes algo de JavaScript ya habrás deducido que los 2 corchetes corresponden a un array vacío. Pero, ¿qué significado tiene dicho array? Pues son la lista de nombre de módulos de los que dependemos.
  
 Veamos un ejemplo: Veamos un ejemplo:
Línea 127: Línea 127:
   * Línea 4: Se crea el módulo "app" pero indicamos que depende de los módulos "A" y "B".   * Línea 4: Se crea el módulo "app" pero indicamos que depende de los módulos "A" y "B".
  
-¿que implicaciones tiene  que el módulo "app" dependa de los módulos "A" y "B"? +¿Qué implicaciones tiene  que el módulo "app" dependa de los módulos "A" y "B"? 
  
-AngularJS por defecto solo nos permite usar los artefactos que hemos definido en nuestro módulo principal es decir en el que hemos indicado en la directiva ''ng-app'' en el tag ''<html>'' que en nuestros ejemplos es el módulo ''app''. El resto de módulo aunque los creemos no se podrán utilizar ya que no dependen del módulo principal. Por ello la dependencia de módulos permite que podamos usar los artefactos de otros módulos.+AngularJS por defecto sólo nos permite usar los artefactos que hemos definido en nuestro módulo principal ,es decir, en el que hemos indicado en la directiva ''ng-app'' en el tag ''<html>'' que en nuestros ejemplos es el módulo ''app''. El resto de módulos aunque los creemos no se podrán utilizar ya que el módulo principal no depende de ellos. Por ello la dependencia de módulos permite que podamos usar los artefactos de otros módulos.
  
 ==== Transitividad ==== ==== Transitividad ====
Línea 146: Línea 146:
   * Línea 3: El módulo "A" ahora depende del módulo "T"   * Línea 3: El módulo "A" ahora depende del módulo "T"
  
-Ahora el módulo "app" depende de los módulos "A" y "B" pero el módulo "A" a su vez depende del módulo "T". ¿Que implica ésto? Que en nuestra aplicación podremos usar cualquier artefacto definido en los módulos "app", "A", "B" y "T".+Ahora el módulo "app" depende de los módulos "A" y "B" pero el módulo "A" a su vez depende del módulo "T". ¿Qué implica ésto? Que en nuestra aplicación podremos usar cualquier artefacto definido en los módulos "app", "A", "B" y "T".
 ==== Carga de módulos ==== ==== Carga de módulos ====
 Llegados a este punto , parece que los módulos son una cosa muy útil para organizar nuestro código JavaScript y con las relaciones transitivas nos podemos ahorrar mucho trabajo. Llegados a este punto , parece que los módulos son una cosa muy útil para organizar nuestro código JavaScript y con las relaciones transitivas nos podemos ahorrar mucho trabajo.
  
-Pero hay un asunto en el que no habrás caído , para que funciones todo ésto, todo el código JavaScript debe estar cargado en la página. ¿Como? Si, te estoy diciendo que aun debes seguir añadiendo manualmente todos tus ficheros "js" con todo el código JavaScript.+Pero hay un asunto en el que no habrás caído: para que funcione todo ésto, todo el código JavaScript debe estar cargado en la página. ¿Cómo? Sí, te estoy diciendo que aún debes seguir añadiendo manualmente todos tus ficheros "js" con todo el código JavaScript.
  
 AngularJS no va a ahorrarte cosas como lo siguiente: AngularJS no va a ahorrarte cosas como lo siguiente:
Línea 161: Línea 161:
 </sxh> </sxh>
  
-Es decir , suponiendo que cada módulo y todos sus artefactos están en un único fichero , deberemos cargar los 4 ficheros explicitamente en el ''index.html''.  :-(+Es decir , suponiendo que cada módulo y todos sus artefactos están en un único fichero , deberemos cargar los 4 ficheros explícitamente en el ''index.html''.  :-(
  
-Sin embargo , aunque AngularJS no tenga nada referido a la carga de ficheros JavaScript si que hay otros proyectos que pueden ayudarnos como:+Sin embargo , aunque AngularJS no tenga nada referido a la carga de ficheros JavaScript sí hay otros proyectos que pueden ayudarnos como:
   * [[http://requirejs.org/|RequireJS]]   * [[http://requirejs.org/|RequireJS]]
   * [[https://github.com/hansl/angularjs-loader|angularjs-loader]]   * [[https://github.com/hansl/angularjs-loader|angularjs-loader]]
  
-Aunque hay que tomarlos con cautela ya que aun no hay una solución definitiva a la carga de ficheros JavaScript+Aunque hay que tomarlos con cautela ya que aún no hay una solución definitiva a la carga de ficheros JavaScript.
  
 <note warning> <note warning>
-Recuerda que siempre debes cargar  todos los ficheros JavaScript con la etiqueta ''<script>'', AngularJS no se encarga de ello aunque crees las relaciones entre los módulos.+Recuerda que siempre debes cargar  todos los ficheros JavaScript con la etiqueta ''<script>''. AngularJS no se encarga de ello aunque cree las relaciones entre los módulos.
 </note> </note>
  
 ==== Varios módulos ==== ==== Varios módulos ====
-Entonces , ¿Para que sirve tener más de un módulo? +Entonces , ¿para qué sirve tener más de un módulo? Si estás haciendo una librería JavaScript con artefactos de Angular , como por ejemplo directivas para usar Google Maps en AngularJS debes de añadirlas a un módulo y como no puedes saber el nombre del módulo de la aplicación principal deberás crearte tu propio módulo. Éste es el primer motivo para crear nuevos módulos. Por otro lado dentro del código de la propia aplicación, ¿tiene sentido tener varios módulos? Discutiremos éste tema en [[unidades:15_avanzado:01_ficheros#unico_modulo|Único módulo]]
  
-Si estás haciendo una librería JavaScript con artefactos de Angular , como por ejemplo directivas para usar Google Maps en AngularJS debes de añadirlas a un módulo y como no puedes saber el nombre del módulo de la aplicación principal deberás crearte tu propio módulo. +<note tip> 
- +La mayor utilidad de los módulos es si está haciendo una librería que será usada por terceros. 
-Este es el primer motivo para crear nuevos módulos.  +</note>
- +
-Por otro lado dentro del código de la propia aplicación, ¿tiene sentido tener varios módulos? Mas adelante discutiremos este punto.+
  
 ===== Espacio de nombres ===== ===== Espacio de nombres =====
 Una última característica de los módulos es el espacio de nombres. Hemos visto que al añadir un controlador a un módulo le indicamos su nombre, pues bien. Para AngularJS da igual el módulo en el que definamos el controlador, siempre nos referiremos a él por su nombre independientemente del módulo en el que se haya definido. Una última característica de los módulos es el espacio de nombres. Hemos visto que al añadir un controlador a un módulo le indicamos su nombre, pues bien. Para AngularJS da igual el módulo en el que definamos el controlador, siempre nos referiremos a él por su nombre independientemente del módulo en el que se haya definido.
  
-Esto tiene la ventaja de que no debemos preocuparnos por saber en que módulo se definió el controlador (o cualquier otro artefacto) pero la parte negativa es que no podremos tener 2 controladores con el mismo nombre aunque estén en distintos módulos. Por lo tanto en un equipo grande de desarrollo se deberán coordinar los nombres de todos los artefactos de AngularJS.+Ésto tiene la ventaja de que no debemos preocuparnos por saber en qué módulo se definió el controlador (o cualquier otro artefacto) pero la parte negativa es que no podremos tener 2 controladores con el mismo nombre aunque estén en distintos módulos. Por lo tanto en un equipo grande de desarrollo se deberán coordinar los nombres de todos los artefactos de AngularJS.
  
 <note tip> <note tip>
Línea 270: Línea 268:
 </sxh> </sxh>
  
-  * Línea 3: Vemos como el controlador ya no es una función con nombre sino que ahora es una función anónima que se pasa al método ''controller'' junto con el nombre del controlador que sigue siendo ''SeguroController''. Es decir que ahora el controlador se define dentro del módulo.+  * Línea 3: Vemos cómo el controlador ya no es una función con nombre sino que ahora es una función anónima que se pasa al método ''controller'' junto con el nombre del controlador que sigue siendo ''SeguroController''. Es decir que ahora el controlador se define dentro del módulo.
  
  
unidades/02_angular/08_modulos.1406186955.txt.gz · Última modificación: por admin