多个 Angular 个 JS 应用

Question

我已经实现了两个 Angular NVD3 应用程序，用于在我的 html 页面上查看 2 个图表。我读到我可以通过使用 ng-modules 而不是 ng-app 来实现两者，但不知何故它不起作用。你能帮帮我吗？

<div ng-modules="temperatureChart" ng-controller="temperatureCtrl">
    <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
    <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</div>
<div ng-modules="heatcounterChart" ng-controller="heatingCtrl">
    <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
    <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</div>

我就是这么试的，但是没有用。

Answer 1

首先，您的页面上一次只能有一个 ng-app。其次，没有 "ng-modules" 指令（据我所知）。您要查找的指令是 "ng-app"

如果您有多个模块，请在您的代码中添加一个新模块，这取决于所有这些模块。然后这个新模块将进入您的 ng-app。

JS:

angular.module("myApp",["temperatureChart","heatcounterChart"]);

HTML:

<body ng-app="myApp">...

Answer 2

为了在您的页面上使用 2 angular 个应用程序，您需要而不是 使用 ng-app 到 bootstrap 您的应用程序。相反，您应该通过位于 2 个应用程序的主包装器上的脚本延迟 bootstrapping。在你加载了你的应用程序、脚本等之后，你就可以使用 angular.bootstrap('document', <ng dependencies array>).

您可能无法为您的两个应用程序提供正确的依赖项顺序，因为您可能存在竞争条件、循环依赖项等。更多关于手动 bootstrapping - https://docs.angularjs.org/api/ng/function/angular.bootstrap

多个 Angular 个 JS 应用

Multiple Angular JS apps

angularjs

angular-nvd3