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.