Mehrere Konfigurationsblöcke im Winkelmodul

Question

Ich muss einige Abhängigkeiten in meiner App lösen (Daten für meine Dienste abrufen usw.), bevor sie geladen wird. Ich möchte diese heraustrennen, so dass ich einen Konfigurationsblock für die Haupt-App und dann einen oder mehrere Konfigurationsblöcke für andere Teile der App habe.

Letztendlich hoffe ich, dass es die Abhängigkeiten für die Haupt-App auflösen, laden Sie die damit verbundenen Komponenten, und dann den Rest auflösen und diese Teile laden, so ist es ein bisschen reagierender beim Laden.

Dies ist, was ich mit so weit habe kommen, aber es ist nicht die Lösung, die Abhängigkeiten in der ersten Konfigurationsblock:

angular.module('myApp', ['ui.router', 'kendo.directives']) 
    .config(function($stateProvider) { 
    $stateProvider 
     .state('settings', { 
     url: '/', 
     views: { 
      'mainNav': { 
       templateUrl: 'scripts/directives/mainNav/mainNav.html', 
       controller: 'mainNavCtrl' 
      //etc 
      } 
     }, 
     resolve: { 
      fetchSettings: function(Settings) { 
      return Settings.fetch; 
      } 
     } 
     }); 
    }) 
    .config(function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
     .state('otherPart', { 
     url: '', 
     views: { 
      'otherPart': { 
      templateUrl: 'views/otherPart.html' 
      //etc 
      } 
     }, 
     resolve: { 
      fetcherPromise: function(User, MyData) { 
      var fns = [ 
       MyData.fetch, 
       User.fetchEntitlements 
      ]; 
      return fetcher.inSerial(fns); 
      } 
     } 
     }) 
     ; 

    }); 

Bin ich noch auf dem richtigen Weg?

Answer 1

Sie sollten „den Rest“ in ein separates Modul verschieben:

angular.module('separateModule', ['ui.router', 'kendo.directives']) 
     .config(function ($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise('/'); 
     $stateProvider 
      .state('otherPart', { 
      url: '', 
      views: { 
       'otherPart': { 
       templateUrl: 'views/otherPart.html' 
       //etc 
       } 
      }, 
      resolve: { 
       fetcherPromise: function(User, MyData) { 
       var fns = [ 
        MyData.fetch, 
        User.fetchEntitlements 
       ]; 
       return fetcher.inSerial(fns); 
       } 
      } 
      }) 
      ; 

     }); 
angular.module('myApp', ['separateModule', 'ui.router', 'kendo.directives']) 
    .config(function($stateProvider) { 
    $stateProvider 
     .state('settings', { 
     url: '/', 
     views: { 
      'mainNav': { 
       templateUrl: 'scripts/directives/mainNav/mainNav.html', 
       controller: 'mainNavCtrl' 
      //etc 
      } 
     }, 
     resolve: { 
      fetchSettings: function(Settings) { 
      return Settings.fetch; 
      } 
     } 
     }); 
    }); 

Wenn ich richtig bin es nicht die Abhängigkeiten für den ersten Block zu lösen, weil es mit dem zweiten .config überschrieben wurde.

Hier ist der Code für eine Config, wenn Sie brauchen, dass:

angular.module('myApp', ['ui.router', 'kendo.directives']) 
.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('settings', { 
      url: '/', 
      views: { 
       'mainNav': { 
        templateUrl: 'scripts/directives/mainNav/mainNav.html', 
        controller: 'mainNavCtrl' 
        //etc 
       } 
      }, 
      resolve: { 
       fetchSettings: function(Settings) { 
        return Settings.fetch; 
       } 
      } 
     }) 
     .state('otherPart', { 
      url: '', 
      views: { 
       'otherPart': { 
        templateUrl: 'views/otherPart.html' 
        //etc 
       } 
      }, 
      resolve: { 
       fetcherPromise: function(User, MyData) { 
        var fns = [ 
         MyData.fetch, 
         User.fetchEntitlements 
        ]; 
        return fetcher.inSerial(fns); 
       } 
      } 
     }); 

    $urlRouterProvider.otherwise('/'); 
});