두 개의 각진 앱/모듈을 한 페이지에 정의하려면 어떻게 해야 합니까?
한 페이지에 두 개의 각진 앱/모듈을 추가하려고 합니다.아래 핀들에서는 html 코드에서 참조되는 첫 번째 모듈만 정상적으로 동작하고 두 번째 모듈은 각도별로 인식되지 않음을 알 수 있습니다.
이 바이올린에서 실행할 수 있는 것은doSearch2method, 반면 이 바이올린에서는doSearch방법은 올바르게 동작합니다.
두 개의 각도 모듈을 한 페이지에 올바르게 배치하는 방법을 찾고 있습니다.
한 개의 각도만JS 응용프로그램은 HTML 문서별로 자동 부트스트랩할 수 있습니다.문서에서 발견된 첫 번째 ngApp은 응용 프로그램으로 자동 부트스트랩할 루트 요소를 정의하는 데 사용됩니다.HTML 문서에서 여러 응용프로그램을 실행하려면 angular를 사용하여 수동으로 부트스트랩해야 합니다.대신 부트스트랩을 사용합니다.각진JS 응용 프로그램은 서로 중첩할 수 없습니다. -- http://docs.angularjs.org/api/ng.directive:ngApp
「 」를 참조해 주세요.
- https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ
- http://docs.angularjs.org/api/angular.bootstrap
내가 만든 대체 지시문은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/
기본적으로 Angular가 내부적으로 사용한 코드와 동일합니다.제한 없는 JS.
왜 [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>
복수의 각도 애플리케이션을 부트스트랩 할 수 있습니다만, 다음과 같습니다.
1) 수동으로 부트스트랩해야 합니다.
2) "문서"를 루트로 사용하지 않고 각도 인터페이스가 포함된 노드를 사용해야 합니다.
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);
이게 안전할 거야.
두 모듈을 수동으로 부트스트랩하면 동작합니다.이것 좀 봐요.
<!-- 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']);
});
다음은 http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview에 대한 링크입니다.
메모: html에는 없습니다.ng-app.id대신 사용되었습니다.
여러 모듈과 라우터 아웃렛을 사용하여 한 페이지 앱에 서브 앱을 네스트하는 Angular 어플리케이션의 POC를 만들었습니다.소스 코드는 https://github.com/AhmedBahet/ng-sub-apps 에서 구할 수 있습니다.
도움이 되었으면 좋겠다
언급URL : https://stackoverflow.com/questions/12860595/how-to-define-two-angular-apps-modules-in-one-page
'programing' 카테고리의 다른 글
| AngularJS에서 경로 변경 시 스크롤 위치를 유지하시겠습니까? (0) | 2023.03.06 |
|---|---|
| JSON 파일 PowerShell을 통한 반복 (0) | 2023.03.06 |
| 유형 '{}'을(를) 유형 'ReactNode'에 할당할 수 없습니다. (0) | 2023.03.06 |
| 입력 파일 개체를 JSON에 직렬화하려면 어떻게 해야 합니까? (0) | 2023.03.06 |
| React의 mouseEvent에 오프셋 X/오프셋이 없습니다.y (0) | 2023.03.06 |