miércoles, 30 de julio de 2014

Inyectar una función con Angular



En este blog vamos a demostrar el mecanismo dependency injection por medio del servicio factory pasando su contenido a una variable de un modulo externo y  por medio de ésta desplegarlo finalmente en una página html.

Para ello necesitamos crear dos archivos llamados index.html y angular.js  de los cuales index.html solo contendrá la estructura básica de una página html, y el otro archivo contendrá el código en angular.


En el archivo angular.js se agrega el modulo que será llamado en la página principal y dentro de éste se crea una variable llamada mensajeUno la cual mostrará un mensaje en la página html. Asi:


El nombre del modulo es moduloUno y su controlador se identifica como control, dentro de éste se crea una función anónima en la cual se declara la variable mensajeUno donde ésta recibe una cadena de texto.

A continuación se crea otro modulo llamado moduloDos el cual retorna una cadena por medio del servicio factory llamado funcionf:



Ahora para poder inyectar el moduloDos en el moduloUno, solamente se agrega el nombre de éste en medio de los corchetes que están en el moduloUno (Linea 1) y luego se pasa como variable el nombre del servicio factory en el controlador principal y también como argumento en la función anónima (Linea 2), por ultimo se declara la variable llamada mensajeDos la cual recibirá la cadena que retorna el servicio factory (Linea 4), quedando asi:


Por ultimo solo queda mostrar la información en la página principal:


para ello primero se incluye el framework angular (Lina 5), luego se incluye el script angular.js que se creo previamente (Linea 6), se agregan las directivas ng-app y ng-controller  las cuales permitirán acceder a las variables, ng-app permite identificar y acceder al modulo principal el cual es declarado en la etiqueta html inicial (Linea 2), la directiva ng-controller se agrega en la etiqueta body inicial la cual permite acceder al controlador y a su contenido, por ultimo se agregan los nombre de las variables a usar (Lineas 10 - 11) desplegando el contenido de las variables como resultado:





Join us