AngularJS – dépendances de module, dénonciation de conflit

J'ai deux modules tiers , tous deux définissant une usine avec le même nom. De toute évidence, je n'ai aucun contrôle sur la nomination de ces modules sans avoir recours à un kludge.

De plus, j'ai deux autres modules internes , chacun utilisant un autre des deux modules tiers comme une dépendance (comme ci-dessous). J'étais convaincu que je ne pouvais pas accéder aux composants d'un module non répertorié dans les dépendances du module actuel, mais il s'est avéré que j'avais tort.

Ici, même si own1 dépend de thirdParty1 (qui a défini hello comme hello world ), il fait hi there (from thirdParty2 ) dans le contrôleur. Il en va de même pour la paire des autres modules.

Existe-t-il un moyen de "isoler" les modules afin que je puisse utiliser des choses dont je dépends explicitement? Sinon, quel est le but d'avoir des modules si je peux atteindre n'importe quoi à tout moment (en supposant que le module principal de l'application le comporte comme sa dépendance)? Aussi, si j'ai deux modules avec des composants nommés hello comment puis-je savoir qui va être utilisé?

Voici jsbin pour cela http://jsbin.com/vapuye/3/edit?html,js,output

 angular.module('app', ['own1', 'own2']); //third-party modules angular.module('thirdParty1', []).factory('hello', function () { return 'hello world'; }); angular.module('thirdParty2', []).factory('hello', function () { return 'hi there'; }); // "own" modules angular.module('own1', ['thirdParty1']).controller('Own1Ctrl', function(hello) { this.greet = hello; }); angular.module('own2', ['thirdParty2']).controller('Own2Ctrl', function(hello) { this.greet = hello; });

Et le résultat de:

 <body ng-app="app"> <div ng-controller="Own1Ctrl as own1"> Own1: {{ own1.greet }} </div> <div ng-controller="Own2Ctrl as own2"> Own2: {{ own2.greet }} </div> </body>

Est :

 Own1: hi there Own2: hi there

Vous pouvez demander explicitement une usine d'un certain module (sans injection de dépendance):

 var injector = angular.injector(['thirdParty1']); var hello1 = injector.get('hello'); var injector = angular.injector(['thirdParty2']); var hello2 = injector.get('hello');

Vous pouvez également l'utiliser pour envelopper les usines de tiers dans les propres usines:

 angular.module('own1', ['thirdParty1']).factory('hello1', function () { var injector = angular.injector(['thirdParty1']); var hello = injector.get('hello'); return hello; }); angular.module('own2', ['thirdParty2']).factory('hello2', function () { var injector = angular.injector(['thirdParty2']); var hello = injector.get('hello'); return hello; });

Cela vous permet d'utiliser hello1 et hello2 dans toutes les autres parties de votre application.

Étant donné qu'il n'y a pas d'espace de noms intégré de modules (ou de composants de modules), le meilleur moyen d'atteindre votre objectif est d'utiliser une convention de dénomination unique pour vos modules. La plupart des bibliothèques pour angulaire font cela, et alors vous devriez être prêt à partir.

En plus d'encapsuler le comportement de vos applications, les modules aident à tester et à moquer votre application.

Je ne pense pas qu'il soit possible pour les angulaires de différencier entre deux composants qui sont nommés les mêmes (je pense que cela change avec angulaire 2). Et je pourrais soutenir que deux composants qui sont nommés de la même manière pourraient faire de même et vous devriez regarder pourquoi vous avez besoin des deux?