Call angularjs service from simple js code

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?

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 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”.

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

Solution 3

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

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

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

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply