角模块中的多个配置块 [英] Multiple config blocks in angular module

问题描述

我需要解决一些依赖关系（对我的服务获取数据等）在我的应用程序加载之前。我想这些分离出来，让我对主应用程序有一个配置块，然后为应用程序的其他部分的一个或多个配置块。

I need to resolve some dependencies (fetching data for my services, etc.) in my app before it loads. I would like to separate these out, so that I have one config block for the main app, and then one or more config blocks for other parts of the app.

最后，我希望把它解析为主要应用的依赖性，加载与相关的组件，然后解决的休息和加载这些部件，所以当加载它有点反应更灵敏。

Ultimately, I'm hoping to have it resolve the dependencies for the main app, load the components associated with that, and then resolve the rest and load those parts, so it's a little more responsive when loading.

这是什么我已经出来了，到目前为止，但它没有解决的第一个配置块的依赖关系：

This is what I've come up with so far, but it is not resolving the dependencies in the first config block:

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

  });

我是即使是在正确的轨道？

Am I even on the right track?

推荐答案

您应该休息移动到一个单独的模块：

You should move "the rest" to a separate module:

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

如果我是正确的它不是解决第一个块的依赖，因为它被用覆盖第二的.config 。

If I'm correct it wasn't resolving the dependencies for the first block because it was being overwritten with the second .config.

下面是你的code一个配置，如果你需要的是：

Here is your code for one config if you need that:

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

这篇关于角模块中的多个配置块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！