Dependency Injection into an Angular Provider

Question

I am wondering if there is a cleaner way of injecting into a provider. Since I am doing this now, I must have http = null and then set http = $ http to $ get so that I can use it in my functions. Below is my code for the provider

CoffeeScript:

do -> githubProvider =() -> http = null getUser =(username) -> return http.get("https://api.github.com/users/" + username) .then (response)-> return response.data getRepos =(user) -> return http.get(user.repos_url) .then (response)-> return response.data getRepoDetails =(username, repoName) -> return http.get("https://api.github.com/repos/" + username + "/" + repoName) .then (response)-> return response.data getRepoCollaborators =(repo) -> return http.get(repo.contributors_url) .then (response)-> return response.data this.$get =["$http", ($http) -> http = $http return { getUser: getUser, getRepos: getRepos, getRepoDetails: getRepoDetails, getRepoCollaborators: getRepoCollaborators }] return app = angular.module("githubViewer") app.provider("githubProvider", [githubProvider]) return 

JavaScript:

  (function() { var app, githubProvider; githubProvider = function() { var getRepoCollaborators, getRepoDetails, getRepos, getUser, http; http = null; getUser = function(username) { return http.get("https://api.github.com/users/" + username).then(function(response) { return response.data; }); }; getRepos = function(user) { return http.get(user.repos_url).then(function(response) { return response.data; }); }; getRepoDetails = function(username, repoName) { return http.get("https://api.github.com/repos/" + username + "/" + repoName).then(function(response) { return response.data; }); }; getRepoCollaborators = function(repo) { return http.get(repo.contributors_url).then(function(response) { return response.data; }); }; this.$get = [ "$http", function($http) { http = $http; return { getUser: getUser, getRepos: getRepos, getRepoDetails: getRepoDetails, getRepoCollaborators: getRepoCollaborators }; } ]; }; app = angular.module("githubViewer"); app.provider("githubProvider", [githubProvider]); })(); 

Answer 1

As indicated by the AngularJS Developer's Guide :

You should only use the provider recipe if you want to open the API for the entire configuration that needs to be done before the application launches

From what I see in your code, most functions can only be used after the configuration phase. You have two options.

[ 1 ] If you do not have any configuration that needs to be configured at the configuration stage, then how about you consider creating a service instead of a provider.

 .service('github', ['$http', function($http) { this.getUser = function(username) { return $http.get("https://api.github.com/users/" + username).then(function(response) { return response.data; }); }; this.getRepos = function(user) { return $http.get(user.repos_url).then(function(response) { return response.data; }); }; this.getRepoDetails = function(username, repoName) { return $http.get("https://api.github.com/repos/" + username + "/" + repoName).then(function(response) { return response.data; }); }; this.getRepoCollaborators = function(repo) { return $http.get(repo.contributors_url).then(function(response) { return response.data; }); }; }]); 

[ 2 ] If you have any configuration, just copy the above service and define it in the $get provider.

 .provider('github', function() { var configuration = {}; this.setConfiguration = function(configurationParams) { configuration = configurationParams; }; this.$get = ['$http', function($http) { // you can choose to use your configuration here.. this.getUser = function(username) { return $http.get("https://api.github.com/users/" + username).then(function(response) { return response.data; }); }; this.getRepos = function(user) { return $http.get(user.repos_url).then(function(response) { return response.data; }); }; this.getRepoDetails = function(username, repoName) { return $http.get("https://api.github.com/repos/" + username + "/" + repoName).then(function(response) { return response.data; }); }; this.getRepoCollaborators = function(repo) { return $http.get(repo.contributors_url).then(function(response) { return response.data; }); }; }]; }); 

This provider can be used at the configuration stage as follows:

 .config(function(githubProvider) { githubProvider.setConfiguration({ dummyData: 'Dummy Data' }); }); 

and during the startup phase or controller:

 .run(function(github) { github.getUser('ryebalar').then(function(data) { console.log(data); }); }); 

Here is a guide to help you with suppliers, a developer guide , please note that the above quote is from this guide.