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.

<!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>

var app=angular.module("app",[]);
 
app.value("miServicioValue","Hola mundo");

app.controller("PruebaController",["$scope","miServicioValue",function($scope,miServicioValue) {
  $scope.valor=miServicioValue;  
}]);

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.

<!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>

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);
}]);

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.

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).

Diferencias con constant

Te habrás fijado que este tema es prácticamente el mismo que el de 3.5 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 3.4 Tipos de servicios los servicio de tipo constant se pueden inyectar en bloque_configbloques y en los 3.9 provider mientras que los value no pueden.

Referencias

/ Developer Guide / Providers / Value