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?

Clactonian

Answer 1

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".

Individuality

Oh yes i really need this. Thanks, thumb up for you :D – Esperanzaespial

A word of warning: for me this solution did not work 100% because my service tried to fetch a template defined in an ng-template element and failed to do so (did not find it). However the solution proposed by @DorCohen works perfectly in that case, too. – Stormi

"angular.injector creates a new injector function, it does not return the one associated with the bootstrapped app." as stated here. I.e., it will inject new $rootScope for your service. – Epidemiology

How to get Myservice if myservice inturns call other service? – Ule

In my case, the factory returned a function (not a new function), and so it looked more like this: angular.injector(['ng', 'main.app']).get("MyService")() – Example

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")

Percival

The accepted answer didn't work for me but this one did. +1 – Remiss

Answer 3

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

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

Clactonian

This solution didnt work for me but the immediate below one did. – Gittens

Answer 4

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)

Witchery