在自定义服务中封装 $http 服务时出现自定义方法未定义错误
I get custom method undefined error when I encapsulate $http service in custom service
我是 AngularJS 的新手,我正在尝试创建自定义服务来封装 $http 服务。我试过调试但无法解决这个问题。你能告诉我我在这里做错了什么吗?自定义服务中的函数 returns 一个承诺。我认为问题就在那里。当我用 console.log 替换 getUser 代码时,它不会给出 'undefined' 错误。
<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
"
它可能非常简单。但我无法发现我的错误。它在在线教程中起作用。将不胜感激任何指示。谢谢
你犯了几个错误,
通过这种方式调用getuser
github.getUser(username).then(onResultComplete,onError);
表示:
- github服务returns接受一个参数的
getUser
函数
getUser
函数 returns 一些具有 .then
函数的方法
但是您的服务实现中没有提供该依赖关系
所以你必须把你的服务改成那样
angular.module('myApp.services', [])
.factory('githubService', ['$http', function($http) {
var doRequest = function(username, path) {
return $http({
method: 'JSONP',
url: 'https://api.github.com/users/' + username + '/' + path + '?callback=JSON_CALLBACK'
});
}
return {
events: function(username) { return doRequest(username, 'events'); },
};
}]);
并像那样使用它
app.controller('ServiceController', ['$scope', 'githubService',
function($scope, githubService) {
// uses the $http service to call the GitHub API
// and returns the resulting promise
githubService.events(newUsername)
.success(function(data, status, headers) {
// the success function wraps the response in data
// so we need to call data.data to fetch the raw data
$scope.events = data.data;
});
}]);
从 gitHub 服务中的功能中忽略了 return。因此出现未定义的错误。
更正后的代码如下:
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]);
}());`
`
我是 AngularJS 的新手,我正在尝试创建自定义服务来封装 $http 服务。我试过调试但无法解决这个问题。你能告诉我我在这里做错了什么吗?自定义服务中的函数 returns 一个承诺。我认为问题就在那里。当我用 console.log 替换 getUser 代码时,它不会给出 'undefined' 错误。
<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
"
它可能非常简单。但我无法发现我的错误。它在在线教程中起作用。将不胜感激任何指示。谢谢
你犯了几个错误,
通过这种方式调用getuser
github.getUser(username).then(onResultComplete,onError);
表示:
- github服务returns接受一个参数的
getUser
函数 getUser
函数 returns 一些具有.then
函数的方法
但是您的服务实现中没有提供该依赖关系
所以你必须把你的服务改成那样
angular.module('myApp.services', [])
.factory('githubService', ['$http', function($http) {
var doRequest = function(username, path) {
return $http({
method: 'JSONP',
url: 'https://api.github.com/users/' + username + '/' + path + '?callback=JSON_CALLBACK'
});
}
return {
events: function(username) { return doRequest(username, 'events'); },
};
}]);
并像那样使用它
app.controller('ServiceController', ['$scope', 'githubService',
function($scope, githubService) {
// uses the $http service to call the GitHub API
// and returns the resulting promise
githubService.events(newUsername)
.success(function(data, status, headers) {
// the success function wraps the response in data
// so we need to call data.data to fetch the raw data
$scope.events = data.data;
});
}]);
从 gitHub 服务中的功能中忽略了 return。因此出现未定义的错误。 更正后的代码如下: 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]);
}());`
`