AngularJs json URL更改程序
AngularJs json URL更改程序
提问于 2015-05-26 07:05:50
因为练习的原因，我正在做一些超级简单的天气应用程序。
我有一个像这样的角质饲料：
app.factory('forecast', ['$http', function($http) {
return $http.get('http://api.openweathermap.org/data/2.5/weather?q=Amsterdam,NL&lang=NL_nl&units=metric')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);它将提要加载到index.html中。我现在想要的是一个索引的输入表单，它将js/services/forcast.js上的url中的部分更改为另一个城市，这样人们就可以看到他们的城市天气。
参见这里的演示：http://dev.bigstoef.nl/workspace/shiva/weer/index.html
我已经尝试了所有可能的选择，关于现在和我还有3天，这是一个不去。这里有什么正确的路？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-05-26 07:22:06
首先，创建一个“可配置的”服务：
app.factory('forecast', ['$http', function($http) {
var city;
var cities = {
amsterdam: 'Amsterdam,NL',
paris: 'Paris,FR'
};
var api_base_url = 'http://api.openweathermap.org/data/2.5/weather';
var other_params = 'lang=NL_nl&units=metric';
return {
setCity: function(cityName){
city = cityName ;
console.log(city);
},
getWeather: function(cityName){
console.log(city);
if(cityName) this.setCity(cityName);
if (!city) throw new Error('City is not defined');
return $http.get(getURI());
}
}
function getURI(){
return api_base_url + '?' + cities[city] + '&' + other_params;
}
}]);然后您可以创建一个控制器，如下所示：
app.controller('forecastCtrl', ['$scope', 'forecast',function($scope,forecast){
$scope.city = 'amsterdam' ;
$scope.$watch('city',function(){
console.log($scope.city);
forecast.setCity($scope.city);
});
$scope.getWeather = function(){
console.log('get weather');
forecast.getWeather()
.success(function(data){
console.log('success',data);
$scope.weatherData = data;
}).error(function(err){
console.log('error',err);
$scope.weatherError = err;
});
};
}]);按以下方式实现模板
<link rel="stylesheet" href="style.css" />
<div data-ng-controller="forecastCtrl">
<form>
<label>
<input type="radio" name="city" data-ng-model="city" data-ng-value="'amsterdam'">Amsterdam
</label>
<br/>
<label>
<input type="radio" name="city" data-ng-model="city" data-ng-value="'paris'">Paris
</label>
<br/>
<button data-ng-click="getWeather()">Get Weather</button>
</form>
<p class="weather-data">
{{weatherData}}
</p>
<p class="weather-error">
{{weatherError}}
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="script.js"></script>您可以查看在这里工作的代码：http://plnkr.co/edit/rN14M8GGX62J8JDUIOl8?p=preview
Stack Overflow用户
发布于 2015-05-26 07:17:08
将服务代码更改为有一个专用方法，您可以使用不同的参数(城市)多次调用该方法：
app.factory('forecast', ['$http', function($http) {
return {
load: function(location) {
return $http.get('http://api.openweathermap.org/data/2.5/weather?q=' + location + '&lang=NL_nl&units=metric')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}
}
}]);然后，在控制器中，您可以在需要时加载其他位置的预测值：
forecast.load('Amsterdam,NL').then(function(data) {
$scope. weer = data;
});Stack Overflow用户
发布于 2015-05-26 07:18:27
您可以在工厂中返回一个函数。将您的forcast定义为
app.factory('forecast', ['$http', function($http) {
return {
query: function(city) {
return $http.get('http://api.openweathermap.org/data/2.5/weather?q=' + city + '&lang=NL_nl&units=metric')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}
};
}]);然后在你的控制器里
forecast.query('Amsterdam,NL').success(function(data) {
$scope.weer = data;
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30451709
复制相关文章
相似问题
腾讯云开发者
