답변:
HTML 문서 당 하나의 AngularJS 애플리케이션 만 자동 부트 스트랩 될 수 있습니다. 문서에서 발견 된 첫 번째 ngApp은 애플리케이션으로 자동 부트 스트랩 할 루트 요소를 정의하는 데 사용됩니다. HTML 문서에서 여러 응용 프로그램을 실행하려면 대신 angular.bootstrap을 사용하여 수동으로 부트 스트랩해야합니다. AngularJS 애플리케이션은 서로 중첩 될 수 없습니다. -http : //docs.angularjs.org/api/ng.directive : ngApp
또한보십시오
ng-app(작동하지 않기 때문에). ng-appHTML 문서 당 한 번만 사용할 수 있습니다. 페이지에 앱이 하나만있는 경우 실제로는 바로 가기에 불과합니다. 이는 일반적인 경우입니다.
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는 모듈을 사용하여 재개되므로 여러 종속성을 사용하는 앱을 사용할 수 있습니다.
자바 스크립트 :
// 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를 만들었습니다. 소스 코드는 https://github.com/AhmedBahet/ng-sub-apps 에서 얻을 수 있습니다.
이것이 도움이되기를 바랍니다.
ng-app="project"는 "이렇게하면 페이지의 다른 부분에서 실행되는 모듈을 가질 수 있습니다"라고 말하지만 ngApp 문서에는 "HTML 문서 당 하나의 지시문 만 사용할 수 있습니다"라고 명시되어 있습니다.