依賴注入角提供者

Question

我想知道是否有任何更清潔的方式注入提供者。正如我現在這樣做，我必須有http = null，然後在$ get中設置http = $ http，以便我可以在我的函數中使用它。下面是我的供應商代碼

的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

由於AngularJS Developer's Guide提到什麼：

您應該只使用提供食譜當你想公開一個API 應用範圍配置的 應用程序啓動

之前從我看到你的代碼，大部分功能只能在配置階段後使用，必須做。你有兩個選擇要考慮。

[]如果您在配置階段沒有需要設置的任何配置，那麼考慮創建一個服務而不是提供者。

.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; 
     }); 
     }; 
}]); 

[]如果您有任何配置，則只需複製以上的服務並使其在供應商的$get定義。

.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; 
      }); 
     }; 
     }]; 
}); 

則這提供者可以在配置階段，像這樣使用：

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

，並在運行階段或在控制器：

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

這裏有一個指南，以幫助您與供應商，developer's guide，請注意，我上面提供的報價是從該指南。