Can't Inject native angular services into a custom provider

Question

Can't Inject native angular services into a custom provider

I'm trying to create a provider to handle authentication in my app

     function Authenticator($http) {
        console.log($http);
        return {
            test: function() {}
        }
    }

    app.provider('authenticator', function AuthenticatorProvider() {

        this.config = function () {
            var requestParams;
            return {
                setRequestParams: function (params) {
                    requestParams = params;
                }
            }
        }();


        this.$get = function($http) {
            return new Authenticator($http);
        };

    });

When i run the code above $http is set as undefined. What am i doing wrong? What's the right way to inject $http service into a custom provider?

Thanks

angularjs
angularjs-service
angularjs-provider

Answer 1

I am guessing what you really want to be doing is something like this:

app.factory('AuthenticationService', ['$http', function($http) {
    var AuthenticationService = function() {};

    AuthenticationService.prototype.config = function)() { ... }

    return new AuthenticationService();
}]);

This creates a service that can be injected into other controllers, directives and services, which there will only ever be a single shared instance of. Fetching the service by its string means the reference inside the function is local to the closure, which means the variable can be safely renamed, saving precious bandwidth.