如何在一个页面中定义两个有棱角的应用/模块?

I'm trying to add two angular apps / modules to one page. In the fiddles below you can see that always only the first module, referenced in the html code, will work correctly, whereas the second is not recognized by angular.

我想在一个页面上添加两个有棱角的应用/模块。在下面的代码中，您可以看到只有第一个模块(在html代码中引用)才能正常工作，而第二个模块不能被角识别。

In this fiddle we can only execute the doSearch2 method, whereas in this fiddle only the doSearch method works correctly.

在这个小提琴中，我们只能执行doSearch2方法，而在这个提琴中，只有doSearch方法工作正确。

I'm looking for the way how to correctly place two angular modules into one page.

我在寻找如何正确地把两个角模放在一页纸上。

7 个解决方案

#1

118

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. -- http://docs.angularjs.org/api/ng.directive:ngApp

每个HTML文档只能自动引导一个AngularJS应用程序。文档中发现的第一个ngApp将用于定义根元素，以便作为应用程序自动引导。要在HTML文档中运行多个应用程序，您必须使用角度手动引导它们。引导。AngularJS应用程序不能相互嵌套。——http://docs.angularjs.org/api/ng.directive ngApp

#2

I created an alternative directive that doesn't have ngApp's limitations. It's called ngModule. This is what you code would look like when you use it:

我创建了一个替代指令，它没有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>

You can get the source code at:

你可以在以下网址获取源代码:

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

It's essentially the same code used internally by AngularJS without the limitations.

它本质上是由AngularJS内部使用的相同代码而不受限制。

#3

Why do you want to use multiple [ng-app] ? Since Angular is resumed by using modules, you can use an app that use multiple dependencies.

为什么要使用多个[ng-app] ?由于使用模块可以恢复角度，所以您可以使用使用多个依赖项的应用程序。

Javascript:

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:

HTML:

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

EDIT

编辑

Keep in mind that if you want to use controller inside controller you have to use the controllerAs syntax, like so:

记住，如果你想在controller中使用controller，你必须使用controllerAs语法，比如:

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

#4

You can bootstrap multiple angular applications, but:

您可以引导多个角度应用程序，但是:

1) You need to manually bootstrap them

1)需要手动引导

2) You should not use "document" as the root, but the node where the angular interface is contained to:

2)您不应该将“document”作为根，而是将角接口包含到的节点:

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

This would be safe.

这将是安全的。

#5

Manual bootstrapping both the modules will work. Look at this

手动引导两个模块都可以工作。看看这个

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

Here is the link to the Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview

下面是对柱塞器的链接http://plnkr.co/edit/1sdz4qppfuhtdbjtkjiu?

NOTE: In html, there is no ng-app. id has been used instead.

注意:在html中，没有ng-app。我用的是id。

#6

I made a POC for an Angular application using multiple modules and router-outlets to nest sub apps in a single page app. You can get the source code at: https://github.com/AhmedBahet/ng-sub-apps

我为一个有棱角的应用做了一个POC，使用多个模块和路由选择器在一个页面应用中嵌套子应用

Hope this will help

希望这将帮助

#7

-3

This might be not straight forward answer. But while bootstrap ng-app please take care of the following thing.

这可能不是直截了当的回答。但是当引导ng-app时请注意以下事项。

Do not bootstrap the app on an element with a directive that uses transclusion, such as ngIf, ngInclude and ngView. Doing this misplaces the app $rootElement and the app's injector, causing animations to stop working and making the injector inaccessible from outside the app.

不要将应用程序引导到使用transclusion的元素上，例如ngIf、ngInclude和ngView。这样做会将应用$rootElement和应用的注入器放错位置，导致动画停止工作，并使从应用程序外部无法访问注入器。

For more information on angular.bootstrap please look into the documentation.

有关角度的更多信息。请查看文档。

#1

118

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. -- http://docs.angularjs.org/api/ng.directive:ngApp

每个HTML文档只能自动引导一个AngularJS应用程序。文档中发现的第一个ngApp将用于定义根元素，以便作为应用程序自动引导。要在HTML文档中运行多个应用程序，您必须使用角度手动引导它们。引导。AngularJS应用程序不能相互嵌套。——http://docs.angularjs.org/api/ng.directive ngApp

#2