Angular Provider中的依赖项注入

Dependency Injection into Angular Provider

本文关键字：注入 依赖 Provider Angular      更新时间：2023-09-26

我想知道是否有更干净的方法可以注入到提供程序中。在我现在做的时候，我必须让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]);
  })();

正如AngularJS开发者指南所提到的：

仅当您希望公开API时，才应使用提供程序配方对于应用程序范围的配置，必须在应用程序启动

从我在代码中看到的情况来看，大多数函数只能在配置阶段之后使用。你有两个选择要考虑。

[1]如果您在配置阶段没有任何需要设置的配置，那么考虑创建一个服务而不是一个提供商。

.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]如果您确实有任何配置，那么只需复制上面的服务，并在提供商的$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);
  });
});

这里有一个帮助您了解供应商的指南，开发者指南，请注意，我上面提供的报价来自该指南。

相关文章：