这里的第一个问题。我正在研究角度，并尝试使用分离的文件作为我的服务，并使用表单上的用户输入作为请求URL的一部分。我通过在我的控制器上注入$ http并在on click函数中调用服务来实现它，但是为了保持干净，我真的希望将服务保存在separed文件中并在我的控制器中调用它们。我试图在我的服务上返回一个属性函数，这样我就可以在调用它时解析输入（ng-model =“cityInput”）。但是当我在我的控制器上调用它时（在将服务添加为依赖项之后），它给了我“fourSquareService.getVenues不是函数”错误。我究竟做错了什么？提前致谢。 以下代码：
foursquare服务
// Foursquare API Info
const clientId = 'PU3IY1PZEOOANTPSHKNMS5HFSMEGEQ1IAVJYGYM4YVZP3NGD';
const clientSecret = '0V21IXU0EETE3SZJGGCP4T4R13NUTBJ0LMI5WQY45IMDPEKY';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';
const imgPrefix = 'https://igx.4sqi.net/img/general/150x200';
// Current day
function getCurrentDate() {
let today = new Date();
let yyyy = today.getFullYear();
let mm = today.getMonth() + 1;
let dd = today.getDate();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
return yyyy + mm + dd;
};
let currentDay = getCurrentDate();
//Foursquare Angular request
app.factory('fourSquareService', ['$http', function ($http) {
return {
getVenues: function(place) {
const fourSquareURL = `${url}${place}&venuePhotos=1&limit=5&client_id=${clientId}&client_secret=${clientSecret}&v=${currentDay}`;
return $http.get(fourSquareURL);
}
}
}]);
APIXU服务
// APIXU Info
const apiKey = '44972f525fb14478ac0224821182604';
const forecastUrl = 'https://api.apixu.com/v1/forecast.json?key=';
//Angular request
app.factory('apixuService', ['$http', function ($http) {
return {
getForecast: function (place) {
const apixuURL = `${forecastUrl}${apiKey}&q=${place}&days=4&hour=10`;
return $http.get(apixuURL);
},
getCurrentWeather: function (place) {
const currentWeatherUrl = `${forecastUrl}${apiKey}&q=${place}`;
return $http.get(currentWeatherUrl);
}
};
}]);
控制器
app.controller('MainController', ['$scope', 'apixuService', 'fourSquareService', function ($scope, fourSquareService, apixuService) {
//Search on Click Function
$scope.executeSearch = function () {
//Venues
fourSquareService.getVenues($scope.cityInput).then(function (response) {
$scope.fouSquareData = response.data.response
$scope.destination = $scope.fouSquareData.geocode.displayString;
$scope.venues = $scope.fouSquareData.groups[0].items.map(spot => spot.venue);
let photos = [];
$scope.venues.forEach((venue, index) => venue.photos.groups[0] && venue.url ? photos.push(`<a href="${venue.url}" target="_blank"><img class="venueimg" src="${imgPrefix}${venue.photos.groups[0].items[0].suffix}"/></a>`) : venue.photos.groups[0] ? photos.push(`<img class="venueimg" src="${imgPrefix}${venue.photos.groups[0].items[0].suffix}"/>`) : photos.push('<img class="venueimg" src="./img/320px-No_image_available.png"/>'));
$scope.photos = photos;
}, function (error) {
$scope.showdestination = true;
$scope.showData = false;
$scope.destination = 'Place not found, please try again.';
});
//Current Weather
getWeather.getCurrentWeather($scope.cityInput).then(function (response) {
$scope.currentWeather = response.data.current;
$scope.place = response.data.location.name;
});
//Forecast
getWeather.getForecast($scope.cityInput).then(function (response) {
$scope.showdestination = true;
$scope.showData = true;
$scope.forecast = response.data.forecast.forecastday;
const weekDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.weekDays = [];
$scope.forecast.forEach(function (day, index) {
$scope.weekDays[index] = weekDays[(new Date(day.date)).getDay()]
});
$scope.weekDays[0] = 'Today';
$scope.weekDays[1] = 'Tomorrow';
});
};
}]);
答案 0 :(得分：0)
您在引用依赖项时不匹配
应该是这个
app.controller('MainController', ['$scope', 'apixuService', 'fourSquareService',
function ($scope, apixuService, fourSquareService) {
//Search on Click Function
$scope.executeSearch = function () {
//Venues
fourSquareService.getVenues($scope.cityInput).then(function (response) {
$scope.fouSquareData = response.data.response
$scope.destination = $scope.fouSquareData.geocode.displayString;
$scope.venues = $scope.fouSquareData.groups[0].items.map(spot => spot.venue);
let photos = [];
$scope.venues.forEach((venue, index) => venue.photos.groups[0] && venue.url ? photos.push(`<a href="${venue.url}" target="_blank"><img class="venueimg" src="${imgPrefix}${venue.photos.groups[0].items[0].suffix}"/></a>`) : venue.photos.groups[0] ? photos.push(`<img class="venueimg" src="${imgPrefix}${venue.photos.groups[0].items[0].suffix}"/>`) : photos.push('<img class="venueimg" src="./img/320px-No_image_available.png"/>'));
$scope.photos = photos;
}, function (error) {
$scope.showdestination = true;
$scope.showData = false;
$scope.destination = 'Place not found, please try again.';
});
//Current Weather
apixuService.getCurrentWeather($scope.cityInput).then(function (response) {
$scope.currentWeather = response.data.current;
$scope.place = response.data.location.name;
});
//Forecast
apixuService.getForecast($scope.cityInput).then(function (response) {
$scope.showdestination = true;
$scope.showData = true;
$scope.forecast = response.data.forecast.forecastday;
const weekDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.weekDays = [];
$scope.forecast.forEach(function (day, index) {
$scope.weekDays[index] = weekDays[(new Date(day.date)).getDay()]
});
$scope.weekDays[0] = 'Today';
$scope.weekDays[1] = 'Tomorrow';
});
};
}]);
答案 1 :(得分：0)
我已经改变了控制器函数内部参数的顺序，以匹配依赖项的相同顺序，并且它有效！不知道订单很重要。
工作控制器：
app.controller('MainController', ['$scope', 'fourSquareService', 'apixuService',
function ($scope, fourSquareService, apixuService) {
//Search on Click Function
$scope.executeSearch = function () {
//Venues
fourSquareService.getVenues($scope.cityInput).then(function (response) {
$scope.fouSquareData = response.data.response
$scope.destination = $scope.fouSquareData.geocode.displayString;
$scope.venues = $scope.fouSquareData.groups[0].items.map(spot => spot.venue);
let photos = [];
$scope.venues.forEach((venue, index) => venue.photos.groups[0] && venue.url ? photos.push(`<a href="${venue.url}" target="_blank"><img class="venueimg" src="${imgPrefix}${venue.photos.groups[0].items[0].suffix}"/></a>`) : venue.photos.groups[0] ? photos.push(`<img class="venueimg" src="${imgPrefix}${venue.photos.groups[0].items[0].suffix}"/>`) : photos.push('<img class="venueimg" src="./img/320px-No_image_available.png"/>'));
$scope.photos = photos;
}, function (error) {
$scope.showdestination = true;
$scope.showData = false;
$scope.destination = 'Place not found, please try again.';
});
//Current Weather
apixuService.getCurrentWeather($scope.cityInput).then(function (response) {
$scope.currentWeather = response.data.current;
$scope.place = response.data.location.name;
});
//Forecast
apixuService.getForecast($scope.cityInput).then(function (response) {
$scope.showdestination = true;
$scope.showData = true;
$scope.forecast = response.data.forecast.forecastday;
const weekDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.weekDays = [];
$scope.forecast.forEach(function (day, index) {
$scope.weekDays[index] = weekDays[(new Date(day.date)).getDay()]
});
$scope.weekDays[0] = 'Today';
$scope.weekDays[1] = 'Tomorrow';
});
};
}]);