Динамическая конфигурация в угловых JS

Question

Я создавал директиву для отображения диаграммы. Я прошел через обычные шаблоны создания модуля с директивой. Для конфигурации я решил использовать Провайдера. Я понял, как приложение могло настроить конфигурацию моего модуля через поставщика.

Однако один из вариантов использования, который у меня есть, заключается в том, что конфигурация может изменяться в зависимости от предпочтений пользователя во время выполнения. Как включить мой модуль для предоставления клиенту API возможности изменять конфигурацию во время выполнения?

Возможно ли внедрить ProviderConfiguration в клиентский контроллер? Есть ли у них какие-либо существенные недостатки в этом подходе?

Текущий код шаблона выглядит следующим образом

//Provider 
angular.module('foobar', []).provider('foobarConfig', [function() { 
    var config = { 
     //config properties here. 
    } 
    var configurationProvider = { 
     //Getters and Setters that work on 'config'. 
     setProperty(prop, value) { 
      if(config[prop] !== undefined) { 
       config[prop] = value; 
      } 
     }, 
     getProperty(prop) { 
      return config[prop]; 
     }, 
     $get: function() { 
      return this; 
     } 
    } 
    return configurationProvider; 
} 

//Chart Directive. 
angular.module('foobar').directive('foobarChart', ['foobarConfig', function(foobarConfig) { 
    //Can use the foobarConfig here. 
}]); 

angular.module('clientApp', [ 'foobar']) 
.config(['foobarConfigProvider', function(foobarConfigProvider) { 
    //Can provide the initial configuration to the module here. 
    foobarConfigProvider.setProperty("foo", "bar"); 
}]); 

angular.module('clientApp').directive('clientFoo', function() { 

    //What should be done to change foobarConfig here? 
}); 

Answer 1

Да, он отлично действует рецепт для обслуживания конфигурации, который доступен в обоих конфигурации и запуска фаз, так foobarConfigProvider.setProperty("foo", "bar") и foobarConfig.setProperty("foo", "bar") могут быть использованы таким же образом.

Для службы конфигурации, которая не имеет зависимостей constant еще более удобная альтернатива:

.constant('foobarConfig', (function() { 
    var config = { 
     // ... 
    }; 

    return { 
     setProperty: function (prop, value) { 
      if(config[prop] !== undefined) { 
       config[prop] = value; 
      } 
     }, 
     getProperty: function (prop) { 
      return config[prop]; 
     } 
    }; 
})()); 

Для ES5-совместимым раствора с ограниченным набором конфигурационных ключей, constant объекта с Object.defineProperty и Object.seal может быть использован, это устраняет необходимость использования пользовательских функций getter/setter. Object.defineProperty может повторяться в течение первоначального config объекта, поэтому не шаблонный код дескриптора не требуется:

.constant('foobarConfig', (function() { 
    var config = { 
     // ... 
    }; 

    var obj = {}; 

    angular.forEach(config, function (value, key) { 
     Object.defineProperty(obj, key, { 
      enumerable: true, 
      writable: true, 
      value: value 
      // no 'get' and 'set' are required if the only purpose for 
      // them is to restrict a set of config keys 
     }) 
    }); 

    Object.seal(obj); 

    return obj; 
})()); 

Обратите внимание, что основное различие (и возможные недостатки) для constant здесь является то, что стоимость услуг в настоящее время охотно определен, foobarConfig будет тот же объект для разных инжекторов. Обычно нет никакой разницы для производства, но это может (или не может) повлиять на тестирование.