Angular.js:.value()はアプリ全体の定数を設定する適切な方法であり、それをコントローラーで取得する方法です


87

こんにちは、私はいくつかのangular.jsビデオを見ていて、value()メソッドが一種のモジュール全体の定数を設定するために使用されているのを見ました。たとえば、Angular-UIライブラリの設定を次のように設定できます:(coffeescript)

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

そして、私のアプリは現在次のようになっています:

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

しかし、アプリモジュールに対応する「app」変数をタップしても、その値を取得できないようです。

ここSTとAngularjsのgoogleグループを読んで、共通のコードbtwnコントローラーを共有する1つの方法はサービスを介することですが、この概念もここに適用されますか?

ありがとう!


3
ご存じないかもしれませんが、$ httpサービスにはいくつかのCSRF機能があります。こちらのセクション「クロスサイトリクエストフォージェリ(XSRF)保護」を参照してください:docs.angularjs.org/api/ng.$http
Mark Rajcok

回答:


147

Module.value(key, value)編集可能な値 Module.constant(key, value)を注入するために使用され、定数値を注入するために使用されます

この2つの違いは、「定数を編集できない」ほどではなく、$ provideを使用して定数をインターセプトして、他に何かを注入することはできません。

// 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
「myService」トークンはどのように図に適合しますか?
デイブエーデルハート2013年

1
@DaveEdelhart、申し訳ありませんが、以前にあなたの質問を見ませんでした。値を使ったサービスの例として、そこに入れただけです。幸いなことに、Pavel Hlobilは優れたサマリア人であり、彼はそれを明確にするために私のコードにいくつかの注釈を追加しました。
Ben Lesh 2013

2
いいえ、「読み取り専用」ではありません。そこにオブジェクトを配置すると、何かがそのオブジェクトのプロパティを変更する可能性があります。これは主にJavaScriptが原因であり、Angularの特定の設計上の問題が原因ではありません。ただし、値が変更されるような方法で使用されることはありません。通常、注入可能な「定数」に使用されるのを見たことがあるだけです。
Ben Lesh 2013

2
ただし、定数は不変ではありません。$ provideは装飾のためにそれらをインターセプトしないため、それらを別のインジェクションで上書きすることはできません。
Ben Lesh 2013

2
私はこれが古い答えであることを知っていますが、「Module.value(key、value)は編集可能な値を挿入するために使用され、Module.constant(key、value)は定数値を挿入するために使用されます」はngを使って集計しません最新の化身(1.3.4)。module.value()とmodule.constant()の違いは、次のとおりです。constant()は、アプリのライフサイクルの早い段階で使用できます(構成および実行中)。value()は実行中にのみ使用できます。それらが変更可能かどうか、および変更された値が表示される場所は、それらの値の構造(プリミティブかどうか)によって異なります。docs.angularjs.org/guide/providers#constant-recipe
lukkea

4

私は最近、この機能をKarmaでテスト中に使用したいと考えていました。Dan Doyonが指摘するように、キーはコントローラーやサービスなどと同じように値を注入することです。.valueは、文字列、オブジェクトの配列など、さまざまなタイプに設定できます。次に例を示します。

myvalues.js値を含むファイル-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-おそらくこれはKarmaによってロードされたJasmine仕様ファイルです

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

csrfコントローラで参照する必要がありますIndexUsersCtrl = ( $scope, csrf )

IndexUsersCtrl.$inject = [ '$scope', 'csrf' ]
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.