如何在一页中定义两个角度应用程序/module？
IT技术
javascript
angularjs
2021-02-03 03:30:30
6个回答
每个 HTML 文档只能自动引导一个 AngularJS 应用程序。在文档中找到的第一个 ngApp 将用于定义根元素以作为应用程序自动引导。要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。AngularJS 应用程序不能相互嵌套。-- http://docs.angularjs.org/api/ng.directive:ngApp
也可以看看
我创建了一个没有ngApp's 限制的替代指令。它被称为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 内部使用的代码相同，没有限制。
为什么要使用多个 [ng-app] ？由于 Angular 是通过使用module恢复的，因此您可以使用使用多个依赖项的应用程序。
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>
您可以引导多个 Angular 应用程序，但是：
1）您需要手动引导它们
2）你不应该使用“document”作为根，而是包含angular接口的节点：
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);
这将是安全的。
手动引导这两个module将起作用。看这个
<!-- 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已被使用。