118

1つのページに2つのAngularアプリ/モジュールを追加しようとしています。以下のフィドルでは、htmlコードで参照されている最初のモジュールのみが常に正しく機能するのに対し、2番目のモジュールはAngularによって認識されないことがわかります。

このフィドルではメソッドのみを実行できますがdoSearch2、このフィドルではメソッドのみがdoSearch正しく機能します。

2つのAngularモジュールを1つのページに正しく配置する方法を探しています。

4

6 に答える 6

123

HTMLドキュメントごとに自動ブートストラップできるAngularJSアプリケーションは1つだけです。ドキュメントで最初に見つかったngAppは、アプリケーションとして自動ブートストラップするルート要素を定義するために使用されます。HTMLドキュメントで複数のアプリケーションを実行するには、代わりにangular.bootstrapを使用して手動でアプリケーションをブートストラップする必要があります。AngularJSアプリケーションを相互にネストすることはできません。--http ：//docs.angularjs.org/api/ng.directive：ngApp

も参照してください

于 2012-10-12T17:21:45.670 に答える
38

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によって内部的に使用されるコードと同じです。

于 2014-04-06T18:35:00.130 に答える
19

なぜ複数の[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>
于 2015-01-28T13:18:22.317 に答える
9

複数のAngularアプリケーションをブートストラップできますが、次のようになります。

1）手動でブートストラップする必要があります

2）ルートとして「ドキュメント」を使用するのではなく、角度インターフェイスが含まれるノードを次の目的で使用する必要があります。

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

これは安全です。

于 2014-10-30T09:06:49.937 に答える
3

両方のモジュールを手動でブートストラップすることは機能します。これを見てください

  <!-- 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代わりに使用されています。

于 2017-10-11T17:20:12.720 に答える
0

複数のモジュールとルーターアウトレットを使用してAngularアプリケーションのPOCを作成し、サブアプリを1ページのアプリにネストしました。ソースコードはhttps://github.com/AhmedBahet/ng-sub-appsで入手できます。

これがお役に立てば幸いです

于 2017-06-08T14:19:12.363 に答える