AngularJS: How to nest applications within an angular app

by

You can’t bootstrap a module inside another bootstrapped module. Bootstrapping compiles the view and binds a rootScope to it, traversing it’s way through the DOM and setting up scope bindings and executing directive linking functions all the way through. If you do that twice, you’re going to run into problems.

You’re probably going to have to rethink your architecture. I think perhaps the word “module” or “app” as it pertains to Angular is a misnomer and is leading you down the wrong path.

Each “user installed app” in your application should probably really be controlled by a controller in your app module, or registered to a module referenced by your app module. So you wouldn’t be “starting up multiple apps”, you’d really just be starting one, referencing the other modules, then using Controllers from those modules to control parts of your view on the screen.

What you’d do is when a new “widget” was installed, you’re register it’s module file (.js) with the system, which would contain a controller named WidgetCtrl, then when your page loaded, you’d reference the widget’s module on your app module. From there it should be available for dynamic assignment to elements using ng-controller and/or ng-include.

I hope that makes sense.

More Related Contents:

  1. ‘this’ vs $scope in AngularJS controllers
  2. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  3. How do I use $scope.$watch and $scope.$apply in AngularJS?
  4. If you are not using a .(dot) in your AngularJS models you are doing it wrong?
  5. How do I access the $scope variable in browser’s console using AngularJS?
  6. AngularJS access parent scope from child controller
  7. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  8. How do I inject a controller into another controller in AngularJS
  9. Sending event when AngularJS finished loading
  10. Confused about Angularjs transcluded and isolate scopes & bindings
  11. Rendering directives within $sce.trustAsHtml
  12. How do I ignore the initial load when watching model changes in AngularJS?
  13. Get value when selected ng-option changes
  14. AngularJS : $q -> deferred API order of things (lifecycle) AND who invokes digest?
  15. angularJS: How to call child scope function in parent scope
  16. AngularJS : ng-repeat filter when value is greater than
  17. angularjs share data config between controllers
  18. AngularJs: Reload page
  19. How to modify scope from within a directive in AngularJs
  20. Angular scope function executed multiple times
  21. Why is using if(!$scope.$$phase) $scope.$apply() an anti-pattern?
  22. How to trigger a method when Angular is done adding scope updates to the DOM?
  23. Model in a modal window in angularjs is empty
  24. AngularJS controller inheritance
  25. AngularJS – Filter empty objects
  26. Why ng-scope is added to javascript inline of my partial view and makes alert not working?
  27. Binding inputs to an array of primitives using ngRepeat => uneditable inputs
  28. ng-click doesn’t work within the template of a directive
  29. Access Parent Scope in Transcluded Directive
  30. scope and controller instantiation with ui router

Leave a Comment