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

แต่ฉันไม่สามารถรับค่านั้นได้โดยการแตะที่ตัวแปร "แอป" ซึ่งตรงกับโมดูลแอป

ฉันอ่านที่นี่เกี่ยวกับ ST และมากกว่าในกลุ่ม google ของ angularjs ว่าวิธีหนึ่งในการแบ่งปันรหัสควบคุม btwn ทั่วไปคือผ่านบริการแนวคิดนี้จะใช้ที่นี่ด้วยหรือไม่

ขอบคุณ!


3
ในกรณีที่คุณไม่ทราบบริการ $ http มีความสามารถ CSRF บางอย่าง ดูหัวข้อ "การคุ้มครองคำขอปลอมแปลงข้ามไซต์ (XSRF)" ที่นี่: docs.angularjs.org/api/ng.$http
Mark Rajcok

คำตอบ:


147

Module.value(key, value)ใช้ในการฉีดค่าที่แก้ไขได้ Module.constant(key, value)ใช้ในการฉีดค่าคงที่

ความแตกต่างระหว่างทั้งสองไม่มากจนคุณ "ไม่สามารถแก้ไขค่าคงที่" ได้ แต่ยิ่งไปกว่านั้นคุณไม่สามารถสกัดกั้นค่าคงที่ด้วย $ ให้และฉีดอย่างอื่นได้

// 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

1
@DaveEdelhart ขออภัยฉันไม่เห็นคำถามของคุณก่อนหน้านี้ ฉันเพิ่งมีมันเป็นตัวอย่างของบริการที่ใช้ค่านี้ โชคดีที่ Pavel Hlobil เป็นชาวสะมาเรียที่ดีและเขาได้เพิ่มคำอธิบายประกอบลงในโค้ดของฉันเพื่อให้ชัดเจนขึ้น
Ben Lesh

2
ไม่ใช่ไม่ใช่ "อ่านอย่างเดียว" หากคุณวางวัตถุไว้ที่นั่นสิ่งใดก็สามารถเปลี่ยนแปลงคุณสมบัติของวัตถุนั้นได้ ส่วนใหญ่เป็นเพราะ JavaScript ไม่ใช่เพราะความกังวลด้านการออกแบบใด ๆ ในส่วนของ Angular อย่างไรก็ตามฉันไม่เห็นค่าที่ใช้ในลักษณะที่มีการเปลี่ยนแปลงโดยปกติฉันเพิ่งเคยเห็นค่านี้ใช้สำหรับ "ค่าคงที่" แบบฉีดได้
Ben Lesh

2
อย่างไรก็ตามค่าคงที่ไม่เปลี่ยนรูป คุณไม่สามารถเขียนทับด้วยการฉีดอื่นได้เนื่องจาก $ ให้จะไม่ขัดขวางการตกแต่ง
Ben Lesh

2
ฉันรู้ว่านี่เป็นคำตอบเก่า แต่ "Module.value (key, value) ถูกใช้เพื่อฉีดค่าที่แก้ไขได้ Module.constant (key, value) ถูกใช้เพื่อฉีดค่าคงที่" ไม่นับรวมกับ ng ในมัน ชาติล่าสุด (1.3.4) ความแตกต่างระหว่าง module.value () และ module.constant () คือค่าคงที่ () จะพร้อมใช้งานก่อนหน้านี้ในวงจรชีวิตของแอปของคุณ (ระหว่างการกำหนดค่าและการทำงาน) ค่า () จะใช้ได้เฉพาะในระหว่างการรัน ไม่ว่าจะไม่แน่นอนและสามารถมองเห็นค่าที่เปลี่ยนแปลงได้หรือไม่ขึ้นอยู่กับโครงสร้างของค่า (ดั้งเดิมหรือไม่) docs.angularjs.org/guide/providers#constant-recipe
lukkea

4

เมื่อเร็ว ๆ นี้ฉันต้องการใช้คุณสมบัตินี้กับ Karma ในการทดสอบ ดังที่ Dan Doyon ชี้ให้เห็นกุญแจสำคัญคือคุณจะฉีดค่าเช่นเดียวกับตัวควบคุมบริการ ฯลฯ คุณสามารถตั้งค่า. value เป็นประเภทต่างๆได้เช่นสตริงอาร์เรย์ของวัตถุ ฯลฯ ตัวอย่างเช่น:

myvalues.js ไฟล์ที่มีค่า - ตรวจสอบให้แน่ใจว่ารวมอยู่ในไฟล์กรรมของคุณ

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

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.