AngularJS: 애플리케이션을 Angular 앱에 중첩하는 방법

AngularJS: 애플리케이션을 Angular 앱에 중첩하는 방법

저는 프레임워크에 가까운 프로젝트를 진행하고 있으며, 설치할 수 있는 앱/모듈이 몇 개 있습니다.기본적인 앱스토어나 구글처럼 보세요.가게 놀이를 하다일종의 인트라넷 애플리케이션으로 모든 모듈을 사용자 계정에 추가할 수 있습니다.

프레임워크는 이미 개발 중이지만, 저는 지금 어플리케이션이나 아이디어에 대해 머리를 싸매고 있습니다.(개발 중인 개념 실증 링크는 여기에서 확인할 수 있습니다.

어플리케이션은 어느 정도 스탠드아론이어야 하며 프레임워크에서 스크립트를 갑자기 포함할 수 없습니다.이러한 구조를 다른 모듈로 구성함으로써 완벽하게 가능합니다.

angular.module('myApp', []);

, 할 수 할 수 , ss, ss, ss, ss, ss을 시작할 때 스크립트와 css 을 가져와 으로 앱에 .따라서 스크립트 및 css 파일을 가져와 사용자가 앱을 시작할 때 동적으로 로드하는 최선의 방법을 찾고 있습니다.app프레임워크 내에서 인.

• 있는 하고 .www.framework.com/apps/myapp/views/app.html 1개의 스크립트파일에 번들합니다1개의 스크립트파일이 .www.framework.com/apps/myapp/script.js포함되어 있습니다.

과 '어플리케이션 로드'가 .appController. 에는 다음과 같은 되어 있습니다 템플릿에는 다음과 같은 내용이 포함되어 있습니다.

<div data-ng-controller="AppController" data-ng-include="app.appTemplate">
    <div>loading...</div>
</div>

으로 ""에 있습니다.$scope.app.appTemplate되므로 처음에에 페이지에 됩니다.app.appTemplate위의 어플리케이션의 메인템플릿으로 이동합니다.

중 이.AppController 프레임워크에서 .$scope자신의 스크립트가 아니라 프레임워크의 스크립트입니다.

아직 어떻게든 앱 자체의 각도 모듈을 시작해야 하고, '작동시키기 위해' 프레임워크에서 아무것도 실행하지 않고 스스로 해야 합니다.

파일 의존관계 로더를 사용할 것을 잘 로드하는 의 javascript 파일 앱을 '부팅을 알 수 .AppController

편집

저는 당면한 문제를 보여주기 위해 작은 데모 프로젝트를 만들었습니다.이 프로젝트는 몇 가지 하드코드를 하는 순간 풀코드는 git-hub에서 볼 수 있습니다.개념 증명을 제대로 받으면 하드코드를 덜 받는다는 아이디어입니다.이것이 가능하다면 프레임워크 내에서 어플리케이션을 로드하는 것입니다.어디서 URL과 어플리케이션 이름을 얻을 수 있는지 생각해 볼 수 있습니다.

다른 부트스트랩된 모듈 내에서는 모듈을 부트스트랩할 수 없습니다.부트스트래핑은 뷰를 컴파일하여 rootScope에 바인드하고 DOM을 통과하여 스코프 바인딩을 설정하고 디렉티브 링크 기능을 실행합니다.그렇게 두 번 하면 문제가 생길 거예요.

아키텍처에 대해 재고해야 할 것 같습니다.아마도 Angular와 관련된 "module"이나 "app"이라는 단어는 잘못된 명칭으로 당신을 잘못된 길로 인도하고 있다고 생각합니다.

응용 프로그램의 각 "사용자 설치 앱"은 응용 프로그램 모듈의 컨트롤러에 의해 제어되거나 응용 프로그램 모듈에서 참조하는 모듈에 등록되어야 합니다.따라서 "여러 개의 앱을 부팅"하는 것이 아니라 하나의 모듈을 시작하고 다른 모듈을 참조한 다음 해당 모듈의 컨트롤러를 사용하여 화면 표시의 일부를 제어합니다.

새로운 "위젯"이 설치되면 WidgetCtrl이라는 이름의 컨트롤러를 포함하는 모듈 파일(.js)을 시스템에 등록하고 페이지를 로드하면 앱 모듈에서 위젯의 모듈을 참조합니다.여기서부터 ng-controller 및/또는 ng-include를 사용하는 요소에 대한 동적 할당에 사용할 수 있어야 한다.

그게 말이 됐으면 좋겠어요.

현재 받아들여지고 있는 답변과는 달리, 그것은 실제로 가능하다.

저는 비슷한 문제를 해결하고 있었는데, 제 경우엔 받아들일 수 없는 답변을 제안했습니다.이전에도 여러 어플리케이션으로 페이지를 작성한 적이 있지만 몇 년 전이었고 어플리케이션은 서로 독립되어 있었습니다.기본적으로 다음 두 가지 작업을 수행할 수 있습니다.

• 기본 응용 프로그램에 하위 요소를 무시하도록 지시합니다.
• 자 요소를 부트스트랩합니다.

단순히 Angular를 알려주는 ng-non-bindable 속성이 있습니다.요소를 무시합니다.이것으로 첫 번째 문제가 해결되었습니다.

그러나 하위 요소를 부트스트랩하려고 하면 AngularJS는 이미 부트스트랩되어 있음을 알리는 오류를 발생시킵니다(적어도 버전 1.2.13).다음과 같은 트릭이 작용합니다.

<div ng-non-bindable data-$injector="">
  <div id="bootstrap-me">
    <script src="/path/to/app.js"></script>
    <div ng-include="'/path/to/app.html'"/>
  </div>
</div>

이 솔루션은 완벽하지 않습니다.ng-non-bindable Atribut은 요소에 필요한 data-$injector Atribute를 추가하는 것이 이상적입니다.나는 Angular에게 피처와 풀 요청을 할 것이다.JS.

---

나는 풀 요청을 할 기회가 없었다.분명히 예상대로 일부 내부가 변경되었지만 ng-non-bindable은 Ventzy Kunev의 데모 코드를 사용하여 버전 1.3.13에서 여전히 작동합니다(감사합니다.아래 링크 참조).

각 서브 앱이 자체 모듈에 있는 경우 angular를 사용할 수 있습니다.부트스트랩을 사용하여 해당 모듈을 동적으로 로드합니다.특정 앱의 URL이 로드되면 필요한 스크립트를 가져오고 약속이 해결되면 다음과 같은 작업을 수행할 수 있습니다.

// grab a reference to the element where you'll be loading the sub-app
var subapp = document.getElementById('subapp-id');

// assuming the script you get back contains an angular module declaration named
// 'subapp', manually start the sub-app
angular.bootstrap(angular.element(subapp), ['subapp']);

이것이 도움이 되기를 바란다

위의 Unicode Snowman의 답변과 유사하게, 나의 요구에 맞는 것으로 보이는 또 다른 잠재적인 솔루션은 (나는 문서 사이트에 라이브 Angular 에디터를 구축했다) 부트스트랩 프로세스를 수동으로 처리하는 것입니다.<div id="demos">메인과는 별개입니다.<div id="myApp">.

이 글은 그것이 올바르게 작동하도록 하는데 큰 도움이 되었다.

일반 프로세스

• 메인 앱을 만듭니다(수동으로 부트스트랩을 선택했지만 사용할 수 있습니다).ng-app이 부분에서는)
• 새로운 HTML 구조/앱을 만듭니다(내 경우 데모 앱).
• 커스텀 ID를 사용하여 데모 div에 추가합니다.someCoolDemoContainer
• 새로 만든 앱 부스트랩
• 원래 앱으로 되돌리기(레이아웃/위치 설정용)

코드 예시 (테스트는 하지 않고 기본적인 프로세스만 표시)

<div id="myApp">
    <h1>Demo</h1>

    <p>Click the button below to checkout the cool demo!</p>

    <button ng-click="showDemo()">Show Demo</button>

    <div class='insertion-point'></div>
</div>

<div id="demos">
</div>

<script type="text/javascript">
    /*
     * Init/bootstrap our main app
     */
    var appContainer = document.getElementById('myApp');

    angular.module('myApp', ['myDependency']);
    angular.bootstrap(appContainer, ['myApp']);

    // Do lots of other things like adding controllers/models/etc.

    /*
     * Init/bootstrap our demo app when the user clicks a button
     */
    function showDemo() {
      // Append our demo code
      $('#demos').append('<div id="someCoolDemoContainer">Angular app code goes here</div>');

      // Bootstrap the new app
      var demoContainer = document.getElementById('someCoolDemoContainer');
      angular.module('someCoolDemo', ['myDependency']);
      angular.module('someCoolDemo').controller('myController', function() { ... });

      angular.bootstrap(demoContainer, ['someCoolDemo']);

      // Re-insert it back into the DOM where you want it
      $('#myApp').find('.insertion-point').append($('#someCoolDemoContainer'));
    }
</script>

이게 꽤 오래된 건 알지만 Angular를 삽입할 방법을 찾고 있었어요.JS 앱은 Angular 앱 내에서 이 게시물의 답변을 사용하여 이 작업을 수행했기 때문에 비슷한 솔루션을 찾고 있는 다른 사용자를 위해 이 게시물을 여기에 게시하려고 합니다.

두 가지 방법이 있었는데, 둘 다 Angular 컴포넌트의 ngOnInit 내에서 angularjs 앱의 수동 부트스트래핑을 사용했습니다.

ngOnInit(): void {
  // manually bootstrap the angularjs app
  angular.bootstrap(document.getElementById('ngListApp'), ['list-app']);
}

부트스트랩되는 요소에 ngNonBindable 속성을 설정합니다.

<div ngNonBindable #insert>
  <!-- can insert the angular js template directly here, inside non-bindable element -->
  <div id="ngListApp" ng-controller="ListController as list">
    <input ng-model="inputValue" />
    <ul>
      <li ng-repeat="item in items">{{ item }}</li>
    </ul>
  </div>
</div>

또는 Angular가 Angular를 해석하지 않도록 Angular 컴포넌트 내의 ngOnInit 이벤트핸들러 요소에 angularjs 템플릿html을 삽입합니다.JS 코드(특히 Angular의 보간)컴파일 중 DOM의 JS 속성(괄호 포함)을 지정합니다.

ngOnInit(): void{
  // insert angularjs template html here
  this.div.nativeElement.innerHTML = this.htmlTemplate;

  // then manually bootstrap the angularjs app
  angular.bootstrap(document.getElementById('ngListApp'), ['list-app']);
}

플런커는 다음과 같습니다.

http://plnkr.co/plunks/0qOJ6T8roKQyaSKI

언급URL : https://stackoverflow.com/questions/18184617/angularjs-how-to-nest-applications-within-an-angular-app