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 컨트롤러를 공유하는 한 가지 방법은 서비스를 통한다는 것을 읽었습니다.이 개념이 여기에도 적용됩니까?

감사!


3
모르는 경우 $ http 서비스에는 CSRF 기능이 있습니다. "XSRF (교차 사이트 요청 위조) 보호"섹션 참조 : docs.angularjs.org/api/ng.$http
Mark Rajcok

답변:


147

Module.value(key, value)편집 가능한 값 Module.constant(key, value)을 주입하는 데 사용되며 상수 값을 주입하는 데 사용됩니다.

둘 사이의 차이점은 "상수를 편집 할 수 없다"는 것이 아니라 $ 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'토큰이 그림에 어떻게 들어 맞습니까?
Dave Edelhart 2013 년

1
@DaveEdelhart, 이전에 질문을 보지 못해서 죄송합니다. 가치를 사용한 서비스의 예로서 거기에 넣었습니다. 다행히 Pavel Hlobil은 훌륭한 사마리아인이며이를 명확히하기 위해 내 코드에 주석을 추가했습니다.
Ben Lesh 2013

2
아니요 "읽기 전용"이 아닙니다. 거기에 객체를 넣으면 어떤 것이든지 그 객체의 속성을 변경할 수 있습니다. 이것은 Angular의 부분에 대한 특별한 디자인 문제가 아니라 JavaScript이기 때문입니다. 그러나 나는 그것이 변경되는 방식으로 사용되는 값을 보지 못했으며, 보통 주입 가능한 "상수"에 사용되는 것을 보았습니다.
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 2014

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.