我应该在大型角度应用程序中实例化子模块吗？

Question

I am building a large angular app comprised of various modules

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

In the html I am instantiating individual modules, because I believe there to be a performance improvement over bootstrapping the entire app .

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

However, this means that I have to repeat myself in module configuration. ie:

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 etc will be repeated across modules. Is there a better way to do this?

Answer 1

I'd add a configuration module, that will handle the grunt work of setting up html5Mode, scrollTo etc.

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

And then in your subsequent modules:

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