web-dev-qa-db-fra.com

Angular ajouter des modules après angular.bootstrap

J'utilise météore + angulaire. Mon intention est d’ajouter plus de dépendances après le démarrage de l’application (c’est parce que le paquet est celui qui gère le démarrage au début et que je n’ai pas beaucoup de contrôle sur lui). Ce faisant, j'aimerais également appliquer une structure de code de base dans laquelle, par exemple, je compilerais tous les contrôleurs dans un module.

Voici l'idée de base:

'use strict';

angular.module('app.controllers', [])

    .controller('MainCtrl', function() {
        // ...
    })

    .controller('SubCtrl', function() {
        // ...
    })

    .controller('AnotherCtrl', function() {
        // ...
    });

Ensuite, incluez cela dans le module principal en tant que dépendance:

angular.module('app', [
    'app.filters',
    'app.services',
    'app.directives',
    'app.controllers' // Here
]);

Après quelques recherches, j'ai découvert que ce que j'essaie de faire (Ajouter des dépendances après l'amorçage) fait en réalité partie d'une demande de fonctionnalité adressée à l'équipe angulaire. Donc, mon option utilise, par exemple, les fonctions $controllerProvider et register():

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('MainCtrl', function($scope) {
        // ...
    });
});

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('SubCtrl', function($scope) {
        // ...
    });
});

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('AnotherCtrl', function($scope) {
        // ...
    });
});

Cela fonctionne bien que pas si élégant. Les questions sont:

  • Quelle est une manière plus élégante de faire les parties config et register?
  • Y a-t-il un moyen d'enregistrer un module à la place?
angularjsmeteor
20
user1966211

Créez votre module:

angular.module('app.controllers', []);

Ajoutez-le comme dépendance:

angular.module('app').requires.Push('app.controllers');
12
Diego

La seule méthode efficace que je connaisse consiste à remplacer la fonction angular.module par votre propre fonction renvoyant le module utilisé pour amorcer votre application.

var myApp = angular.module('myApp', []);    
angular.module = function() {
    return myApp;
}

Ainsi, tous les modules enregistrés ultérieurement sont effectivement enregistrés dans votre module myApp. 

Cette méthode combinée à celle que vous décrivez dans la question (en utilisant des fournisseurs tels que $controllerProvider) vous permettra d’ajouter des "modules" après angular.bootstrap.

Démo

Voir ce jsfiddle pour une démo: https://jsfiddle.net/josketres/aw3L38r4/

Inconvénients

  • Les blocs config des modules ajoutés après angular.bootstrap ne seront pas appelés. Peut-être y a-t-il un moyen de résoudre ce problème, mais je ne l'ai pas trouvé.
  • Remplacer angular.module ressemble à un "hack".
1
josketres

selon cette présentation (diapositive 12), vous pouvez affecter controllerProvider à l'application. 

Exemple de remplacement de la méthode controller du module : http://jsfiddle.net/arzo/HB7LU/6659/

var myApp = angular.module('myApp', []);

//note overriding controller method might be a little controversial :D 
myApp.config(function allowRegisteringControllersInRuntime($controllerProvider) {
    var backup = myApp.controller;
    myApp.controller = $controllerProvider.register;
    myApp.controller.legacy = backup;
})

myApp.run(function ($rootScope, $compile) {

    myApp.controller('MyCtrl', function($scope) {
        $scope.name = 'Superhero';
    })

    var elem;
    var scope=$rootScope;
    elem = $compile('<p ng-controller="MyCtrl">{{name}}</br><input ng-model="name" /></p>')($rootScope, function (clonedElement, scope) {
        console.log('newly created element', clonedElement[0])
        document.body.appendChild(clonedElement[0]);
    });
    console.log('You can access original register via', myApp.controller.legacy);
})
1
test30