wie man Abhängigkeit in module.config (configFn) im Winkel einfügt

In Angular können wir $routeProviderdie configFunktion injizieren

module.config(function ($routeProvider) {


});

Ich möchte meinen Service gerne einbringen

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


});

Ich bin sicher, dass der Dienst richtig definiert ist, aber es wird eine Ausnahme ausgelöst, die besagt, dass unknown myServiceEreignis, wenn ich wie injiziere

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


});

es sagt immer noch unknown $http.

Weißt du, warum?

Auf der Seite "Module", Abschnitt "Laden und Abhängigkeiten von Modulen ":

Konfigurationsblöcke - werden während der Anbieterregistrierungs- und Konfigurationsphase ausgeführt. Nur Anbieter und Konstanten können in Konfigurationsblöcke eingefügt werden. Dies soll verhindern, dass Dienste versehentlich instanziiert werden, bevor sie vollständig konfiguriert wurden.

Blöcke ausführen - werden ausgeführt, nachdem der Injektor erstellt wurde, und werden zum Kickstart der Anwendung verwendet. In Ausführungsblöcke können nur Instanzen und Konstanten eingefügt werden. Dies soll eine weitere Systemkonfiguration während der Laufzeit der Anwendung verhindern.

Sie können also keinen eigenen Dienst oder integrierte Dienste wie $ http in config () einfügen. Verwenden Sie stattdessen run () .

Ich habe nicht genug Ruf, um einen Kommentar zu schreiben, wollte aber Marks Antwort ergänzen.

Sie können Anbieter selbst registrieren. Sie sind im Grunde Objekte (oder Konstruktoren) mit einer $getMethode. Wenn Sie einen Anbieter registrieren, kann die Standardversion davon wie ein Dienst oder eine Fabrik verwendet werden, eine Anbieterversion kann jedoch früher verwendet werden. Also ein grumpyAnbieter, der als registriert ist

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

ist dann in der Konfigurationsfunktion als verfügbar

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

und kann einfach als in Steuerungen injiziert werden

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

Das grumpyObjekt, in das injiziert wird, myControllerist einfach das Ergebnis der Ausführung der $getMethode auf dem GrumpyProviderObject. Beachten Sie, dass der von Ihnen registrierte Anbieter auch ein regulärer JavaScript-Konstruktor sein kann.

Hinweis: Gemäß dem Kommentar von @Problematic muss die Provider-Initialisierung (der Aufruf von angular.module().provider(…)muss vor der Konfigurationsfunktion erfolgen, um verfügbar zu sein).

Sie können es so machen:

(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 */

    }
});

Es ist eine bewährte Methode, die hier beschrieben wird

Sie können manuell anrufen angular.injector, um Zugriff auf Dienste zu erhalten, die während des .config()Blockierens Ihrer App keine Abhängigkeiten aufweisen . Wenn der von Ihnen erstellte Dienst keine Abhängigkeiten aufweist, die durchlaufen werden müssen, können Sie wahrscheinlich Folgendes verwenden:

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

Dies funktioniert auch für andere einfache Dienste wie $http:

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

Hinweis: Normalerweise sollten Sie während Ihrer Konfigurationsphase keine Dienste einfügen müssen. Es ist besser, einen Anbieter zu erstellen, der die Konfiguration ermöglicht. Die Dokumente sagen, dass diese Funktionalität für Fälle verfügbar ist, in denen Bibliotheken von Drittanbietern Zugriff auf den Injektor einer bereits laufenden Angular-App benötigen.

Wenn Sie eine Abhängigkeit (z. B. von einem Dienst) einfügen möchten, um ein Funktionsformular in Routen (.config) aufzurufen, wie unten gezeigt templateProvider.getTemplate ('about')

.state('index.about', {  

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

})  

Sie müssen einen Provider erstellen. Weder Service noch Fabrik.

Hier ist ein echtes Beispiel eines Anbieters, der den Vorlagenpfad aus dem Namen generiert:

(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';  
        }  

    };  
})();  

Die Verwendung eines solchen Anbieters in den Routen (.config) ist wie folgt:

(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 Hinweis:

Um den Provider zu injizieren, müssen Sie ihn mit xxxProvider postfixieren (dieser Name des Providers sollte nicht postfixiert werden, sondern nur beim Injizieren in die .config).

Wenn es einigen von Ihnen die Sache leichter machen kann.

Wie in dieser Antwort erläutert , können Sie einfach Provideran Ihren benutzerdefinierten Dienst anhängen und dann mit auf die internen Funktionen zugreifen $get().

Es ist vielleicht nicht die sauberste Lösung, aber es macht den Job.

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

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: '/'
      });

  }]);

Sie könnten dies versuchen:

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