AngularJS এ গ্লোবাল ভেরিয়েবল

Question

আমার একটি সমস্যা আছে যেখানে আমি একটি নিয়ামকের স্কোপে ভেরিয়েবল শুরু করি। তারপরে কোনও ব্যবহারকারী লগ ইন করলে এটি অন্য নিয়ামক হিসাবে পরিবর্তিত হয় This এই পরিবর্তনশীলটি নেভিগেশন বারের মতো জিনিসগুলি নিয়ন্ত্রণ করতে ব্যবহার করা হয় এবং ব্যবহারকারীর ধরণের উপর নির্ভর করে সাইটের অংশগুলিতে অ্যাক্সেসকে সীমাবদ্ধ করে, তাই এটির গুরুত্বপুর্ণ যে এটির মূল্য রয়েছে। এটির সাথে সমস্যাটি হ'ল যে কন্ট্রোলার এটি সূচনা করে, আবার কৌণিক দ্বারা আবার কল হয় কীভাবে এবং তারপরে তার পরিবর্তনশীলটিকে তার প্রাথমিক মানটিতে পুনরায় সেট করে।

আমি ধরে নিচ্ছি যে এটি গ্লোবাল ভেরিয়েবলগুলি ঘোষণা করার এবং প্রারম্ভিক করার সঠিক উপায় নয়, তবে এটি সত্যই বিশ্বব্যাপী নয়, তাই আমার প্রশ্নটি সঠিক উপায় কী এবং কৌনিকটির বর্তমান সংস্করণটির সাথে কাজ করার কোনও ভাল উদাহরণ রয়েছে?

Comments

যেহেতু এটি # 1 গুগল ফলাফল: আপনি এখন অ্যাপ্লিকেশন-বিস্তৃত ধ্রুবক এবং ভেরিয়েবলগুলি তৈরি করতে app.constant () এবং app.value () ব্যবহার করতে পারেন। আরও এখানে: bit.ly/1P51PED

— মরোজ

Answer 1

আপনি "গ্লোবাল" ভেরিয়েবলের জন্য মূলত 2 টি বিকল্প পেয়েছেন:

• একটি http://docs.angularjs.org/api/ng.$rootScope ব্যবহার করুন$rootScope
• একটি পরিষেবা ব্যবহার করুন http://docs.angularjs.org/guide/services

$rootScopeসমস্ত স্কোপের একটি পিতা বা মাতা তাই প্রকাশিত মানগুলি সমস্ত টেম্পলেট এবং নিয়ামকগুলিতে দৃশ্যমান হবে। এটি ব্যবহার $rootScopeকরা খুব সহজ কারণ আপনি এটিকে যে কোনও নিয়ন্ত্রণকারীর মধ্যে সহজেই ইনজেক্ট করতে পারেন এবং এই সুযোগে মানগুলি পরিবর্তন করতে পারেন। এটি সুবিধাজনক হতে পারে তবে বৈশ্বিক ভেরিয়েবলগুলির সমস্ত সমস্যা রয়েছে ।

পরিষেবাদিগুলি সিঙ্গেলন যা আপনি যে কোনও নিয়ামককে ইনজেক্ট করতে পারেন এবং কোনও নিয়ামকের স্কোপে তাদের মানগুলি প্রকাশ করতে পারেন। পরিষেবাদি, সিঙ্গেলন হ'ল এখনও 'গ্লোবাল' তবে কোথায় সেগুলি ব্যবহৃত এবং এক্সপোজ করা হয়েছে তার থেকে আপনি আরও ভাল নিয়ন্ত্রণ পেয়েছেন।

পরিষেবাদি ব্যবহার করা কিছুটা জটিল, তবে তেমন কিছু নয়, এখানে একটি উদাহরণ রয়েছে:

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

এবং তারপরে একটি নিয়ামক:

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

এখানে কার্যনির্বাহী জেএসফিডাল: http://jsfiddle.net/pkozlowski_opensource/ BRWPM/2/

Comments

থেকে কৌণিক প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী : বিপরীতভাবে, একটি পরিষেবা যার শুধুমাত্র জীবনে উদ্দেশ্য ডেটার দোকান এবং বিনিময়ে বিট হয় তৈরি করবেন না।

— জাকব স্টোইক

আমি বিটিফোর্ড দ্বারা এক্সপ্রেস + কৌণিক বীজ ব্যবহার করছি । যদি আমি কন্ট্রোলার 1 এর $ রুটস্কোপে কোনও ভেরিয়েবল সেট করে বলি এবং অন্য url এ চলে যাই (কন্ট্রোলার 2 বলে চালিত হয়) আমি এই ভেরিয়েবলটি অ্যাক্সেস করতে পারি। তবে আমি যদি পৃষ্ঠাটি কন্ট্রোলার 2 তে রিফ্রেশ করি তবে ভেরিয়েবলটি আর $ রুটস্কোপে অ্যাক্সেসযোগ্য নয়। আমি যদি সাইন ইন ব্যবহারকারীর ডেটা সংরক্ষণ করি তবে কীভাবে আমি নিশ্চিত করব যে এই ডেটা অন্য পৃষ্ঠায় এমনকি রিফ্রেশে অন্য কোনও জায়গায় অ্যাক্সেসযোগ্য?

— ক্রেগ মাইলস

@ জ্যাকবসটেক এই উত্তরটির সাথে এটি একত্রিত করুন এবং আপনি ডেটাটি রুটস্কোপে রেখে দেবেন। আমি ঠিক মনে করি না। বিশ্বব্যাপী ব্যবহৃত ডেটা বিট সংরক্ষণ এবং ফেরত দেওয়ার কৌনিক উপায় কী?

— ব্যবহারকারী 2483724

আমি কৌতূহল করছি যে পরিষেবাগুলির অসুবিধাগুলি কী কী বিশেষত মানগুলি সংরক্ষণের জন্য। বিচ্ছিন্ন, কেবল যেখানে আপনার এটি প্রয়োজন সেখানে ইনজেকশন দেওয়া হয়েছে এবং সহজেই টেস্টযোগ্য। ডাউনসাইড কি?

— ব্রায়ান

ওহ godশ্বর, কেন সবাই রিয়েল গ্লোবাল ভেরিয়েবলগুলি সম্পর্কে ভীত, যদি আপনার অ্যাপটি কী ধারণ করে তা যদি আপনি জানেন তবে কেবলমাত্র একটি বাস্তব গ্লোবাল জেএস ভেরিয়েবল তৈরি করুন পরিবর্তে স্টাফকে উপভোগ করুন

— ম্যাক্স ইয়ারি

Answer 2

আপনি যদি কেবল কোনও মান সঞ্চয় করতে চান তবে সরবরাহকারীদের কৌনিক ডকুমেন্টেশন অনুসারে , আপনার মান রেসিপিটি ব্যবহার করা উচিত:

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

তারপরে এটি একটি নিয়ামক হিসাবে এটি ব্যবহার করুন:

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

সরবরাহকারী, কারখানা বা পরিষেবা ব্যবহার করে একই জিনিস অর্জন করা যায় যেহেতু তারা "সরবরাহকারীর রেসিপির উপরে কেবল সিনট্যাকটিক চিনি" তবে মান ব্যবহার করে ন্যূনতম সিনট্যাক্সের সাথে আপনি যা চান তা অর্জন করবে।

অন্য বিকল্পটি হ'ল ব্যবহার করা $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';
    }
}];

জেএসফিডেলের উদাহরণ

Comments

আমি যখন একটি ভিউতে মানটি পরিবর্তন করি তখন নতুন মান স্থির হয় না। কিভাবে? আপনি দয়া করে আপনার উত্তর আপডেট করতে পারেন এবং আমাদের কীভাবে clientIdআপডেট করা যায় তা আমাদের দেখতে দিন ?

— ব্লেইস

@ ডিয়ানঅর কি পৃষ্ঠার রিফ্রেশগুলির মধ্যে আপডেট হওয়া মানটি সংরক্ষণ করা সম্ভব? আমি পৃষ্ঠাটি রিফ্রেশ করলে মানটি পুনরায় পুনর্নির্মাণ হয়।

— নবারুণ

এর জন্য আপনাকে অন্য কোনও জিনিস ব্যবহার করতে হবে যেমন কুকি, স্থানীয় সঞ্চয়স্থান বা ডাটাবেস।

— ডিন বা

আমি সত্যিই এটি সেরা পছন্দ। আমি এখন দেব, মঞ্চ এবং

— প্রোডের

গ্লোবাল ভেরিয়েবলের অনুরূপ ধ্রুবক এবং মানগুলির ব্যবহার সম্পর্কে ব্যাখ্যা করার জন্য একটি সহজ নিবন্ধ রয়েছে: ilikekillnerds.com/2014/11/…

— RushabhG

Answer 3

AngularJS "গ্লোবাল ভেরিয়েবল" ব্যবহার করে উদাহরণ $rootScope:

কন্ট্রোলার 1 গ্লোবাল ভেরিয়েবল সেট করে:

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

কন্ট্রোলার 2 গ্লোবাল ভেরিয়েবলটি পড়ে:

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

এখানে একটি কার্যনির্বাহী জেএসফিডাল: http://jsfiddle.net/natefriedman/3XT3F/1/

Comments

এটি বিচ্ছিন্ন সুযোগ নির্দেশের দৃষ্টিতে কাজ করে না। Jsfiddle.net/3XT3F/7 দেখুন । তবে আপনি এর চারপাশে কাজ করতে $ মূল ব্যবহার করতে পারেন। Jsfiddle.net/3XT3F/10 দেখুন । ধন্যবাদ @natefaubion জন্য এটা ইশারা

— টনি Lâmpada

রিফ্রেশে, $ রুটস্কোপের মান খালি থাকবে।

— xyonme

হার্ডকোডিং $ রুটস্কোপ.নাম কিছু মান সমান..আসলে আমাদের এটি পড়তে হবে এবং এটি সেখানে সেট করতে হবে।

Answer 4

উইকি পুলে আরেকটি ধারণা যুক্ত করার স্বার্থে, তবে অ্যাঙ্গুলারজেএস ' valueএবং constantমডিউলগুলির কী হবে? আমি কেবল সেগুলি নিজেই ব্যবহার করা শুরু করছি তবে আমার কাছে মনে হয় এগুলি সম্ভবত সেরা বিকল্প options

দ্রষ্টব্য: লেখার সময় হিসাবে, কৌণিক 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খুব অগোছালো হয়ে উঠতে দেখি ।

Comments

আমি মান মডিউলটি খুব দরকারী এবং সংক্ষিপ্ত বলে মনে করি। বিশেষত যখন আপনি এটিকে একটি নিয়ামকের মধ্যে $ স্কোপ ভেরিয়েবলের সাথে আবদ্ধ করেন, যাতে সেই নিয়ামকের যুক্তি বা দৃষ্টিভঙ্গির মধ্যে পরিবর্তনগুলি বিশ্বব্যাপী পরিবর্তনশীল / মান / পরিষেবায় আবদ্ধ থাকে

— বেন হুইলারের

Answer 5

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

Answer 6

localStorage.username = 'blah'

আপনি যদি আধুনিক ব্রাউজারে থাকার নিশ্চয়তা পান তবে। যদিও আপনার মানগুলি জানেন তবে সমস্ত স্ট্রিংয়ে রূপান্তরিত হবে।

পুনরায় লোডগুলির মধ্যে ক্যাশে হওয়ার সুবিধাজনক সুবিধাও রয়েছে।

Comments

হেই, আমি লোকালস্টোরেশনের মাধ্যমে সমস্ত ভেরিয়েবল সঞ্চয় করতে যাচ্ছি। আমাদের তখনও একরকম দৃ !়তা থাকবে! এছাড়াও, স্ট্রিং সীমাবদ্ধতাটি পেতে, আসুন কোনও ফাংশনের .toString () সংরক্ষণ করি তারপরে যখন প্রয়োজন হয় তখন এটি খোল!

— শাজ

@ শাজ দ্বারা ইতিমধ্যে উল্লিখিত মত, এটি অধ্যবসায়ের সমস্যা আছে

— óubrówka

Answer 7

আমি ভুল হলে দয়া করে আমাকে সংশোধন করুন, তবে যখন কৌনিক 2.0 প্রকাশিত হয় তখন আমি বিশ্বাস করি না যে $rootScopeপ্রায় হবে। আমার অনুমান যে $scopeসত্যটিও সরানো হচ্ছে তার উপর ভিত্তি করে । স্পষ্টতই কন্ট্রোলারগুলি এখনও বিদ্যমান থাকবে, কেবল ng-controllerফ্যাশনে নয় instead পরিবর্তে নির্দেশকগুলিতে ইনজেকশন কন্ট্রোলারদের বিবেচনা করুন। রিলিজটি আসন্ন আসার সাথে সাথে, আপনি যদি ভেরিসন ১. এক্স থেকে ২.০ এ পরিবর্তন করতে আরও সহজ সময় চান তবে গ্লোবাল ভেরিয়েবল হিসাবে পরিষেবাগুলি ব্যবহার করা সবচেয়ে ভাল।

Comments

আমি সম্মত, সরাসরি $ রুটস্কোপে ডেটা স্থাপন করা কৌণিকালীর পুরো উদ্দেশ্যের বিরুদ্ধে। কিছুটা সময় নিয়ে আপনার কোডটি যথাযথভাবে সংগঠিত করুন এবং এটি আপনাকে কেবল AngularJS 2.x আপগ্রেডেই নয়, সাধারণত আপনার অ্যাপ্লিকেশনটির বিকাশকে আরও জটিল করে তুলতে সহায়তা করবে।

— ক্যাটালিনবার্তা

যদি $ রুটস্কোপটি সরানো হয় তবে কেবল একটি নতুন পরিষেবা লিখুন যা "$ রুটস্কোপ" বলে :) :)

— ইউল্মজ

Answer 8

আপনি পরিবেশের পরিবর্তনশীলটিও ব্যবহার করতে পারেন $windowযাতে কোনও নিয়ামকের বাইরে বৈশ্বিক চলক ঘোষিত হয় একটি এর মধ্যে যাচাই করা যেতে পারে$watch

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

সচেতন, ডাইজেস্টচক্রটি এই বিশ্বব্যাপী মানগুলির সাথে দীর্ঘতর হয়, তাই এটি সর্বদা বাস্তব সময়ে আপডেট হয় না। এই কনফিগারেশনটি নিয়ে আমার ডাইজেস্ট সময়টি তদন্ত করা দরকার।

Answer 9

আমি ভুল করেই অন্য একটি পদ্ধতি খুঁজে পেয়েছি:

আমি যা করেছি তা হ'ল var db = nullউপরের অ্যাপ্লিকেশন ঘোষণার ঘোষণা এবং তারপরে এটি সংশোধন করে app.jsযখন আমি এটিতে প্রবেশ করি তখন আমি controller.js কোনও সমস্যা ছাড়াই এটি অ্যাক্সেস করতে সক্ষম হয়েছি this এই পদ্ধতিটি সম্পর্কে কিছু সমস্যা থাকতে পারে যা সম্পর্কে আমি অবগত নই তবে এটিই আমার ধারণা একটি ভাল সমাধান।

Answer 10

এটি চেষ্টা করে দেখুন, আপনি $rootScopeনিয়ামক ইনজেকশন করতে বাধ্য করবেন না ।

app.run(function($rootScope) {
    $rootScope.Currency = 'USD';
});

আপনি এটি কেবল রান ব্লকে ব্যবহার করতে পারেন কারণ কনফিগারেশন ব্লক আপনাকে $ রুটস্কোপের পরিষেবা ব্যবহার করতে সরবরাহ করবে না।

Answer 11

এটি আসলে বেশ সহজ। (যদি আপনি যেভাবেই কৌনিক 2+ ব্যবহার করছেন))

সহজভাবে যুক্ত করুন

declare var myGlobalVarName;

আপনার উপাদান ফাইলের শীর্ষে কোথাও (যেমন "আমদানি" স্টেটমেন্টগুলির পরে), এবং আপনি আপনার উপাদানটির ভিতরে যে কোনও জায়গায় "মাইগ্লোবালভারনেম" অ্যাক্সেস করতে সক্ষম হবেন।

Answer 12

আপনিও এরকম কিছু করতে পারেন ..

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

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

Comments

আপনি যখন এভাবে ব্যবহার করেন $ রুটস্কোপটি অপরিজ্ঞাত হয়।

— আহমদ আহমদী