[英]Dependency Injection into Angular Provider
I am wondering if there is any cleaner way of injecting into a provider. 我想知道是否有更清洁的方式注入提供者。 As I am doing it now, I have to have http = null, and then set http = $http in $get so that I am able to use it in my functions.
正如我现在所做的那样,我必须拥有http = null,然后在$ get中设置http = $ http,以便我能够在我的函数中使用它。 Below is my code for the provider
以下是我的提供商代码
CoffeeScript: 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: 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]);
})();
As what the AngularJS Developer's Guide mentioned: 正如AngularJS Developer's Guide所提到的:
You should use the Provider recipe only when you want to expose an API for application-wide configuration that must be made before the application starts
仅当您要为应用程序范围的配置公开API时才应使用Provider配方,该API必须在应用程序启动之前进行
From what I see in your code, most of the functions can only be used after the configuration phase. 从我在代码中看到的情况来看,大多数功能只能在配置阶段之后使用。 You have two options to consider.
您有两种选择可供考虑。
[ 1 ] If you don't have any configuration that you need to setup during the configuration phase, then how about consider creating a service instead of a provider. [ 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 ] If you do have any configuration, then simply copy the service above and have it defined in the provider's $get
. [ 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;
});
};
}];
});
This provider can then be use during the configuration phase like this: 然后可以在配置阶段使用此提供程序,如下所示:
.config(function(githubProvider) {
githubProvider.setConfiguration({
dummyData: 'Dummy Data'
});
});
and during the run phase or in a controller: 在运行阶段或控制器中:
.run(function(github) {
github.getUser('ryebalar').then(function(data) {
console.log(data);
});
});
Here's a guide to help you with providers, developer's guide , note that the quote I have provided above is from that guide. 以下是帮助您提供者, 开发人员指南的指南 ,请注意我上面提供的报价来自该指南。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.