Угловой провайдер, я не могу вызывать функцию провайдера

Question

Я создаю поставщика для получения конфигурации приложения через Json-файл. Затем я использую его в своем приложении application.config для запуска маршрута из этого объекта конфигурации.

MyApp = angular.module('MyApp', ['MyAppControllers','LocalStorageModule','ui.router']); 

Это код моего провайдера конфигурации:

MyApp.provider('$configuration', function() { 
    return { 
    $get : function($http,localStorageService) { 
     return { 
      getConfiguration:function() {  
       var config = localStorageService.get("configuration"); 
       console.log(config); 
       if(config ==null || config == undefined) { 

        xhr = GetHttpRequest();      
        xhr.onreadystatechange = function() {  
         if (xhr.readyState == 4) {        
          if (xhr.status == 200 || xhr.status == 304) { 
           localStorageService.set("configuration",xhr.responseText); 
           config = xhr.responseText; 
          } else { 
           console.log('## Error loading configuration'); 
          } 
         } 
        } 
        xhr.open('GET','/assets/js/My/config.json',false);  
        xhr.send(null); 
        return JSON.parse(config); 
       } else { 
        return config; 
       }  
      } 
     } 
    } 
    } 

}); 

Вот код моей конфигурации маршрутов:

MyApp.config(['$stateProvider', '$urlRouterProvider','$configurationProvider', 
    function ($stateProvider, $urlRouterProvider,$configurationProvider) { 

    console.log($configurationProvider); 

    configuration=$configurationProvider.getConfiguration(); 

    angular.forEach(configuration.url, function(value, key) {  
      $stateProvider.state(stateName,   
       { 
       url: stateUrl, 
       views: stateView         
       } 
      ); 
    });     
    }   
]); 

Но хром дает мне эту ошибку:

[ $ injector: modulerr] Не удалось создать экземпляр модуля MyApp из-за: ТипError: Cann ВЗ прочитать свойство «получить» неопределенной

Answer 1

Вы возвращаетесь контекст поставщика из $get функции, которая должна быть this.$get вещи, которую вы следующая сделаны при регистрации поставщика с использованием $provide службы. Для получения дополнительной информации читайте мой Another Answer here

Provider

MyApp.provider('$configuration', function() { 
    this.$get: function($http, localStorageService) { 
     return { 
      getConfiguration: function() { 
       ...code here 
      } 
     } 
    } 

}); 

Answer 2

Есть несколько вопросов здесь.

Во-первых, вы неправильно зарегистрировали провайдер - $configurationProvider. Функция поставщика используется для предоставления API для настройки , так как поставщик предоставляет услугу, когда Angular вызывает ее для создания услуги.

.provider("$configuration", function configurationProviderFn(){ 
    this.someConfigurableProperty = "default value"; 
    this.$get = function actualServiceFactory($http, localStorageService){ 
     // returns the service instance 
     return { 
     getConfiguration: function(){...} 
     } 
    } 
}); 

Таким образом, .provider используется, когда вы хотите, чтобы раскрыть некоторые крючки для настройки, как создается служба.

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

Это не сработает.

Угловых первый запускают config блоков всех зарегистрированных модулей, и это не позволит впрыскивать $configuration услуги (и регистрации через .provider не меняется, что один бит).

Кроме того, даже если вы создали экземпляр службы, фактически вызвав функцию своего провайдера $get, Angular не дождался завершения операции async.

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

var appConfig = getConfigration(function onSuccess(){ 
    var rootEl = document.getElementById("MyApp"); 
    angular.bootstap(rootEl, ['MyAppControllers', 'LocalStorageModule', 'ui.router']); 
}); 

Существуют и другие способы с ленивой загрузкой модулей, но это выходит за рамки этого ответа.