Global variables in AngularJS

Question

I have a problem where i m initialising a variable on the scope in a controller  Then it gets changed in another controller when a user logs in  This variable is used to control things such as the navigation bar and restricts access to parts of the site depending on the type of user  so its important that it holds its value  The problem with it is that the controller that initialises it  gets called again by angular some how and then resets the variable back to its initial value    I assume this is not the correct way of declaring and initialising global variables  well its not really global  so my question is what is the correct way and is there any good examples around that work with the current version of angular

User · Answer

Please correct me if I m wrong  but when Angular 2 0 is released I do not believe rootScope will be around  My conjecture is based on the fact that  scope is being removed as well  Obviously controllers  will still exist  just not in the ng-controller fashion Think of injecting controllers into directives instead  As the release comes imminent  it will be best to use services as global variables if you want an easier time to switch from verison 1 X to 2 0

User · Answer

If you just want to store a value  according to the Angular documentation on Providers  you should use the Value recipe   var myApp   angular module  myApp        myApp value  clientId    a12345654321x      Then use it in a controller like this   myApp controller  DemoController     clientId   function DemoController clientId        this clientId   clientId         The same thing can be achieved using a Provider  Factory  or Service since they are  just syntactic sugar on top of a provider recipe  but using Value will achieve what you want with minimal syntax   The other option is to use  rootScope  but it s not really an option because you shouldn t use it for the same reasons you shouldn t use global variables in other languages  It s advised to be used sparingly   Since all scopes inherit from  rootScope  if you have a variable  rootScope data and someone forgets that data is already defined and creates  scope data in a local scope you will run into problems     If you want to modify this value and have it persist across all your controllers  use an object and modify the properties keeping in mind Javascript is pass by  copy of a reference    myApp value  clientId     value   a12345654321x      myApp controller  DemoController     clientId   function DemoController clientId        this clientId   clientId      this change   function value            clientId value    something else               JSFiddle example

User · Answer

You can also use the environment variable  window so that a global variable declare outside a controller can be checked inside a  watch  var initWatch   function  scope  window        scope  watch function scope    return  window globalVar            function newValue                 scope updateDisplayedVar newValue               Becareful  the digest cycle is longer with these global values  so it is not always real-timed updated  I need to investigate on that digest time with this configuration

User · Answer

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         In your HTML    lt span ng-controller  GlobalVarController  gt   config APP NAME     v  config APP VERSION   lt  span gt

User · Answer

It s actually pretty easy   If you re using Angular 2  anyway    Simply add   declare var myGlobalVarName    Somewhere in the top of your component file  such as after the  import  statements   and you ll be able to access  myGlobalVarName  anywhere inside your component

User · Answer

Try this  you will not force to inject  rootScope in controller   app run function  rootScope         rootScope Currency    USD         You can only use it in run block because config block will not provide you to use service of  rootScope

User · Answer

In the interest of adding another idea to the wiki pool  but what about AngularJS  value and constant modules  I m only just starting to use them myself  but it sounds to me like these are probably the best options here   Note  as of the time of writing  Angular 1 3 7 is the latest stable  I believe these were added in 1 2 0  haven t confirmed this with the changelog though   Depending on how many you need to define  you might want to create a separate file for them  But I generally define these just before my app s  config   block for easy access  Because these are still effectively modules  you ll need to rely on dependency injection to use them  but they are considered  global  to your app module   For example   angular module  myApp          value  debug   true     constant  ENVIRONMENT    development      config          Then inside any controller   angular module  myApp      controller  MainCtrl   function debug  ENVIRONMENT            here you can access  debug  and  ENVIRONMENT  as straight variables        From the initial question is actually sounds like static properties are required here anyway  either as mutable  value  or final  constant   It s more my personal opinion than anything else  but I find placing runtime configuration items on the  rootScope gets too messy  too quickly

User · Answer

You can also do something like this     function MyCtrl1  scope         rootScope  root name    anonymous       function MyCtrl2  scope        var name    rootScope  root name

User · Answer

I just found another method by mistake    What I did was to declare a var db   null above app declaration and then modified it in the app js then when I accessed it in the controller js I was able to access it without any problem There might be some issues with this method which I m not aware of but It s a good solution I guess

User · Answer

You ve got basically 2 options for  global  variables    use a  rootScope http   docs angularjs org api ng  rootScope use a service http   docs angularjs org guide services    rootScope is a parent of all scopes so values exposed there will be visible in all templates and controllers  Using the  rootScope is very easy as you can simply inject it into any controller and change values in this scope  It might be convenient but has all the problems of global variables   Services are singletons that you can inject to any controller and expose their values in a controller s scope  Services  being singletons are still  global  but you ve got far better control over where those are used and exposed   Using services is a bit more complex  but not that much  here is an example   var myApp   angular module  myApp       myApp factory  UserService   function       return         name    anonymous             and then in a controller   function MyCtrl  scope  UserService         scope name   UserService name      Here is the working jsFiddle  http   jsfiddle net pkozlowski opensource BRWPM 2

User · Answer

Example of AngularJS  global variables  using  rootScope   Controller 1 sets the global variable   function MyCtrl1  scope   rootScope         rootScope name    anonymous        Controller 2 reads the global variable   function MyCtrl2  scope   rootScope         scope name2    rootScope name       Here is a working jsFiddle  http   jsfiddle net natefriedman 3XT3F 1

User · Answer

localStorage username    blah    If you re guaranteed to be on a modern browser   Though know your values will all be turned into strings   Also has the handy benefit of being cached between reloads

[angularjs] Global variables in AngularJS

Examples related to angularjs

Examples related to global-variables