如何在一个页面中定义两个有角度的应用程序/模块？

小开

最佳答案

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 》杂志网站(http://docs.angularjs.org/api/ng.direct: ngApp)原著:

参见

小开

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

小开

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

1) You need to manually bootstrap them

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

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

这样比较安全。

小开

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.

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>

EDIT

记住，如果你想在控制器中使用控制器，你必须使用控制器的语法，像这样:

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

小开

我做了一个角度应用程序的 POC 使用多个模块和路由器插座嵌套子应用程序在一个单一的页面应用程序。你可以在以下 https://github.com/ahmedbahet/ng-sub-apps 获得源代码:

希望这个能帮上忙

小开

这两个模块都可以手动启动，看看这个

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

这是普朗克的链接 Http://plnkr.co/edit/1sdz4qppfuhtdbjtkjiu?p=preview

注意: 在 html 中，没有 ng-app，而是使用了 id。