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

У меня проблема, когда я инициализирую переменную в области видимости в контроллере. Затем он изменяется в другом контроллере, когда пользователь входит в систему. Эта переменная используется для управления такими вещами, как панель навигации, и ограничивает доступ к частям сайта в зависимости от типа пользователя, поэтому важно, чтобы он сохранял свое значение. Проблема в том, что контроллер, который его инициализирует, снова вызывается с помощью angular, а затем сбрасывает переменную до ее первоначального значения.

Я предполагаю, что это не правильный способ объявления и инициализации глобальных переменных, ну, на самом деле, он не является глобальным, поэтому мой вопрос в том, как правильно и есть ли хорошие примеры, которые работают с текущей версией angular?

У вас есть в основном 2 варианта для «глобальных» переменных:

• используйте $rootScope http://docs.angularjs.org/api/ng.$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;
}

Вот рабочий jsFiddle: http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/

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

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

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

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

То же самое может быть достигнуто с помощью Provider, Factory или Service, поскольку они «просто синтаксический сахар поверх рецепта провайдера», но использование Value позволит достичь того, что вы хотите, с минимальным синтаксисом.

Другой вариант - использовать $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
  })

Исходный вопрос на самом деле звучит так, как будто статические свойства здесь необходимы в любом случае, либо как изменяемые (значение), либо как конечные (постоянные). Это больше мое личное мнение, чем что-либо еще, но я нахожу размещение элементов конфигурации времени выполнения на$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 я смог получить к нему доступ без каких-либо проблем. Могут быть некоторые проблемы с этим методом, о которых я не знаю, но это хорошее решение, я думаю.

Попробуйте это, вы не будете принудительно вводить $rootScopeв контроллер.

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

Вы можете использовать его только в блоке запуска, потому что блок конфигурации не предоставит вам возможность использовать сервис $ rootScope.

Это на самом деле довольно легко. (Если вы все равно используете Angular 2+.)

Просто добавь

declare var myGlobalVarName;

Где-то в верхней части файла вашего компонента (например, после операторов «import»), и вы сможете получить доступ к «myGlobalVarName» в любом месте вашего компонента.

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

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

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