injecting dependency through factory in AngularJs

Question

I have below service code

(function () {
    'use strict';

    angular.module('App')
           .factory('apiservice', apiservice);

    /* @ngInject */
    function apiservice($http) {
        var service = {
            getData: getGridData,
        };

        return service;

       //code ommitted for clarity
    }
})();

When I minifying and bundling, the dependency is getting screwed up. So I wanted to change $scope to '$scope' so minifier won't mess up with name.

I know there are several ways to do it. But can I make it work like below:

(function () {
    'use strict';

    angular.module('App')
           .factory('apiservice', ['http', apiservice]);

    function apiservice($http) {
        return service;
    }
})();

Any help is appreciated.

Dan Prince · Accepted Answer · 2015-05-22 21:46:16Z

1

You have a couple of options,. the first is to use the extended syntax for dependency injection. In this case:

.factory('apiservice', ['$http', apiservice]);

function apiservice($http) {
  return service;
}

This can also be written as:

.factory('apiservice', apiservice);

apiservice.$inject = ['$http'];

function apiservice($http) {
  return service;
}

Or put add another build step before you minify, such as ng-annotate which will convert your syntax to the extended version.

A factory like this

.factory('apiservice', function($http) {
  return service;
});

Would become:

.factory('apiservice', ['$http', function($http) {
  return service;
});

Which would be safe to minify.

edited May 22, 2015 at 21:46

answered May 22, 2015 at 21:37

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sanjay Sutar Over a year ago

Thanks..I used your very first approach. Now I am not getting different errors like 1) "TypeError: Cannot read property 'get' of undefined" 2) "TypeError: apiservice.getTestData is not a function"

Dan Prince Over a year ago

That will be to do with whatever you return from your .factory(apiservice', function() { ... }) function. If you update to show what service is when you return it, I'll take a look.

Sanjay Sutar Over a year ago

Yes but it started coming after I minified and bundled the files. The problem is its not recognizing the dependencies. The first error is coming on $http.get(). Its not finding $http, hence shouting 'get' of undefined.

Dan Prince Over a year ago

If you use the ['$http', function($http) { }] syntax, that can't happen.

Collectives™ on Stack Overflow

injecting dependency through factory in AngularJs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related