Глобальные переменные в AngularJS

Если вы хотите сохранить значение, в соответствии с документацией Angular для поставщиков, вы должны использовать рецепт Value:

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

Затем используйте его в контроллере следующим образом:

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

То же самое можно достичь с помощью Провайдера, Factory или Service, поскольку они являются "просто синтаксическим сахаром поверх рецепта поставщика", но использование значения достигнет того, чего вы хотите с минимальным синтаксисом.

Другой вариант - использовать $rootScope, но это не вариант, потому что вы не должны использовать его по тем же причинам, что и глобальные переменные на других языках. Это рекомендуется для экономного использования.

Поскольку все области наследуются от $rootScope, если у вас есть переменная $rootScope.data, и кто-то забывает, что data уже определен и создает $scope.data в локальной области, вы столкнетесь с проблемами.

Если вы хотите изменить это значение и сохранить его во всех своих контроллерах, используйте объект и измените свойства, имея в виду, что Javascript проходит через копию ссылки:

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

Пример JSFiddle

Пример глобальных переменных 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/

В интересах добавления другой идеи в вики-пул, но как насчет AngularJS value и constant? Я только начинаю использовать их сам, но мне кажется, что это, вероятно, лучшие варианты здесь.

Примечание: на момент написания, Angular 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
  })

Из исходного вопроса на самом деле звучит так, как будто здесь требуются статические свойства, либо как изменяемые (значения), либо final (constant). Это больше мое личное мнение, чем что-либо еще, но я считаю, что размещение элементов конфигурации времени выполнения на $rootScope слишком запутанно, слишком быстро.

// 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;
}]);

В вашем HTML:

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

localStorage.username = 'blah'

Если вы уверены, что находитесь в современном браузере. Хотя вы знаете, что ваши значения будут преобразованы в строки.

Также имеет преимущество в кэшировании между перезагрузками.

Пожалуйста, поправьте меня, если я ошибаюсь, но когда выпущен Angular 2.0, я не верю, что $rootScope будет вокруг. Моя гипотеза основана на том факте, что $scope также удаляется. Очевидно, что контроллеры все равно будут существовать, только не в моделях ng-controller. Вместо этого нужно ввести контроллеры инъекций в директивы. Поскольку выпуск наступает неизбежно, лучше всего использовать сервисы в качестве глобальных переменных, если вам требуется более легкое время для перехода с версии 1.X на 2.0.

Вы также можете использовать переменную окружения $window, чтобы глобальная переменная, объявляемая вне контроллера, могла быть проверена внутри $watch

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

Будьте внимательны, цикл дайджеста длиннее с этими глобальными значениями, поэтому он не всегда обновляется по времени. Мне нужно исследовать это время дайджест с этой конфигурацией.

Я просто нашел другой метод по ошибке:

То, что я сделал, это объявить объявление приложения var db = null выше, а затем изменить его в app.js, а затем, когда я обратился к нему в controller.js Я смог получить к нему доступ без каких-либо проблем. Возможно, некоторые проблемы с этим методом, о которых я не знаю, но это хорошее решение, я думаю.

Вы также можете сделать что-то вроде этого.

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

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