2

I'm developing an angular component for our company. It will be used by several applications. Some of them are using angular, others aren't.

Therefore, the component should be able to run in 3 cases:

  1. when the application is not using angular
  2. when the application is bootstrapped using an ng-app attribute
  3. when the application is manually bootstrapped using angular.bootstrap()

I'm required to use the existing angular app when possible.

I already solved cases 1 and 2, but in case 3, I'm having problems retrieving the name of the existing app.

Which function in angular can I use to get the name of a manually bootstrapped app?

This is what I have (in typescript):

var ngAppFound: boolean = true;

function createOrGetApp(): ng.IModule {
    var appName: string = angular.element("[ng-app]").attr("ng-app");
    if (appName == undefined) {
        appName = "myApp";
        ngAppFound = false;
        return angular.module(appName, []);
    }
    return angular.module(appName);
}

createOrGetApp();

$(function () {
    if (!ngAppFound) {
         // how to check whether already manually bootstrapped?
         // and how to retrieve the app name?
         angular.bootstrap(document, ["myApp"]);
    }
});
Jos
  • 310
  • 3
  • 6
  • Do you really need the name ? If you just need to detect if there's already any angular app bootstrapped you could implement a decorator for the angular.module method as suggested in this other SO question ( http://stackoverflow.com/questions/24889783/angularjs-get-list-of-all-registered-modules#answer-24890518) and just check the angular.modules.length – AardVark71 Feb 21 '17 at 20:30
  • Off course, ... if all teams use the same naming convention you could use the angular.modules addition I mentioned and then filter on the name. something like this: _let filteredModules = angular.modules.filter((val) => (val.indexOf("name-by-convention") > -1));_ – AardVark71 Feb 24 '17 at 11:16

0 Answers0