Глобальні змінні в AngularJS

У мене є проблема, коли я ініціалізую змінну на області в контролері. Потім він змінюється в іншому контролері, коли користувач входить. Ця змінна використовується для керування такими речами, як навігаційна панель і обмежує доступ до частин сайту залежно від типу користувача, тому важливо, щоб він утримував його значення. Проблема з ним полягає в тому, що контролер, який ініціалізує його, знову викликається кутовим деяким способом, а потім скидає змінну назад до її початкового значення.

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

У вас є 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/

Якщо ви просто хочете зберегти значення, згідно з кутовою документацією про провайдерів , слід скористатися рецептом значення:

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

Потім використовуйте його в контролері так:

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

Те ж саме можна досягти, використовуючи Постачальник, Фабрику чи Сервіс, оскільки вони "просто синтаксичний цукор поверх рецепта постачальника", але використовуючи значення, ви досягнете бажаного за мінімального синтаксису.

Інший варіант - це використовувати $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модулів? Я лише починаю використовувати їх сам, але мені здається, що це, мабуть, найкращі варіанти тут.

Примітка: станом на час написання, кутовий 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;

Десь у верхній частині вашого компонентного файлу (наприклад, після операцій "імпорт"), і ви зможете отримати доступ до "myGlobalVarName" в будь-якому місці вашого компонента.

Ви також можете зробити щось подібне ..

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

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