Check if AngularJS module is bootstrapped

Question

I have an iframe with ASP.NET application, that contains UpdatePanel. I started using Angular inside the application, but things didn't work because of the .NET postbacks.

To solve this, I used this solution:

with (Sys.WebForms.PageRequestManager.getInstance()) {
            add_endRequest(onEndRequest); // regester to the end Request
        }

function onEndRequest(sender, args) {
    angular.bootstrap($('#mainDiv'), ['defaultApp']);
    var rootscope = angular.element('#mainDiv').scope();
    if (rootscope) {
        rootscope.$apply();
    }
}

And it works great.

The problem is that when I dynamically load a different user control in the ASP.NET page, with another ng-controller, Angular throws an error saying the app is already loaded:

App Already Bootstrapped with this Element

So the question is: How can I check if the app is already bootstrapped? Can I reload this module? Can I remove it from the element and than bootstrap it again?

Thanks.

Adam McCormick · Accepted Answer · 2015-12-28 22:08:10Z

19

It's not good practice to access scope from outside the app, so it's not enabled in well-built production applications. If you need to access/apply scope then there's something strange/unsupported about your use case.

However, the right way to check whether an element has been bootstrapped is the way the Angular library does it which is to load up the element and check for an injector. So you'd want angular.element(document.querySelector('#mainDiv')).injector(); which makes your code:

function onEndRequest(sender, args) {
    var element = angular.element(document.querySelector('#mainDiv'));

    //This will be truthy if initialized and falsey otherwise.
    var isInitialized = element.injector();
    if (!isInitialized) {
        angular.bootstrap(element, ['defaultApp']);
    }

    // Can't get at scope, and you shouldn't be doing so anyway
}

Can you tell us why you need to apply the scope?

answered Dec 28, 2015 at 22:08

Adam McCormick

1,68018 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user449689 Over a year ago

Can you give me some references about how you are using injector? You are calling it on a dom element, where can I find some references about this use? Thanks

Adam McCormick Over a year ago

@user449689: There aren't any beside the angular internals. I had to read their code to figure it out. AFAIK, this is the only place where it is published as the right approach.

Arashsoft Over a year ago

element.injector() is undefined even after bootstrapping.

Adam McCormick Over a year ago

@Arashsoft This answer worked 4 years ago and I haven't used Angular in a few years. I wouldn't be surprised if they changed this behavior in the interim. I'd suggest looking at the angular source code to see what changed

sam_dev Over a year ago

@Arashsoft Were you able to fix the undefined issue ?

Pankaj Parkar · Accepted Answer · 2016-03-22 20:26:56Z

4

You could simply check for the scope of mainDiv, if angular.element(document.querySelector('#mainDiv')).scope() is not undefined then that means angular has been not initialized yet.

You code will be like below.

CODE

function onEndRequest(sender, args) {
    //below flag will be undefined if app has not bootsrap by angular.
    var doesAppInitialized = angular.element(document.querySelector('#mainDiv')).scope();
    if (angular.isUndefined(doesAppInitialized)) //if it is not 
        angular.bootstrap($('#mainDiv'), ['defaultApp']);
    var rootscope = angular.element('#mainDiv').scope();
    if (rootscope) {
        rootscope.$apply(); //I don't know why you are applying a scope.this may cause an issue
    }
}

Update

After angular 1.3+ release in later Aug 2015, there it added performance related improvement by disabling debugging information by disabling debug info. So normally we should enable debuginfo option to false to have good performance improvement on Production environment. I don't wanted to write too much about it as its already covered by @AdamMcCormick answer, which is really cool.

edited Mar 22, 2016 at 20:26

answered Feb 9, 2015 at 18:57

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

8 Comments

The DIMM Reaper Over a year ago

Won't angular.bootstrap(...) cause Angular to attempt to bootstrap the application each time this function is called?

oakfish56 Over a year ago

Agree, DIMM. angular.element(...).scope() would be better.

Pankaj Parkar Over a year ago

@oakfish56 I think that is what I'm doing

Adam McCormick Over a year ago

Best practice is to turn off debug info in production ($compileprovider.debuginfoenabled(false)), so this method won't work if that is the case

trickpatty Over a year ago

.scope() should not be used for anything other than debugging

|

Collectives™ on Stack Overflow

Check if AngularJS module is bootstrapped

2 Answers 2

5 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related