Global variables in AngularJS
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/
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'; }}];
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/