AngularJS: Comment imbriquer des applications au sein de l'angulaire de l'app

Vous ne pouvez pas démarrer un module à l'intérieur d'un autre bootstrap module. L'amorçage compile le point de vue et se lie à un rootScope à elle, parcourant un chemin à travers les DOM et la configuration de la portée des liaisons et de l'exécution de la directive de liaison de fonctions tout le chemin à travers. Si vous n'avez que deux fois, vous allez rencontrer des problèmes.

Vous allez probablement avoir à repenser votre architecture. Je pense que peut-être le mot "module" ou "app" comme il concerne Angulaire est un terme impropre et vous conduit dans la mauvaise voie.

Chaque "utilisateur de l'application installée" dans votre application devrait probablement vraiment être contrôlées par un contrôleur dans votre application module, ou inscrit à un module référencées par votre application module. Vous ne devez pas être "à partir de plusieurs applications", vous auriez vraiment juste de commencer un, le référencement, les autres modules, puis à l'aide de Contrôleurs à partir de ces modules de contrôler les parties de votre point de vue sur l'écran.

De ce que vous pouvez faire, c'est quand un nouveau "widget" a été installé, vous êtes enregistrer le fichier de module (.js) avec le système, qui contient un contrôleur nommé WidgetCtrl, puis lorsque votre page est chargée, vous feriez référence du widget du module sur votre application module. À partir de là, il devrait être disponible pour l'attribution dynamique d'éléments à l'aide de ng-controller et/ou ng-include.

J'espère qu'un sens.

bien si chaque sous-app est dans son propre module, vous pouvez simplement utiliser angulaire.bootstrap pour charger ce module de manière dynamique. lorsque l'url d'une application spécifique des charges, vous pouvez récupérer le script nécessaire(s), puis, lorsque la promesse de se résout, vous pouvez faire quelque chose le long des lignes de:

//grab a reference to the element where you'll be loading the sub-app
var subapp = document.getElementById('subapp-id');

//assuming the script you get back contains an angular module declaration named
//'subapp', manually start the sub-app
angular.bootstrap(angular.element(subapp), ['subapp']);

espère que cette aide

Je sais que c'est assez vieux maintenant, mais je cherchais un moyen pour intégrer une application AngularJS dans Angulaire application et utilisé les réponses de ce post pour le faire donc je pensais que je poste le plunker ici pour quelqu'un d'autre la recherche d'une solution similaire.

Il y avait deux façons que j'ai trouvé pour le faire, à la fois utilisé manuel d'amorçage de la angularjs app au sein de la ngOnInit d'une composante Angulaire:

ngOnInit(): void {
  //manually bootstrap the angularjs app
  angular.bootstrap(document.getElementById('ngListApp'), ['list-app']);
}

L'ensemble de la ngNonBindable l'attribut de l'élément qui sera amorcé:

<div ngNonBindable #insert>
  <!-- can insert the angular js template directly here, inside non-bindable element -->
  <div id="ngListApp" ng-controller="ListController as list">
    <input ng-model="inputValue" />
    <ul>
      <li ng-repeat="item in items">{{ item }}</li>
    </ul>
  </div>
</div>

Ou d'injecter de l'angularjs modèle html dans l'élément dans la ngOnInit gestionnaire d'événement à l'intérieur d'une composante Angulaire de sorte que Angulaires ne pas essayer d'interpréter le code AngularJS (surtout interpolation de AngularJS propriétés dans les DOM avec les accolades) lors de la compilation.

ngOnInit(): void{
  //insert angularjs template html here
  this.div.nativeElement.innerHTML = this.htmlTemplate;

  //then manually bootstrap the angularjs app
  angular.bootstrap(document.getElementById('ngListApp'), ['list-app']);
}

La Plunker est ici:

http://plnkr.co/plunks/0qOJ6T8roKQyaSKI