AngularJS में वैश्विक चर




global-variables (8)

आप पर्यावरण परिवर्तनीय $window का भी उपयोग कर सकते $window ताकि एक नियंत्रक के बाहर एक वैश्विक चर घोषित किया जा सके जो $watch अंदर जांच की जा सके

var initWatch = function($scope,$window){
    $scope.$watch(function(scope) { return $window.globalVar },
        function(newValue) {
            $scope.updateDisplayedVar(newValue);
    });
}

बेकार, पाचन चक्र इन वैश्विक मूल्यों के साथ लंबा है, इसलिए यह हमेशा वास्तविक समय अद्यतन नहीं होता है। मुझे इस विन्यास के साथ उस पाचन समय पर जांच करने की ज़रूरत है।

मुझे एक समस्या है जहां मैं नियंत्रक में दायरे पर एक चर शुरू कर रहा हूं। फिर जब उपयोगकर्ता लॉग इन करता है तो यह किसी अन्य नियंत्रक में बदल जाता है। इस चर का उपयोग नेविगेशन बार जैसी चीजों को नियंत्रित करने के लिए किया जाता है और उपयोगकर्ता के प्रकार के आधार पर साइट के हिस्सों तक पहुंच प्रतिबंधित करता है, इसलिए यह महत्वपूर्ण है कि इसका मूल्य हो। इसके साथ समस्या यह है कि नियंत्रक जो इसे प्रारंभ करता है, फिर से कोणीय द्वारा फिर से कॉल किया जाता है और फिर वैरिएबल को अपने शुरुआती मूल्य पर रीसेट करता है।

मुझे लगता है कि यह वैश्विक चर घोषित करने और शुरू करने का सही तरीका नहीं है, साथ ही यह वास्तव में वैश्विक नहीं है, इसलिए मेरा सवाल यह है कि सही तरीका क्या है और क्या इस काम के आसपास कोणीय के वर्तमान संस्करण के साथ कोई अच्छा उदाहरण है?


विकी पूल में एक और विचार जोड़ने के हित में, लेकिन AngularJS के value और constant मॉड्यूल के बारे में क्या? मैं केवल खुद ही उनका उपयोग करना शुरू कर रहा हूं, लेकिन ऐसा लगता है कि ये शायद यहां सबसे अच्छे विकल्प हैं।

नोट: लिखने के समय के रूप में, कोणीय 1.3.7 नवीनतम स्थिर है, मेरा मानना ​​है कि इन्हें 1.2.0 में जोड़ा गया था, हालांकि इसने चेंजलॉग के साथ इसकी पुष्टि नहीं की है।

इस पर निर्भर करते हुए कि आपको कितने परिभाषित करने की आवश्यकता है, आप उनके लिए एक अलग फ़ाइल बनाना चाहेंगे। लेकिन मैं आम तौर पर आसान पहुंच के लिए अपने ऐप के .config() ब्लॉक से पहले इन्हें परिभाषित करता हूं। चूंकि ये अभी भी प्रभावी रूप से मॉड्यूल हैं, इसलिए आपको उनका उपयोग करने के लिए निर्भरता इंजेक्शन पर भरोसा करना होगा, लेकिन उन्हें आपके ऐप मॉड्यूल पर "वैश्विक" माना जाता है।

उदाहरण के लिए:

angular.module('myApp', [])
  .value('debug', true)
  .constant('ENVIRONMENT', 'development')
  .config({...})

फिर किसी भी नियंत्रक के अंदर:

angular.module('myApp')
  .controller('MainCtrl', function(debug, ENVIRONMENT), {
    // here you can access `debug` and `ENVIRONMENT` as straight variables
  })

शुरुआती प्रश्न से वास्तव में स्थिर गुणों की तरह लगता है वैसे भी, यहां पर म्यूटेबल (मान) या अंतिम (स्थिर) के रूप में आवश्यक है। यह किसी और चीज की तुलना में मेरी व्यक्तिगत राय है, लेकिन मुझे $rootScope पर रनटाइम कॉन्फ़िगरेशन आइटम रखने की $rootScope मिलती है। बहुत ही गन्दा हो जाता है।


$rootScope का उपयोग कर AngularJS "वैश्विक चर" का $rootScope :

नियंत्रक 1 वैश्विक चर सेट करता है:

function MyCtrl1($scope, $rootScope) {
    $rootScope.name = 'anonymous'; 
}

नियंत्रक 2 वैश्विक चर पढ़ता है:

function MyCtrl2($scope, $rootScope) {
    $scope.name2 = $rootScope.name; 
}

यहां एक काम कर रहा है jsFiddle: http://jsfiddle.net/natefriedman/3XT3F/1/


यदि आप प्रदाता पर कोणीय दस्तावेज के अनुसार, मूल्य को स्टोर करना चाहते हैं, तो आपको वैल्यू रेसिपी का उपयोग करना चाहिए:

var myApp = angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x');

फिर इसे इस तरह के नियंत्रक में उपयोग करें:

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
    this.clientId = clientId;
}]);

प्रदाता, फैक्ट्री या सेवा का उपयोग करके वही चीज़ हासिल की जा सकती है क्योंकि वे "प्रदाता नुस्खा के शीर्ष पर सिंटैक्टिक चीनी" हैं, लेकिन वैल्यू का उपयोग करके आप न्यूनतम वाक्यविन्यास के साथ क्या हासिल करेंगे।

दूसरा विकल्प $rootScope का उपयोग $rootScope , लेकिन यह वास्तव में एक विकल्प नहीं है क्योंकि आपको इसका उपयोग उसी कारण से नहीं करना चाहिए क्योंकि आपको अन्य भाषाओं में वैश्विक चर का उपयोग नहीं करना चाहिए। इसे कम से कम इस्तेमाल करने की advised है।

चूंकि सभी स्कोप $rootScope से प्राप्त $rootScope , यदि आपके पास एक वैरिएबल $rootScope.data और कोई भूल जाता है कि data पहले ही परिभाषित है और स्थानीय स्कोप में $scope.data बनाता है तो आप समस्याओं में भाग लेंगे।

यदि आप इस मान को संशोधित करना चाहते हैं और इसे अपने सभी नियंत्रकों में जारी रखना चाहते हैं, तो किसी ऑब्जेक्ट का उपयोग करें और दिमाग को ध्यान में रखते हुए गुणों को संशोधित करें जावास्क्रिप्ट को "संदर्भ की प्रति" से गुज़रना है:

myApp.value('clientId', { value: 'a12345654321x' });
myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
    this.clientId = clientId;
    this.change = function(value) {
        clientId.value = 'something else';
    }
}];

JSFiddle उदाहरण


// app.js or break it up into seperate files
// whatever structure is your flavor    
angular.module('myApp', [])    

.constant('CONFIG', {
    'APP_NAME' : 'My Awesome App',
    'APP_VERSION' : '0.0.0',
    'GOOGLE_ANALYTICS_ID' : '',
    'BASE_URL' : '',
    'SYSTEM_LANGUAGE' : ''
})

.controller('GlobalVarController', ['$scope', 'CONFIG', function($scope, CONFIG) {

    // If you wish to show the CONFIG vars in the console:
    console.log(CONFIG);

    // And your CONFIG vars in .constant will be passed to the HTML doc with this:
    $scope.config = CONFIG;
}]);

अपने एचटीएमएल में:

<span ng-controller="GlobalVarController">{{config.APP_NAME}} | v{{config.APP_VERSION}}</span>

मुझे गलती से एक और तरीका मिला:

मैंने जो किया वह ऐप घोषणा के ऊपर एक var db = null घोषित करना था और उसके बाद इसे app.js में संशोधित किया गया था, तब जब मैंने इसे controller.js में एक्सेस किया था तो मैं बिना किसी समस्या के इसे एक्सेस कर पाया था। इसके साथ कुछ समस्याएं हो सकती हैं जिस विधि के बारे में मुझे पता नहीं है, लेकिन मुझे लगता है कि यह एक अच्छा समाधान है।


आपके पास "वैश्विक" चर के लिए मूल रूप से 2 विकल्प हैं:

$rootScope सभी scopes का अभिभावक है इसलिए खुलासा किए गए मान सभी टेम्पलेट्स और नियंत्रकों में दिखाई देंगे। $rootScope का उपयोग करना बहुत आसान है क्योंकि आप इसे किसी भी नियंत्रक में इंजेक्ट कर सकते हैं और इस दायरे में मूल्यों को बदल सकते हैं। यह सुविधाजनक हो सकता है लेकिन वैश्विक चर की सभी समस्याएं हैं

सेवाएं सिंगलेट हैं जिन्हें आप किसी भी नियंत्रक से इंजेक्ट कर सकते हैं और नियंत्रकों के दायरे में अपने मूल्यों का पर्दाफाश कर सकते हैं। सेवाएं, सिंगलेट होने के नाते अभी भी 'वैश्विक' हैं लेकिन आप का उपयोग कहीं अधिक बेहतर नियंत्रण प्राप्त हुआ है जहां उनका उपयोग किया जाता है और उनका खुलासा किया जाता है।

सेवाओं का उपयोग करना थोड़ा अधिक जटिल है, लेकिन इतना नहीं, यहां एक उदाहरण है:

var myApp = angular.module('myApp',[]);
myApp.factory('UserService', function() {
  return {
      name : 'anonymous'
  };
});

और फिर एक नियंत्रक में:

function MyCtrl($scope, UserService) {
    $scope.name = UserService.name;
}

यहां काम कर रहा है jsFiddle: http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/


आप ऐसा कुछ भी कर सकते हैं ..

function MyCtrl1($scope) {
    $rootScope.$root.name = 'anonymous'; 
}

function MyCtrl2($scope) {
    var name = $rootScope.$root.name;
}




global-variables