javascript - regular - w3schools angularjs directive




Como definir dois aplicativos/módulos angulares em uma página? (4)

Eu estou tentando adicionar dois aplicativos / módulos angulares para uma página. Nos violinos abaixo você pode ver que sempre apenas o primeiro módulo, referenciado no código html, funcionará corretamente, enquanto o segundo não é reconhecido pelo angular.

Neste fiddle só podemos executar o método doSearch2 , enquanto que neste fiddle apenas o método doSearch funciona corretamente.

Eu estou procurando a maneira correta de colocar dois módulos angulares em uma página.


Apenas um aplicativo AngularJS pode ser auto-inicializado por documento HTML. O primeiro ngApp encontrado no documento será usado para definir o elemento raiz como auto-bootstrap como um aplicativo. Para executar vários aplicativos em um documento HTML, você deve inicializá-los manualmente usando o angular.bootstrap. Aplicativos AngularJS não podem ser aninhados uns dentro dos outros. - http://docs.angularjs.org/api/ng.directive:ngApp

Veja também


Eu criei uma diretiva alternativa que não tem limitações do ngApp . É chamado ngModule . Isto é o que o seu código ficaria quando você usá-lo:

<!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>

Você pode obter o código-fonte em:

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

É basicamente o mesmo código usado internamente pelo AngularJS sem as limitações.


Inicialização manual de ambos os módulos funcionará. Veja isso

  <!-- 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']);
});

Aqui está o link para o Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview

NOTA: Em html, não há ng-app . id foi usado em vez disso.


Por que você quer usar vários [ng-app]? Como o Angular é retomado usando módulos, você pode usar um aplicativo que usa várias dependências.

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

Tenha em mente que se você quiser usar o controlador dentro do controlador você tem que usar a sintaxe controllerAs, assim:

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




angularjs