동일한 페이지에서 두 개의 개별 Angular js 앱을 실행하는 방법

동일한 페이지에서 두 개의 개별 Angular js 앱을 실행하는 방법

Angular에 새로 추가되었습니다.뭔가 확실한 걸 놓치고 있는 것 같아동일한 html 페이지에서 AngularJs 앱(모듈)을 쉽게 실행할 수 있어야 하지 않을까요?다음과 같은 경우:

  <section ng-app="HelloWorldApp" ng-controller="HelloWorldController">
    Hello {{name}}!
  </section> 
  <br />
  <section ng-app="MyNameIsApp" ng-controller="MyNameIsController">
    My Name is {{FirstName}} {{LastName}}!
  </section> 

Javascript:

var HelloWorldApp = angular.module('HelloWorldApp', []);
HelloWorldApp.controller('HelloWorldController', function($scope) {
  $scope.name = 'World';
});

var MyNameIsApp = angular.module('MyNameIsApp', []);
MyNameIsApp.controller('MyNameIsController', function($scope) {
  $scope.FirstName = 'John';
  $scope.LastName = 'Smith';
});

이것은 첫 번째 모듈만 실행하고 두 번째 모듈은 아무것도 하지 않는 것처럼 보입니다.이를 통해 모듈 이름을 동일하게 지정할 필요가 없는 여러 페이지에 대해 재사용 가능한 캡슐화된 지침을 구축할 수 있습니다.

라이브 예: http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ

---

모듈 계층은 작았지만, 당초의 질문에서는 약간의 작업만으로 완성할 수 있었습니다(아래 참조).

가능하지만 손으로 코딩해야 합니다.각진 앱은 직접 부트스트랩해야 합니다.걱정 마, 그렇게 복잡하지 않아

• 추가 안 함ng-appHTML 속성
• 앱을 보유하고 있는 DOM 요소를 가져올 수 있는지 확인합니다.
• DOM이 로드되면 앱을 직접 시작해야 합니다.angular.bootstrap( domElement, ['AppName']);

기능하는 포크: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

Angular docs for ngApp에 따르면:

응용 프로그램을 자동 부트스트랩하려면 이 지시어를 사용합니다.HTML 문서당 하나의 지시문만 사용할 수 있습니다.지시문은 응용 프로그램의 루트를 나타내며 일반적으로 페이지의 루트에 배치됩니다.

일부러 그런 것 같아요.

메인 앱의 모듈 정의에서 중첩된 앱을 지정할 수 있습니다.

angular.module("myapp", ['statusapp', 'tickerapp']).controller(....

다른 앱은 별도의 파일에 정의되어 있습니다.이 중 일부를 숨기는 템플릿엔진을 사용하고 있지만 모듈/컨트롤러를 정의하는 각 엔지앱과 자바스크립트를 포함하는 HTML이 생성됩니다.위의 코드는 여러 부트스트랩을 받기 위한 요령입니다.

언급URL : https://stackoverflow.com/questions/16342603/how-to-run-two-separate-angular-js-apps-in-the-same-page