javascript - 我应该在大型 Angular 应用程序中实例化子模块吗

Question

我正在构建一个由各种模块组成的大型 Angular 应用程序

- app
  -- member
    --- newMember
    --- memberDashboard
  -- linguistics
  -- etc
     --- etc etc

在 html 中，我实例化了各个模块，因为我相信比引导整个应用程序有性能改进。

<div ng-app="linguistics">
    <div ui-view autoscroll="true"></div>
</div>

但是，这意味着我必须在模块配置中重复自己。即:

angular.module('linguistics', [
    'ui.router',
    'ui.bootstrap',
    'googlechart',
    'babelServices',
    'babelFilters'
]).config(function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $locationProvider.html5Mode(true);
}).config(function($provide) {
    return $provide.decorator('$uiViewScroll', function($delegate, $window) {
        return function(uiViewElement) {
            //eventually do something more intelligent with the uiViewElement
            return $window.scrollTo(0, 0);
        };
    });
});

html5Mode、scrollTo 等将在模块之间重复。有更好的方法吗？

Answer 1

我会添加一个配置模块，它将处理设置 html5Mode、scrollTo 等的繁重工作。

angular.module('configuration', ['ui.router'])
  .config(function ($locationProvider, $provide) {
    $locationProvider.html5Mode(true);

    // For angular 1.3
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: /* true/false */
    });

    $provide.decorator('$uiViewScroll', function ($delegate, $window) {
      return function (uiViewElement) {
        return $window.scrollTo(0, 0);
      }
    });
  });

然后在后续模块中:

angular.module('linguistics', ['configuration']);