我得到自定义的方法未定义的错误，当我在封装定制服务$ http服务 [英] I get custom method undefined error when I encapsulate $http service in custom service
问题描述
我是新来AngularJS我试图创建自定义的服务来封装$ http服务。我试图调试，但我不能够解决这个问题。你能告诉我在做什么错在这里。在定制服务的函数返回一个承诺。我认为这个问题是存在的。当我通过CONSOLE.LOG它不给未定义错误替换的getUser code。
I am new to AngularJS and I am trying to create custom service to encapsulate $http service. I have tried debugging but am not able to fix this. Could you please tell what am I doing wrong here. The function in the custom service returns a promise. I think the problem is there. When I replace the getUser code by console.log it doesn't give 'undefined' error.
<html ng-app="gitHubViewer">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../angular.min.js"></script>
<script src="search.js"></script>
<script src="github.js"></script>
<style>
.my-input {
color:black;
background: red;
}
</style>
</head>
<body ng-controller="MainController">
<div>
{{error}}
</div>
<h1><label>{{message}}</label></h1>
<label> {{countdown}}</label>
<form name="searchUserForm" ng-submit="search(username)">
<input type="search" required placeholder="Enter User Name" ng-model="username"/>
<input type="submit" value="Search"/>
</form>
<div ng-include="'userDetails.html'" ng-show="user"></div>
</body>
</html>
控制器：
(function(){
var app = angular.module("gitHubViewer",[]);
var MainController = function(
$scope,github,$interval,$log,
$location,$anchorScroll
){
var decrementCountdown = function() {
$scope.countdown--;
if($scope.countdown<1)
$scope.search($scope.username);
};
var onResultComplete = function(data) {
$scope.user=data;
github.getRepos($scope.user).then(onRepos,onError);
};
var onRepos = function(data) {
$scope.repos = data;
$location.hash("userDetails");
$anchorScroll();
};
var onError = function(reason) {
$scope.error ="Could not fetch data";
};
var countDownInterval = null;
var startCountdown = function() {
countDownInterval= $interval(decrementCountdown,1000,$scope.countdown);
};
$scope.search = function(username) {
$log.info("Searching for "+username);
github.getUser(username).then(onResultComplete,onError);
if(countDownInterval) {
$interval.cancel(countDownInterval);
$scope.countdown = null;
}
};
$scope.username="angular";
$scope.message="Git Hub Viewer";
$scope.orderReposByStar="-stargazers_count";
$scope.countdown = 5;
startCountdown();
};
app.controller('MainController',["$scope","github","$interval","$log","$location","$anchorScroll",MainController]);
}());
自定义服务队：
(function(){
var github = function($http) {
var getUser = function(username) {
console.log("in github "+username);
$http.get("https://api.github.com/users/"+username).
then( function(response){
return response.data; //it would return the data wrapped in a promise as the call
//to 'then' returns a promise
});
};
var getRepos = function(user) {
$http.get(user.repos_url).
then(function(response){
return response.data;
});
};
return {
getUser: getUser,
getRepos: getRepos
};
};
var module = angular.module("gitHubViewer");
module.factory("github" ,["$http", github]);
}());
错误：
"Error: github.getUser(...) is undefined
MainController/$scope.search@file:///home/smitha/AngularJS/DirectivesAndViews2WriteOwnService/search.js:34:4
MainController/decrementCountdown@file:///home/smitha/AngularJS/DirectivesAndViews2WriteOwnService/search.js:11:5
fd/g.prototype.notify/<@file:///home/smitha/AngularJS/angular.min.js:115:162
Pe/this.$get</l.prototype.$eval@file:///home/smitha/AngularJS/angular.min.js:126:189
Pe/this.$get</l.prototype.$digest@file:///home/smitha/AngularJS/angular.min.js:123:278
Pe/this.$get</l.prototype.$apply@file:///home/smitha/AngularJS/angular.min.js:126:469
e/O.$$intervalId<@file:///home/smitha/AngularJS/angular.min.js:91:100
"
这可能是非常简单的东西。但我不能够发现我的错误。它的工作在网上turorial。将是任何指针感激。谢谢你。
It could be very something simple. But I am not able to spot my mistake. It worked in the online turorial. Would be grateful for any pointers. Thanks.
推荐答案
忽略了从GitHub的服务职能回归。因此，不确定的错误。
修正后code是如下：
github.js
Had overlooked return from the functions in the gitHub service. Hence the undefined error. The corrected code is as below: github.js
(function(){
var github = function($http) {
var getUser = function(username) {
console.log("in github "+username);
return $http.get("https://api.github.com/users/"+username).
then( function(response){
return response.data;
});
};
var getRepos = function(user) {
return $http.get(user.repos_url).
then(function(response){
return response.data;
});
};
return {
getUser: getUser,
getRepos: getRepos
};
};
var module = angular.module("gitHubViewer");
module.factory("github" ,["$http", github]);
}());`
`
这篇关于我得到自定义的方法未定义的错误，当我在封装定制服务$ http服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
