Как ввести зависимость в module.config(configFn) в angular

В Angular мы можем ввести $routeProvider в функцию config

module.config(function ($routeProvider) {


});

Я хочу добавить в него свои услуги, например

module.config(function ($routeProvider, myService) {


});

Я уверен, что служба определена правильно, но она выдает исключение, говорящее, что unknown myService, событие, когда я ввожу, например

module.config(function ($routeProvider, $http) {


});

он все еще говорит unknown $http.

Знаете ли вы, почему?

Ответ 1

От страницы Модули, раздел "Загрузка модуля и зависимости":

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

Запустить блоки - выполняются после создания инжектора и используются для запуска приложения. Только экземпляры и константы могут быть введены в блоки запуска. Это необходимо для предотвращения дальнейшей конфигурации системы во время выполнения приложения.

Таким образом, вы не можете вводить свой собственный сервис или встроенные службы, такие как $http в config(). Вместо этого используйте run().

Ответ 2

У меня недостаточно репутации, чтобы опубликовать комментарий, но хотелось добавить к ответу Mark.

Вы можете сами регистрировать поставщиков. Они являются в основном объектами (или конструкторами) с помощью метода $get. При регистрации поставщика стандартная версия может использоваться как служба или factory, но версия поставщика может быть использована ранее. Таким образом, поставщик grumpy, зарегистрированный как

angular.module('...', [])
    .provider('grumpy', GrumpyProviderObject)

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

    .config(['grumpyProvider', ..., function (grumpyProvider, ...) { ... }])

и может быть введен в контроллеры просто как

    .controller('myController', ['grumpy', ..., function (grumpy, ...) { ... }])

Объект grumpy, который вводится в myController, является просто результатом использования метода $get на GrumpyProviderObject. Примечание. Поставщик, который вы регистрируете, также может быть обычным конструктором JavaScript.

Примечание: в соответствии с комментарием @Problematic, что инициализация провайдера (вызов angular.module().provider(…) должен появиться перед тем, как будет доступна функция конфигурации.

Ответ 3

Вы можете сделать это следующим образом:

(function() {
    'use strict';

    angular.module('name', name).config(config);
    // You can do this:
    config.$inject = ['$routeProvider', 'myService'];

    function config($routeProvider, myService) {
        // Or better to use this, but you need to use ng-annotate:
        /* ngInject */

    }
});

Лучше всего описать здесь

Ответ 4

Вы можете вручную вызвать angular.injector, чтобы получить доступ к службам, которые не имеют зависимостей в блоке .config() вашего приложения. Если созданная служба не имеет каких-либо зависимостей, которые необходимо пройти, вы можете, вероятно, использовать это:

angular.module('myApp').config(function () {
    var myService = angular.injector(['ng']).get('myService');
});

Это работает и для других простых сервисов, таких как $http:

angular.module('myApp').config(function () {
    var http = angular.injector(['ng']).get('$http');
});

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

Ответ 5

Если вы хотите ввести зависимость (скажем, из Сервиса), чтобы вызвать форму функции в маршрутах (.config), как показано ниже templateProvider.getTemplate('about')

.state('index.about', {  

    url: "/about",  
    templateUrl: templateProvider.getTemplate('about'),  
    controller: 'AboutCtrl',  
    controllerAs: 'about',  
    data: {pageTitle: 'About Us Page'}  

})  

Необходимо создать поставщика. Not Service и Factory.

Вот настоящий пример поставщика, который генерирует путь к шаблону из имени:

(function () {  

    'use strict';  
    angular  

        .module('mega-app')  

        .provider('template', provider);  

      function provider(CONSTANT) {  

        // The provider must include a $get() method This $get() method  
        // will be invoked using $injector.invoke() and can therefore use  
        // dependency-injection.  
       this.$get = function () {  

            return {}  

        };  
       /**  
         * generates template path from it's name  
         *  
         * @param name  
         * @returns {string}  
         */  
       this.getTemplate = function (name) {  

            return CONSTANT.TEMPLATES_URL + name + '/' + name + '.html';  
        }  


        /**  
         * generates component path from it's name  
         * @param name  
         * @returns {string}  
         */  
       this.getComponent = function (name) {  

            return CONSTANT.COMPONENTS_URL + name + '.html';  
        }  

    };  
})();  

Использование такого провайдера в маршрутах (.config) будет следующим:

(function () {  

    'use strict';  
    angular  

        .module('mega-app')  

        .config(routes);  
   function routes($stateProvider, $urlRouterProvider, templateProvider) {  



       $stateProvider  
            //----------------------------------------------------------------  
            // First State  
            //----------------------------------------------------------------  
            .state('index', {  

                abstract: true,  
                url: "/index",  
                templateUrl: templateProvider.getComponent('content'),  
                controller: 'IndexCtrl',  
                controllerAs: 'index',  
            })  

            //----------------------------------------------------------------  
            // State  
            //----------------------------------------------------------------  
            .state('index.home', {  

                url: "/home",  
                templateUrl: templateProvider.getTemplate('home'),  
                controller: 'HomeCtrl',  
                controllerAs: 'home',  
                data: {pageTitle: 'Home Page'}  

            })  

            //----------------------------------------------------------------  
            // State  
            //----------------------------------------------------------------  
            .state('index.about', {  

                url: "/about",  
                templateUrl: templateProvider.getTemplate('about'),  
                controller: 'AboutCtrl',  
                controllerAs: 'about',  
                data: {pageTitle: 'About Us Page'}  

            })  

        //----------------------------------------------------------------  
        // Default State  
        //----------------------------------------------------------------  
       $urlRouterProvider.otherwise('/index/home');  
    };  
})();  

Примечание для VIP:

чтобы ввести поставщика, вы должны отправить его с помощью xxxProvider (это имя провайдера не должно быть постфиксным, только при инъекции в .config).

Ответ 6

Если это может сделать что-то проще для некоторых из вас.

Per объясненный в этом ответе, вы можете просто добавить Provider к своей настраиваемой службе, а затем получить доступ к внутренним функциям с помощью $get().

Это может быть не самое чистое решение, но оно выполняет эту работу.

module.config(function ($routeProvider, myServiceProvider) {
 // Call a function hello() on myService.
 myServiceProvider.$get().hello();
});

Ответ 7

angular.module('modulename').config(['$routeprovider','$controllerprovider',function($routeprovider,$controllerprovider){
angular.module('modulename').controllerProvider = $controllerProvider;
angular.module('modulename').routeprovider=$routeprovider;
$routeprovider.when('/',{
        templateUrl: 'urlname',
        controller: 'controllername',
        resolve:{
             'variable':variablenamewithvalue 
        }
 }).otherwise({
        redirectTo: '/'
      });

  }]);

Ответ 8

Вы можете попробовать следующее:

module.config(['$routeProvider', '$http', function ($routeProvider, $http) {}]);