Check if AngularJS module is loaded

Question

I have an iframe with an ASP.NET application that contains an UpdatePanel. I started using Angular inside the application, but it didn’t work out due to postbacks.NET.

To solve this problem, 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 another user control on an ASP.NET page with a different ng controller, Angular displays a message that the application is already loaded:

 App Already Bootstrapped with this Element 

So the question is: how can I verify that the application is already loaded? Can I reload this module? Is it possible to remove it from an element and reload it again?

Thanks.

Answer 1

Bad practice of accessing the scope outside the application, so it is not included in well-built production applications. If you need to access / apply an area, then there is something strange / unsupported in your use case.

However, the correct way to check if an element has been loaded is the way the Angular library does this, which should load the element and check the injector. So you want angular.element(document.querySelector('#mainDiv')).injector(); which your code does:

 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 a scope?

Answer 2

You can simply check the mainDiv if angular.element(document.querySelector('#mainDiv')).scope() not undefined , it means that angular is not yet initialized.

The code will look as follows.

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

Following the release of angular 1.3+ in late August 2015, he added performance improvements by disabling debugging information and disabling debugging information. Therefore, as a rule, we should enable the debuginfo parameter in false in order to have a good performance improvement in the production environment. I did not want to write too much about this, since it was already covered by @AdamMcCormick's answer, which is really cool.