[javascript] 한 페이지에 두 개의 각도 앱 / 모듈을 정의하는 방법은 무엇입니까?

Program / 글쓴이

한 페이지에 두 개의 각도 앱 / 모듈을 추가하려고합니다. 아래의 바이올린에서 html 코드에서 참조되는 첫 번째 모듈 만 올바르게 작동하는 반면 두 번째 모듈은 angular에서 인식되지 않음을 알 수 있습니다.

이 바이올린 에서는 doSearch2메서드 만 실행할 수 있지만이 바이올린 에서는 doSearch메서드 만 올바르게 작동합니다.

두 개의 각도 모듈을 한 페이지에 올바르게 배치하는 방법을 찾고 있습니다.

답변

HTML 문서 당 하나의 AngularJS 애플리케이션 만 자동 부트 스트랩 될 수 있습니다. 문서에서 발견 된 첫 번째 ngApp은 애플리케이션으로 자동 부트 스트랩 할 루트 요소를 정의하는 데 사용됩니다. HTML 문서에서 여러 응용 프로그램을 실행하려면 대신 angular.bootstrap을 사용하여 수동으로 부트 스트랩해야합니다. AngularJS 애플리케이션은 서로 중첩 될 수 없습니다. -http : //docs.angularjs.org/api/ng.directive : ngApp

또한보십시오

답변

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>

답변

여러 각도 응용 프로그램을 부트 스트랩 할 수 있지만 다음과 같습니다.

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']);
});

다음은 Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview에 대한 링크입니다
.

참고 : html에는 ng-app. id대신 사용되었습니다.

답변

단일 페이지 앱에 하위 앱을 중첩하기 위해 여러 모듈과 라우터 콘센트를 사용하여 Angular 애플리케이션에 대한 POC를 만들었습니다. 소스 코드는 https://github.com/AhmedBahet/ng-sub-apps 에서 얻을 수 있습니다.

이것이 도움이되기를 바랍니다.

답변