Call angularjs service from simple js code

Question

I have the following angularjs service:

angular.module('app.main').factory('MyService', ["$http", function ($http) {
    return new function () {

        this.GetName = function () {
            return "MyName";
        };
    };
}]);

How can I call GetName function from MyService from legacy js code?

Answer 1

Here's a utility method that I use :

function getService(name, element) {
    element = element || '*[ng-app]';
    return angular.element(element).injector().get(name);
}

getSrv("name-of_service", document.body)

Answer 2

For me it worked with:

angular.element(document.body).injector().get("MyService")

I got 'Unknown provider' error when tried this:

angular.injector(['ng', 'main.app']).get("MyService")

and as i am using jqLite, i can't do

angular.element('*[ng-app]')

because selectors are not supported by jqLite, but i got [Dor Cohen] idea. My directive ng-app is on my body tag, then i can use:

angular.element(document.body).injector().get("MyService")

or

angular.element(document).find('body').injector().get("MyService")

Answer 3

Using the following line helps to execute my method from the angularjs service:

angular.element('*[ng-app]').injector().get("MyService").GetName ();

Answer 4

Use angular.injector. Using your code you can do something like the following:

angular.module('main.app', []).factory('MyService', ['$http', function ($http) {
    return new function () {

        this.GetName = function () {
            return "MyName";
        };
    };
}]);


angular.injector(['ng', 'main.app']).get("MyService").GetName();

Here is the jsfiddle: http://jsfiddle.net/wGeNG/

NOTE - You need to add "ng" as your first module before loading your custom module since your example code depends upon $http provider which is in the ng module.

EDIT - Using get() as in OP's answer but note this code is fetching the service without relying upon the element being bound to the app module "main.app".