angularjs - switch - Cómo ejecutar dos aplicaciones Angular js separadas en la misma página

ng-bind-html angularjs

Question

Nuevo en Angular Siento que me falta algo obvio: ¿no debería poder ejecutar fácilmente para separar aplicaciones (módulos) de AngularJs en la misma página html? Algo como esto:

  <section ng-app="HelloWorldApp" ng-controller="HelloWorldController">
    Hello {{name}}!
  </section> 
  <br />
  <section ng-app="MyNameIsApp" ng-controller="MyNameIsController">
    My Name is {{FirstName}} {{LastName}}!
  </section> 

Javascript:

var HelloWorldApp = angular.module(''HelloWorldApp'', []);
HelloWorldApp.controller(''HelloWorldController'', function($scope) {
  $scope.name = ''World'';
});

var MyNameIsApp = angular.module(''MyNameIsApp'', []);
MyNameIsApp.controller(''MyNameIsController'', function($scope) {
  $scope.FirstName = ''John'';
  $scope.LastName = ''Smith'';
});

Esto solo ejecuta el primer módulo, mientras que el segundo no parece hacer nada. Quiero hacer esto para poder crear directivas reutilizables y encapsuladas para varias páginas que no tengan que nombrar sus módulos de la misma manera.

Ejemplo en vivo: http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ

Terminamos construyendo una pequeña jerarquía de módulos , sin embargo, mi pregunta original puede hacerse con un poco de trabajo (ver más abajo).

Answer 1

De acuerdo con los documentos angulares para ngApp:

Use esta directiva para autoarrancar una aplicación. Sólo se puede utilizar una directiva por documento HTML. La directiva designa la raíz de la aplicación y normalmente se coloca en la raíz de la página.

Parece que es por diseño.

Answer 2

Es posible, pero requiere un poco de codificación a mano. Necesita arrancar las aplicaciones angulares por su cuenta. No te preocupes, no es tan complicado.

• No agregue atributos ng-app en su HTML
• Asegúrate de que puedes recuperar los elementos DOM que contienen la aplicación
• Cuando se carga DOM, debe iniciar las aplicaciones por su cuenta: angular.bootstrap( domElement, [''AppName'']);

Horquilla de usted plunker que funciona: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

Answer 3

Puede especificar cualquier aplicación anidada en el def del módulo de la principal.

angular.module("myapp", [''statusapp'', ''tickerapp'']).controller(....

y en un archivo separado, tiene las otras aplicaciones definidas. Estamos utilizando un motor de plantillas que oculta algo de esto, pero terminará con HTML que contiene ng-apps anidadas y javascript para cada uno que define el módulo / controlador. El código anterior es el truco para obtener más de un bootstrap.