Angular.js: .value () è il modo corretto per impostare la costante a livello di app e come recuperarlo in un controller


87

Salve, stavo guardando un paio di video angular.js e ho visto che il metodo value () è stato utilizzato per impostare una sorta di costante a livello di modulo. ad esempio, si può impostare la configurazione della libreria Angular-UI in questo modo: (coffeescript)

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

E la mia app attualmente ha questo aspetto:

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']

Ma non riesco a ottenere quel valore toccando la variabile "app" che corrisponde al modulo dell'app.

Ho letto qui su ST e oltre sul gruppo google di angularjs che un modo per condividere i controller di codice comune btwn è attraverso un servizio, questo concetto si applicherà anche qui?

Grazie!


3
Se non sei a conoscenza, il servizio $ http ha alcune funzionalità CSRF. Vedere la sezione "Protezione Cross Site Request Forgery (XSRF)" qui: docs.angularjs.org/api/ng.$http
— Mark Rajcok

Risposte:


147

Module.value(key, value)viene utilizzato per iniettare un valore modificabile, Module.constant(key, value)viene utilizzato per iniettare un valore costante

La differenza tra i due non è tanto che "non puoi modificare una costante", è più che non puoi intercettare una costante con $ fornire e iniettare qualcos'altro.

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

4
come si adatta il token "myService" all'immagine?
— Dave Edelhart

1
@ DaveEdelhart, mi dispiace non ho visto la tua domanda prima. L'ho appena inserito come esempio di un servizio che utilizzava il valore. Fortunatamente, Pavel Hlobil è un buon samaritano e ha aggiunto alcune annotazioni al mio codice per renderlo più chiaro.
— Ben Lesh

2
No, non è "sola lettura". Se dovessi inserire un oggetto lì dentro, qualsiasi cosa potrebbe alterare le proprietà di quell'oggetto. Ciò è principalmente dovuto al fatto che è JavaScript e non a un particolare problema di progettazione da parte di Angular. Tuttavia, non ho visto il valore utilizzato in modo tale da essere alterato, di solito l'ho visto solo usato per "costanti" iniettabili.
— Ben Lesh

2
Tuttavia le costanti NON sono immutabili. Non puoi semplicemente sovrascriverli con un'altra iniezione perché $ provide non li intercetterà per la decorazione.
— Ben Lesh

2
So che questa è una vecchia risposta, ma "Module.value (chiave, valore) è usato per iniettare un valore modificabile, Module.constant (chiave, valore) è usato per iniettare un valore costante" non coincide con ng nel suo ultima incarnazione (1.3.4). La differenza tra module.value () e module.constant () è che: una costante () è disponibile in precedenza nel ciclo di vita della tua app (durante la configurazione e l'esecuzione); value () è disponibile solo durante l'esecuzione. Se sono mutabili e dove i valori modificati sono visibili, dipende dalla struttura del loro valore (primitivo o meno). docs.angularjs.org/guide/providers#constant-recipe
— lukkea

4

Recentemente ho voluto utilizzare questa funzione con Karma all'interno di un test. Come sottolinea Dan Doyon, la chiave è che inseriresti un valore proprio come un controller, un servizio, ecc. Puoi impostare .value su molti tipi diversi: stringhe, array di oggetti, ecc. Ad esempio:

myvalues.js un file contenente value - assicurati che sia incluso nel tuo file 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 - forse questo è un file delle specifiche di Jasmine caricato da 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);
    });
});

2

Devi fare riferimento csrfnel tuo controllerIndexUsersCtrl = ( $scope, csrf )

IndexUsersCtrl.$inject = [ '$scope', 'csrf' ]
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.