Angular.js: Ist .value () der richtige Weg, um die App-Wide-Konstante festzulegen und sie in einem Controller abzurufen?


87

Hallo, ich habe mir ein paar Videos von angle.js angesehen und festgestellt, dass mit der Methode value () eine Art modulweite Konstante festgelegt wurde. Zum Beispiel kann man die Konfiguration der Angular-UI-Bibliothek wie folgt einstellen: (Coffeescript)

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

Und meine App sieht derzeit so aus:

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

Aber ich kann diesen Wert scheinbar nicht durch Tippen auf die 'App'-Variable erhalten, die dem App-Modul entspricht.

Ich habe hier auf ST und in der Google-Gruppe von angularjs nachgelesen, dass eine Möglichkeit, gemeinsamen Code zwischen zwei Controllern zu teilen, ein Dienst ist. Wird dieses Konzept auch hier gelten?

Vielen Dank!


3
Falls Sie sich nicht bewusst sind, verfügt der $ http-Dienst über einige CSRF-Funktionen. Siehe Abschnitt "Cross Site Request Forgery (XSRF) -Schutz" hier: docs.angularjs.org/api/ng.$http
Mark Rajcok

Antworten:


147

Module.value(key, value)wird verwendet, um einen bearbeitbaren Wert Module.constant(key, value)zu injizieren , wird verwendet, um einen konstanten Wert zu injizieren

Der Unterschied zwischen den beiden ist nicht so groß, dass Sie "eine Konstante nicht bearbeiten können", sondern vielmehr, dass Sie eine Konstante nicht mit $ supply abfangen und etwas anderes injizieren können.

// 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
Wie passt das 'myService'-Token in das Bild?
Dave Edelhart

1
@ DaveEdelhart, Entschuldigung, ich habe deine Frage vorher nicht gesehen. Ich hatte es gerade als Beispiel für einen Dienst, der den Wert verwendete. Glücklicherweise ist Pavel Hlobil ein guter Samariter, und er hat meinem Code einige Anmerkungen hinzugefügt, um dies klarer zu machen.
Ben Lesh

2
Nein, es ist nicht "schreibgeschützt". Wenn Sie dort ein Objekt einfügen, kann alles die Eigenschaften dieses Objekts ändern. Dies liegt hauptsächlich daran, dass es sich um JavaScript handelt, und nicht an bestimmten Designproblemen von Angular. Ich habe jedoch nicht gesehen, dass der Wert so verwendet wird, dass er geändert wird. Normalerweise habe ich ihn nur für injizierbare "Konstanten" verwendet.
Ben Lesh

2
Konstanten sind jedoch NICHT unveränderlich. Sie können sie einfach nicht mit einer anderen Injektion überschreiben, da $ require sie nicht zur Dekoration abfängt.
Ben Lesh

2
Ich weiß, dass dies eine alte Antwort ist, aber "Module.value (Schlüssel, Wert) wird verwendet, um einen bearbeitbaren Wert einzufügen, Module.constant (Schlüssel, Wert) wird verwendet, um einen konstanten Wert einzufügen" stimmt nicht mit ng überein letzte Inkarnation (1.3.4). Der Unterschied zwischen module.value () und module.constant () besteht darin, dass: eine Konstante () früher im Lebenszyklus Ihrer App verfügbar ist (während der Konfiguration und Ausführung); value () ist nur während des Laufs verfügbar. Ob sie veränderlich sind und wo geänderte Werte sichtbar sind, hängt von der Struktur ihres Werts ab (primitiv oder nicht). docs.angularjs.org/guide/providers#constant-recipe
lukkea

4

Ich wollte diese Funktion kürzlich mit Karma in einem Test verwenden. Wie Dan Doyon betont, besteht der Schlüssel darin, dass Sie einen Wert wie einen Controller, einen Dienst usw. einfügen. Sie können .value auf viele verschiedene Typen einstellen - Zeichenfolgen, Arrays von Objekten usw. Zum Beispiel:

myvalues.js eine Datei mit Wert - stellen Sie sicher, dass sie in Ihrer Karma Conf-Datei enthalten ist

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 - Vielleicht ist dies eine von Karma geladene Jasmine-Spezifikationsdatei

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

Sie müssen csrfin Ihrem Controller referenzierenIndexUsersCtrl = ( $scope, csrf )

IndexUsersCtrl.$inject = [ '$scope', 'csrf' ]
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.