Лучший способ сделать объект глобально доступным и управляемым в сложном приложении AngularJS?

Question

Прежде всего, извиняюсь, если этот вопрос является дубликатом (я знаю, что он подозрительно похож на один), но у меня есть некоторые конкретные требования, и я не уверен, что они удовлетворены другими решениями. Они могут быть, но я совсем не уверен.

Я создаю веб-приложение HTML5 + CSS3 + JS, используя AngularJS для развертывания в качестве настольного приложения с использованием веб-сайта узла. Приложение позволит запускать соревнование, сортировать команды и конкурентов по очкам в ходе турнира, а также несколько других задач.

Приложение будет иметь несколько компонентов, каждый из которых должен иметь доступ и редактировать турнир, а также локально хранить турнир (возможно, как объект JSON).

В настоящее время я планирую создать турнир как отдельный объект с другими объектами (командами, конкурентами, судьями), вложенными в него. Каков наилучший способ создать этот турнир таким образом, чтобы он соответствовал моим требованиям?

Я также должен буду иметь возможность добавлять новые детали в приложение позже и легко предоставить этим компонентам ту же способность (просматривать и обновлять объект турнира).

Большое спасибо!

Answer 1

Установка фабрики/службы и возвращение объекта турнира оттуда или методы работы с ним. Затем вы можете ввести услугу в любой контроллер, к которому вы хотите получить доступ. Вы также можете определить переменные области, которые ссылаются на объект турнира, чтобы сделать его доступным из директив вашего приложения.

Answer 2

Я использовал для перемещения всей глобальной переменной в $ ootScope. Но лучше не забивать его, вы можете использовать один объект для этой цели.

angular.module('sampleApp', []) 
    .config(['$compileProvider', function ($compileProvider) { 
     $compileProvider.debugInfoEnabled(false); 
    }]) 
    .run(['$rootScope', function ($rootScope) { 
     $rootScope.globalVars = {}; 
    }]) 
.controller('mainController', ['$scope', '$rootScope', function ($scope, $rootScope) { 

    $rootScope.globalVars.name = "Batman"; 
}]) 
.directive('plugin', ['$compile,$rootScope', function ($compile, $rootScope) { 
    return { 
     restrict: 'A', 
     link: function (scope, $element, attrs) { 
      console.log($rootScope.globalVars.name); //Batman 
     } 
    } 
}]);