How can I execute Angular code without bootstrapping?

Question

All manual bootstrapping examples use the following pattern:

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

However, I don't need angular to look at the document, I just need to open a popup using ui-bootstrap module.

The best I managed to do was the following:

$("...").click(function() {
  angular.module("pp", ["ui.bootstrap"])
  .config(["$modal", function($modal) {
    $modal.open({
      template: "Hello!"
    });
  }]);
  angular.bootstrap(null, ["pp"]);
});

However, that will re-bootstrap angular every time, re-create the same module over and over, and above all that it doesn't work - configs run alongside provider initialization, thus there is no $module dependency available at that time.

Basically, I am trying to incorporate angular into existing application without creating significant disturbance in current structure. I want angular to manage a single popup, nothing else for now, so normal bootstrap & controller way doesn't seem to be the best option.

Is there some way to run that modal without doing global angular bootstrap?

_"I don't need angular to look at the document, "_ - Then don't pass `document`. You can pass any element. — a better oliver, Aug 30 '15 at 15:20

score 1 · Answer 1 · answered Aug 30 '15 at 13:49

1

Have you tried bootstrapping angular to the whole document and simply not using it for anything but the modal call? Unless there are namespace conflicts with your current code, it seems like this would allow you to use Angular functions wherever you please without bootstrapping every time.

answered Aug 30 '15 at 13:49

jwkicklighter

126
1
9

But how will I use "Angular functions" then? I'm outside angular context, so I can't access that $modal the usual way, for example. I tried using angular.injector() directly to get $modal, but it can't find it (I did specify ui.bootstrap as dependency when bootstrapping). – Rogach Aug 30 '15 at 13:53
Seems hacky at best, but when you bootstrap, set a global variable equal to the inn angular modal function? – jwkicklighter Aug 30 '15 at 13:54
Even if I chose that approach - how will I do that? I can't get $modal inside bootstrap or .config, since providers are not fully initialized at that moment. – Rogach Aug 30 '15 at 13:56
Not sure, I'm just spit balling to try and brainstorm it with you. Not at a computer right this second. – jwkicklighter Aug 30 '15 at 13:59

score 1 · Answer 2 · answered Aug 30 '15 at 14:13

Why not use just Bootstrap without the angular wrapper?

The angular directives only wrap the original bootstrap modals with some extra stuff.

Seems to me a bit pointless to include Angular + Bootstrap + UI Bootstrap when you can achieve the same just with Bootstrap itself.

How can I execute Angular code without bootstrapping?

2 Answers2