Wiele bloków konfiguracji w module kątowym

Question

Muszę rozwiązać niektóre zależności (pobieranie danych dla moich usług itp.) W mojej aplikacji przed jej załadowaniem. Chciałbym je rozdzielić, tak, żebym miał jeden blok konfiguracji dla głównej aplikacji, a następnie jeden lub więcej bloków konfiguracyjnych dla innych części aplikacji.

Ostatecznie, mam nadzieję, że uda mi się rozwiązać zależności dla głównej aplikacji, załaduję powiązane z nią komponenty, a następnie rozwiązam resztę i załaduję te części, więc jest to trochę bardziej responsywne podczas ładowania.

To co mam wymyślić tak daleko, ale to nie jest rozwiązanie zależności w pierwszym bloku config:

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); 
      } 
     } 
     }) 
     ; 

    }); 

jestem nawet na dobrej drodze?

Answer 1

Należy przesunąć „resztę” do osobnego modułu:

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; 
      } 
     } 
     }); 
    }); 

Jeśli się nie mylę to nie było rozwiązywanie zależności dla pierwszego bloku, ponieważ był zastąpione drugim .config.

Oto kod dla jednej konfiguracji, jeśli trzeba, że:

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