refactor grand module AngularJS config dans des fichiers séparés

Problème: Grand config()

La config de mon application AngularJS est de plus en plus assez grand. Comment feriez-vous pour refactoriser le code suivant dans des fichiers séparés?

//app.js
angular.module('myApp')
    .config(function($urlRouterProvider, $stateProvider, $httpProvider) {
        //Configure routing (uiRouter)
        $urlRouterProvider.when('/site', '/site/welcome');
        $stateProvider.state('main', ...
        ...

        //Configure http interceptors
        $httpProvider.interceptors.push(function () {              
            ...
        });
    });

L'Option 1. Plusieurs config()s

Je sais que je peux avoir plusieurs config()s et de les placer dans des fichiers séparés comme ceci:

//app.js
angular.module('myApp');

//routerConfiguration.js
angular.module('myApp')
    .config(function($urlRouterProvider, $stateProvider) {
        //Configure routing (uiRouter)
        $urlRouterProvider.when('/site', '/site/welcome');
        $stateProvider.state('main', ...
        ...

//httpInterceptorConfig.js
angular.module('myApp')
    .config(function($httpProvider) {
        //Configure http interceptors
        $httpProvider.interceptors.push(function () {              
            ...
        });
    });

Ce que je n'aime pas à propos de cela, c'est que dans l'original app.js, il n'y a aucun moyen d'en obtenir une vue d'ensemble de ce qui est exécuté au démarrage.

L'Option 2. Injecter quelque chose

Je préfère faire quelque chose de ce genre, car il serait plus facile de voir ce qui est configurée, directement dans le app.js. Cependant je sais que ce n'est pas possible, puisque l'on ne peut pas injecter des services en config().

Puis-je utiliser les fournisseurs de résoudre ce problème? Est-il un meilleur moyen?

//app.js
angular.module('myApp')
    .config(function(routerConfig, httpInterceptorConfig) {
        routerConfig.setup();
        httpInterceptorConfig.setup();
    });

//routerConfig.js
angular.module('myApp')
    .factory('routerConfig', function($urlRouterProvider, $stateProvider) {
        return {
            setup: function() {
                //Configure routing (uiRouter)
                $urlRouterProvider.when('/site', '/site/welcome');
                $stateProvider.state('main', ...
                ...
            }
        };
    });
});

//httpInterceptorConfig.js
angular.module('myApp')
    .factory('httpInterceptorConfig', function($httpProvider) {
        return {
            setup: function() {
                //Configure http interceptors
                $httpProvider.interceptors.push(function () {              
                ...
            }
        };
    });
});

source d'informationauteur Joel

  1. 11

    Vous pouvez utiliser .constant comme une dépendance dans un .configvous pouvez utiliser la config déclaration comme un manuel de composition de la racine. Par exemple:

    angular.module('myApp')
    .config(function($urlRouterProvider, $stateProvider, $httpProvider,
                     routerConfig, httpInterceptorConfig) {
        routerConfig($urlRouterProvider, $stateProvider);
        httpInterceptorConfig($httpProvider);
    });

//routerConfig.js
angular.module('myApp')
    .constant('routerConfig', function($urlRouterProvider, $stateProvider) {
        ...
    });

//httpInterceptorConfig.js
angular.module('myApp')
    .constant('httpInterceptorConfig', function($httpProvider) {          
        ...
    });

    Inconvénients de cette approche sont que vous avez à injecter tous de votre config dépendances dans la racine de la fonction config manuellement puis de les injecter dans votre constante config fonctions. Si vous avez beaucoup de différents config fonctions, cela pourrait être gênant. Il peut aussi regarder un peu comme votre config fonctions ayant des dépendances injecté par Angulaire, mais en fait, vous le faites manuellement. Vous devez vous assurer que vous n'oubliez pas de faire le manuel de câblage chaque fois que vous ajoutez une nouvelle fonction config.

    Mon approche préférée est juste pour avoir un dossier nommé "config" contenant exclusivement des appels config.

  2. 6

    Je regarde browserify

    Il vous permet d'utiliser le balisage pour exiger des modules dans votre javascript.

    Cela vous permettrait de casser votre config en plusieurs fichiers tout en assurant leur ensemble (voir exemple).

    browserify compile votre javascript en un seul bundle.js par récursivement retraçant l'exige votre fichier javascript.

    Vous suffit alors d'inclure <script src="bundle.js"></script> sur votre index.html

    Court Exemple

    Javascript

    'use strict';

require('angular/angular');
require('angular-ui/ui-router');

var app = angular.module('vw', ['ui.router', 'myApp.feature1', 'myApp.feature2'])
                 .config(require('./config/route'))
                 .config(require('./config/httpProvider'));

angular.bootstrap(document, ['myApp']);

    Structure Du Fichier

    • myApp
      • config
        • route.js
        • httpProvider.js
      • myApp.js
      • index.html