Angular.js:.value()是设置应用程序广泛常量的正确方法以及如何在控制器中检索它的正确方法


87

嗨,我在那里观看了几个angular.js视频,并看到value()方法用于设置一种模块范围的常量。例如,可以像这样设置Angular-UI库的配置:(咖啡脚本)

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模块相对应的'app'变量来获取该值。

我在ST和angularjs的google组上都读到过,一种共享通用代码btwn控制器的方法是通过服务,这种概念在这里也适用吗?

谢谢!


3
如果您不知道,$ http服务具有一些CSRF功能。请参阅此处的“跨站点请求伪造(XSRF)保护”部分:docs.angularjs.org/api/ng.$http
Mark Rajcok,2012年

Answers:


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”令牌如何适合图片?
戴夫·埃德哈特2013年

1
@DaveEdelhart,对不起,我之前没有看到您的问题。我只是将其作为使用该值的服务的示例而已。幸运的是,Pavel Hlobil是一位出色的撒玛利亚人,他在我的代码中添加了一些注释以使其更加清晰。
Ben Lesh

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 2014年

4

我最近想在测试中与Karma一起使用此功能。正如Dan Doyon指出的,关键是您将像控制器,服务等一样注入一个值。您可以将.value设置为许多不同的类型-字符串,对象数组等。例如:

myvalues.js一个包含值的文件-确保它包含在您的业力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' ]
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.