Angular.js: ¿Es .value () la forma correcta de configurar la constante amplia de la aplicación y cómo recuperarla en un controlador?

87

Hola, estaba viendo un par de videos de angular.js y vi que el método value () se usó para establecer una especie de constante en todo el módulo. por ejemplo, uno puede establecer la configuración de la biblioteca Angular-UI así: (coffeescript)

angular.module('app',[])
.value "ui.config", 
  tinymce:
    theme: 'simple'
    width: '500'
    height: '300'

Y mi aplicación actualmente se ve así:

window.app = angular.module("app", [ 'ui'])

.config(["$routeProvider", ($routeProvider) ->
  $routeProvider
  .when "/users",
    templateUrl: "assets/templates/users/index.html"
    controller: IndexUsersCtrl

  .otherwise redirectTo: "/users"

])

.value 'csrf', $('meta[name="csrf-token"]').attr('content') #<---- attention here

IndexUsersCtrl = ($scope) ->
  $scope.users = gon.rabl
  console.log "I want to log the csrf value here" #<---- then attention
IndexUsersCtrl.$inject = ['$scope']

Pero parece que no puedo obtener ese valor tocando la variable 'aplicación' que corresponde al módulo de la aplicación.

Leí aquí en ST y en el grupo de Google de angularjs que una forma de compartir un código común entre controladores es a través de un servicio, ¿este concepto también se aplicará aquí?

¡Gracias!

Nik So
fuente
3
En caso de que no lo sepa, el servicio $ http tiene algunas capacidades CSRF. Consulte la sección "Protección contra la falsificación de solicitudes entre sitios (XSRF)" aquí: docs.angularjs.org/api/ng.$http
Mark Rajcok

Respuestas:

147

Module.value(key, value)se usa para inyectar un valor editable, Module.constant(key, value)se usa para inyectar un valor constante

La diferencia entre los dos no es tanto que "no puedes editar una constante", es más que no puedes interceptar una constante con $ provide e inyectar algo más.

// define a value
app.value('myThing', 'weee');

// define a constant
app.constant('myConst', 'blah');

// use it in a service
app.factory('myService', ['myThing', 'myConst', function(myThing, myConst){
   return {
       whatsMyThing: function() { 
          return myThing; //weee
       },
       getMyConst: function () {
          return myConst; //blah
       }
   };
}]);

// use it in a controller
app.controller('someController', ['$scope', 'myThing', 'myConst', 
    function($scope, myThing, myConst) {
        $scope.foo = myThing; //weee
        $scope.bar = myConst; //blah
    });
Ben Lesh
fuente
4
¿Cómo encaja el token 'myService' en la imagen?
Dave Edelhart
1
@DaveEdelhart, Lo siento, no vi tu pregunta antes. Lo acabo de tener allí como un ejemplo de un servicio que utilizó el valor. Afortunadamente, Pavel Hlobil es un buen samaritano y agregó algunas anotaciones a mi código para aclararlo.
Ben Lesh
2
No, no es "solo lectura". Si pusiera un objeto allí, cualquier cosa podría alterar las propiedades de ese objeto. Esto se debe principalmente a que es JavaScript, y no a una preocupación de diseño particular por parte de Angular. Sin embargo, no he visto que el valor se use de una manera que esté siendo alterado, generalmente lo he visto usado para "constantes" inyectables.
Ben Lesh
2
Sin embargo, las constantes NO son inmutables. Simplemente no puede sobrescribirlos con otra inyección porque $ provide no los interceptará para decorarlos.
Ben Lesh
2
Sé que esta es una respuesta antigua, pero "Module.value (clave, valor) se usa para inyectar un valor editable, Module.constant (clave, valor) se usa para inyectar un valor constante" no coincide con ng en su última encarnación (1.3.4). La diferencia entre module.value () y module.constant () es que: una constante () está disponible antes en el ciclo de vida de su aplicación (durante la configuración y ejecución); value () solo está disponible durante la ejecución. Si son mutables y dónde los valores cambiados son visibles, depende de la estructura de su valor (primitivo o no). docs.angularjs.org/guide/providers#constant-recipe
lukkea
4

Recientemente, quise usar esta función con Karma dentro de una prueba. Como señala Dan Doyon, la clave es que inyectaría un valor como un controlador, servicio, etc. Puede establecer .value en muchos tipos diferentes: cadenas, matrices de objetos, etc. Por ejemplo:

myvalues.js es un archivo que contiene un valor; asegúrese de que esté incluido en su archivo karma conf

var myConstantsModule = angular.module('test.models', []);
myConstantModule.value('dataitem', 'thedata');
// or something like this if needed
myConstantModule.value('theitems', [                                                                                                                                                                                                             
  {name: 'Item 1'},                                                                                                                                                                                                                         
  {name: 'Item 2'},                                                                                                                                                                                                                         
  {name: 'Item 3'}
]);                                                                                                                                                                                                                         

]);

test / spec / mytest.js: tal vez este sea un archivo de especificaciones de Jasmine cargado por Karma

describe('my model', function() {
    var theValue;
    var theArray;
    beforeEach(module('test.models'));
    beforeEach(inject(function(dataitem,theitems) {
      // note that dataitem is just available
      // after calling module('test.models')
      theValue = dataitem;
      theArray = theitems;
    });
    it('should do something',function() {
      // now you can use the value in your tests as needed
      console.log("The value is " + theValue);
      console.log("The array is " + theArray);
    });
});
Instantánea
fuente
2

Necesitas hacer referencia csrfen tu controladorIndexUsersCtrl = ( $scope, csrf )

IndexUsersCtrl.$inject = [ '$scope', 'csrf' ]
Dan Doyon
fuente