回答:
HTMLドキュメントごとに自動ブートストラップできるAngularJSアプリケーションは1つだけです。ドキュメントで最初に見つかったngAppは、アプリケーションとして自動ブートストラップするルート要素を定義するために使用されます。HTMLドキュメントで複数のアプリケーションを実行するには、代わりにangular.bootstrapを使用して手動でアプリケーションをブートストラップする必要があります。AngularJSアプリケーションを相互にネストすることはできません。- http://docs.angularjs.org/api/ng.directive:ngApp
こちらもご覧ください
ng-app（機能しないため）。 ng-appHTMLドキュメントごとに1回だけ使用できます。ページにアプリが1つしかない場合、これは実際には単なるショートカットです。これは通常のケースです。
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が内部的に使用するコードと同じですが、制限はありません。
複数の[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>両方のモジュールの手動ブートストラップは機能します。これ見て
<!-- 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代わりに使用されています。
複数のモジュールとルーターアウトレットを使用してAngularアプリケーションのPOCを作成し、サブアプリを1つのページアプリにネストしました。ソースコードはhttps://github.com/AhmedBahet/ng-sub-appsで入手できます。
これが役に立てば幸い
ng-app="project"は、「これにより、ページのさまざまな部分で実行されるモジュールを使用できるようになります」と記載されていますが、ngAppドキュメントには、「HTMLドキュメントごとに1つのディレクティブしか使用できない」と記載されています。