AngularJS: How to nest applications within an angular app

Question

i\'ve been working on a project that is more like a framework, and has several apps / modules you can install. See it like a basic appstore or google.play store. It\'s sort

Answer 1

I know this is quite old now but I was looking for a way to embed an AngularJS app within an Angular app and used the answers from this post to do just that so I thought I'd post up the plunker here for anyone else looking for a similar solution.

There were two ways that I found to do it, both used manual bootstrapping of the angularjs app within the ngOnInit of an Angular component:

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

Either set the ngNonBindable attribute on the element that will be bootstrapped:

  
  

    
    

      
{{ item }}
    
  

Or inject the angularjs template html into the element in the ngOnInit event handler within an Angular component so that Angular doesn't try to interpret the AngularJS code (especially interpolation of AngularJS properties in the DOM with curly brackets) during compilation.

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

The Plunker is here:

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