Как определить два angular приложения/модули на одной странице?

Я пытаюсь добавить две angular приложения/модули на одну страницу. В приведенных ниже скриптах вы можете видеть, что всегда будет работать только первый модуль, указанный в html-коде, а второй не распознается angular.

В этом fiddle мы можем выполнить только метод doSearch2, тогда как в этом fiddle работает только метод doSearch.

Я ищу способ правильно разместить два модуля angular на одной странице.

Ответы

Ответ 1

Только одно приложение AngularJS может автоматически загружаться в HTML-документ. Первый ngApp, найденный в документе, будет использоваться для определения корневого элемента для автоматической загрузки в качестве приложения. Чтобы запустить несколько приложений в документе HTML, вы должны вручную загрузить их с помощью angular.bootstrap. Приложения AngularJS не могут быть вложены друг в друга. - http://docs.angularjs.org/api/ng.directive:ngApp

См. также

Ответ 2

Я создал альтернативную директиву, которая не имеет ограничений ngApp. Он назывался ngModule. Это будет выглядеть так, как вы его используете при использовании:

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

Вы можете получить исходный код:

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

Это по сути тот же самый код, который используется внутренне с помощью AngularJS без ограничений.

Ответ 3

Почему вы хотите использовать несколько [ng-app]? Поскольку Angular возобновляется с помощью модулей, вы можете использовать приложение, использующее несколько зависимостей.

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>

ИЗМЕНИТЬ

Имейте в виду, что если вы хотите использовать контроллер внутри контроллера, вы должны использовать синтаксис controllerAs, например:

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

Ответ 4

Вы можете загружать несколько приложений angular, но:

1) Вам нужно вручную загрузить их

2) Вы не должны использовать "документ" в качестве корня, но node, где находится интерфейс angular:

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

Это будет безопасно.

Ответ 5

Ручная загрузка обоих модулей будет работать. Посмотрите на это

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

Вот ссылка на Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview

ПРИМЕЧАНИЕ. В html нет ng-app. Вместо этого использовался id.

Ответ 6

Я сделал POC для приложения Angular, используя несколько модулей и роутеров-розеток, чтобы встраивать дополнительные приложения в одностраничное приложение. Вы можете получить исходный код: https://github.com/AhmedBahet/ng-sub-apps

Надеюсь, это поможет

Ответ 7

Это может быть не прямой ответ. Но в то время как bootstrap ng-app, пожалуйста, позаботьтесь о следующем.

Не загружайте приложение в элемент с директивой, использующей переключение, например, ngIf, ngInclude и ngView.. Это устраняет приложение $rootElement и инжектор приложения, в результате чего анимация перестает работать и сделать инжектор недоступным извне приложения.

Для получения дополнительной информации о angular.bootstrap просмотрите документацию.