在AngularJS上使用'global'变量

Question

Ok, I went into a heated argument with a colleague about the way of properly using global variables on AngularJS. Here's his reasoning: there's many ways to "do" things.

Consider this:

var app = angular.module('myApp', []);

app.globalVar = []; // this is just to store same data later

Then on some directive/service:

app.directive('myDirective', function(){
    app.globalVar = [23,43,21]; // populating from a json or other source
});

app.directive('myDirective2', function(){
    var x = app.globalVar;
});

I think this is bad but I would like to know, from a technical view, why this is wrong and what's the proper use of 'global' variables in AngularJS.

I read about using $rootScope and I also read somewhere that on version 2.0 AngularJS is dropping $scope altogheter so maybe the only way will be using a service/factory?

Answer 1

In general I do not use global variables. They pollute the window scope and can make your code more confusing. For an example like the one you gave I would recommend using a factory or a service to persist the data. Then you can inject it clearly into whatever controller/direct/other-service that you want. While your co-worker is correct that there are many ways to do things I do not recommend polluting the global scope.

app.
 module('myApp')
 .factory('myFactory', myFactory);

function myFactory() {
  var globalVar = [23,43,21];

  return {
    get: function() {
      return globalVar;
    }
  }
}

and then in your controller(or whatever)

app.
  module('myApp')
  .controller('MyCtrl', MyCtrl);

  function MyCtrl(myService) {
    var localVar = myService.get();
  }

Answer 2

Below are few conventions I follow while designing

a. Global Variables - Attach variables to $rootscope and then you can use that variables in any child $scope . Moreover, you can even listen to events on rootscope across controllers. Tip : Avoid this because you can end up with too many variables on rootscope and listeners spread across controllers.

b. Angular Service - Use this when you want to share data between two or more controllers. This is most preferable way to access/share data.

c. Angular Factory - Very similar to Service but, use this to store static data such as base urls, api keys, button status between views etc.

d. Angular Controller - Try to keep your controllers with minimal coding and business logic. only, routing and basic binding should be done in controllers.

I hope it helps in your argument. :)

Answer 3

Good way of using Global Variables

Angular Service:

(function () {

var userService = function () {

    var getGlobalVar = function () {
        var globalVar = [23, 43, 21];
    };
    return {
        globalVar: globalVar
    };
};
var mod = angular.module("myApp");
mod.factory("userService", userService);
}());

Angular Controller:

app.controller("MyCtrl",['userService' function (userService) {

var test = userService.getGlobalVar();
}]);