javascript - span - ¿Cómo definir dos aplicaciones/módulos angulares en una página?

span html5

Question

Estoy tratando de agregar dos aplicaciones / módulos angulares a una página. En los violines a continuación, puede ver que siempre solo el primer módulo, al que se hace referencia en el código html, funcionará correctamente, mientras que el segundo no será reconocido por angular.

En este fiddle solo podemos ejecutar el método doSearch2 , mientras que en este fiddle solo el método doSearch funciona correctamente.

Estoy buscando la forma de colocar correctamente dos módulos angulares en una página.

Answer 1

Solo una aplicación AngularJS puede ser auto-bootstrapped por documento HTML. La primera ngApp que se encuentra en el documento se usará para definir el elemento raíz como autoarranque como una aplicación. Para ejecutar múltiples aplicaciones en un documento HTML, debe manualmente cargarlas usando angular.bootstrap. Las aplicaciones AngularJS no se pueden anidar entre sí. - http://docs.angularjs.org/api/ng.directive:ngApp

Ver también

• https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ
• http://docs.angularjs.org/api/angular.bootstrap

Answer 2

¿Por qué quieres usar múltiples [ng-app]? Como Angular se reanuda mediante el uso de módulos, puede usar una aplicación que usa múltiples dependencias.

Javascript:

// setter syntax -> initializing other module for demonstration
angular.module(''otherModule'', []);

angular.module(''app'', [''otherModule''])
.controller(''AppController'', function () {
    // ...do something
});

// getter syntax
angular.module(''otherModule'')
.controller(''OtherController'', function () {
    // ...do something
});

HTML:

<div ng-app="app">
    <div ng-controller="AppController">...</div>
    <div ng-controller="OtherController">...</div>
</div>

EDITAR

Tenga en cuenta que si desea utilizar el controlador dentro del controlador, debe usar la sintaxis del controlador como se muestra a continuación:

<div ng-app="app">
    <div ng-controller="AppController as app">
        <div ng-controller="OtherController as other">...</div>
    </div>
</div>

Answer 3

El arranque manual de ambos módulos funcionará. Mira este

  <!-- IN HTML -->
  <div id="dvFirst">
    <div ng-controller="FirstController">
      <p>1: {{ desc }}</p>
    </div>
  </div>

  <div id="dvSecond">
    <div ng-controller="SecondController ">
      <p>2: {{ desc }}</p>
    </div>
  </div>



// IN SCRIPT       
var dvFirst = document.getElementById(''dvFirst'');
var dvSecond = document.getElementById(''dvSecond'');

angular.element(document).ready(function() {
   angular.bootstrap(dvFirst, [''firstApp'']);
   angular.bootstrap(dvSecond, [''secondApp'']);
});

Aquí está el enlace a Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview

NOTA: En html, no hay ng-app . id se ha usado en su lugar.

Answer 4

Esta podría no ser una respuesta directa. Pero mientras bootstrap ng-app por favor cuiden lo siguiente.

No inicie la aplicación en un elemento con una directiva que use la transclusión, como ngIf, ngInclude y ngView. Hacer esto desvía la aplicación $ rootElement y el inyector de la aplicación, haciendo que las animaciones dejen de funcionar y hagan que el inyector sea inaccesible desde fuera de la aplicación.

Para obtener más información sobre angular.bootstrap , consulte la documentación .

Answer 5

Hice un POC para una aplicación angular que usa múltiples módulos y enrutadores para anidar aplicaciones secundarias en una aplicación de una sola página. Puede obtener el código fuente en: https://github.com/AhmedBahet/ng-sub-apps

Espero que esto ayude

Answer 6

Puede arrancar múltiples aplicaciones angulares, pero:

1) Necesitas arrancarlos manualmente

2) No debe usar "documento" como raíz, sino el nodo donde está contenida la interfaz angular:

var todoRootNode = jQuery(''[ng-controller=TodoController]'');
angular.bootstrap(todoRootNode, [''TodoApp'']);

Esto sería seguro.

Answer 7

ngApp una directiva alternativa que no tiene las limitaciones de ngApp . Se llama ngModule . Así es como se vería el código cuando lo usa:

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>
        <script src="angular.ng-modules.js"></script>
        <script>
          var moduleA = angular.module("MyModuleA", []);
          moduleA.controller("MyControllerA", function($scope) {
              $scope.name = "Bob A";
          });

          var moduleB = angular.module("MyModuleB", []);
          moduleB.controller("MyControllerB", function($scope) {
              $scope.name = "Steve B";
          });
        </script>
    </head>
    <body>
        <div ng-modules="MyModuleA, MyModuleB">
            <h1>Module A, B</h1>
            <div ng-controller="MyControllerA">
                {{name}}
            </div>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>

        <div ng-module="MyModuleB">
            <h1>Just Module B</h1>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>
    </body>
</html>

Puedes obtener el código fuente en:

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

Es esencialmente el mismo código utilizado internamente por AngularJS sin las limitaciones.