menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:03_servicios:06_value [2014/07/25 16:05] admin creado |
unidades:03_servicios:06_value [2014/08/29 21:39] (actual) admin |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== 3.6 value ====== | ====== 3.6 value ====== | ||
| + | Un ''value'' es un servicio al que le pasamos directamente el valor de dicho servicio. Se define llamando al método ''value'' de un módulo.A dicho método le pasaremos el nombre y su valor. | ||
| + | Veamos ahora un ejemplo de ''value''. | ||
| + | |||
| + | <sxh html;title:index.html> | ||
| + | <!DOCTYPE html> | ||
| + | <html ng-app="app"> | ||
| + | |||
| + | <head> | ||
| + | <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> | ||
| + | <script src="script.js"></script> | ||
| + | </head> | ||
| + | |||
| + | <body ng-controller="PruebaController"> | ||
| + | El valor del value "miServicioValue" = {{valor}} | ||
| + | </body> | ||
| + | |||
| + | </html> | ||
| + | </sxh> | ||
| + | |||
| + | <sxh js;title:script.js;highlight: [3,5,6];> | ||
| + | var app=angular.module("app",[]); | ||
| + | |||
| + | app.value("miServicioValue","Hola mundo"); | ||
| + | |||
| + | app.controller("PruebaController",["$scope","miServicioValue",function($scope,miServicioValue) { | ||
| + | $scope.valor=miServicioValue; | ||
| + | }]); | ||
| + | |||
| + | </sxh> | ||
| + | |||
| + | * Línea 3: Se crea el ''value'' "miServicioValue" con el valor "Hola mundo" | ||
| + | * Línea 5: Se inyecta el ''value'' en el controlador | ||
| + | * Línea 6: Se pone en valor de miServicioValue en la propiedad del ''$scope.valor'' | ||
| + | |||
| + | Si ejecutamos el ejemplo veremos en la página HTML el texto: | ||
| + | El valor del value "miServicioValue" = Hola mundo | ||
| + | | ||
| + | ===== Posibles valores ===== | ||
| + | El servicio ''value'' puede tener a parte de valores escalares cualquier cosa como referencias a objetos, referencia a funciones, etc. | ||
| + | |||
| + | ===== Ejemplo ===== | ||
| + | Veamos ahora un ejemplo de ''value'' con distintos valores. | ||
| + | |||
| + | <sxh html;title:index.html> | ||
| + | <!DOCTYPE html> | ||
| + | <html ng-app="app"> | ||
| + | |||
| + | <head> | ||
| + | <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> | ||
| + | <script src="script.js"></script> | ||
| + | </head> | ||
| + | |||
| + | <body ng-controller="PruebaController"> | ||
| + | idioma = {{idioma}} | ||
| + | <br> | ||
| + | suma de 3 + 6 = {{suma}} | ||
| + | <br> | ||
| + | area = {{area}} | ||
| + | </body> | ||
| + | </html> | ||
| + | </sxh> | ||
| + | |||
| + | <sxh js;title:script.js;highlight: [3,5,14,16,20,21,22,23];> | ||
| + | var app=angular.module("app",[]); | ||
| + | |||
| + | app.value("idioma","es-es"); | ||
| + | |||
| + | app.value("matematicas_simples",{ | ||
| + | sumar:function(a,b) { | ||
| + | return a+b; | ||
| + | }, | ||
| + | restar:function(a,b) { | ||
| + | return a-b; | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | app.value("radio",10); | ||
| + | |||
| + | app.value("area",function(radio) { | ||
| + | return 3.1416*radio*radio; | ||
| + | }) | ||
| + | |||
| + | app.controller("PruebaController",["$scope","idioma","matematicas_simples","radio","area",function($scope,idioma,matematicas_simples,radio,area) { | ||
| + | $scope.idioma=idioma; | ||
| + | $scope.suma=matematicas_simples.sumar(3,6); | ||
| + | $scope.area=area(radio); | ||
| + | }]); | ||
| + | </sxh> | ||
| + | |||
| + | * Línea 2: Se crea una ''value'' cuyo valor es un String | ||
| + | * Línea 5: Se crea una ''value'' cuyo valor es un Objeto con los métodos ''sumar'' y ''restar'' | ||
| + | * Linea 14: Se crea una ''value'' cuyo valor es un número | ||
| + | * Línea 16: Se crea una ''value'' cuyo valor es una función. | ||
| + | * Línea 20: Se inyectan todos los ''value'' en el controlador. | ||
| + | * Línea 21: Se guarda el valor del ''value'' ''idioma'' en la propiedad ''$scope.idioma''. | ||
| + | * Línea 22: Se guarda en ''$scope.suma'' el resultado de llamar al método ''sumar'' del objeto ''matematicas_simples'' que es el valor de dicho ''value''. | ||
| + | * Línea 23: Como el valor del ''value'' es una función , llamamos directamente a la función pasándole como argumento el valor 10 del ''value'' ''radio''. | ||
| + | |||
| + | <note tip> | ||
| + | Lo mas interesante es ver el ''value'' llamado ''area'' que es una función. Por lo tanto al obtener su valor lo llamamos como una función usando los parentesis: ''area(radio)''. | ||
| + | </note> | ||
| + | |||
| + | {{url>http://embed.plnkr.co/JQUTHe}} | ||
| + | |||
| + | ===== Diferencias con constant ===== | ||
| + | Te habrás fijado que este tema es prácticamente el mismo que el de [[unidades:03_servicios:05_constant]], es decir que ha sido prácticamente cambiar ''constant'' por ''value''. | ||
| + | |||
| + | ¿Cuál es entonces la diferencia entre ellos? Que como ya hemos comentado en [[unidades:03_servicios:04_tiposservicios]] los servicio de tipo ''constant'' se pueden inyectar en [[unidades:03_servicios:04_tiposservicios#bloque_configbloques]] y en los [[unidades:03_servicios:09_provider]] mientras que los ''value'' no pueden. | ||
| + | |||
| + | ===== Referencias ===== | ||
| + | * [[https://docs.angularjs.org/guide/providers#value-recipe|/ Developer Guide / Providers / Value]] | ||
