Question

出于练习原因，我正在研究Angular中的一些超级简单天气应用程序而且我被卡住了..

我有一个像这样的角度json饲料：

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; 
        }); 
}]);

并将Feed加载到index.html。它的所有工作和我现在的魔杖是索引上的输入表单，它改变了js / services / forcast.js上网址的阿姆斯特丹部分，其中上面的代码是另一个城市，所以人们可以看到他们的城市天气。

请参阅此处的演示：http://dev.bigstoef.nl/workspace/shiva/weer/index.html

我已经尝试了所有关于现在的可选选项，而且我还有3天了，这是不行的。这里有什么正确的方法吗？

Answer 1

首先，创建一个＆＃34;可配置的＆＃34;服务：

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

Answer 2

更改服务代码以使用专用方法，您可以使用不同的参数（城市）多次调用：

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;
            });
        }
    }
}]);

然后在控制器中，您可以在需要时将forecat加载到其他位置：

forecast.load('Amsterdam,NL').then(function(data) {
    $scope. weer = data;
});

演示： http://plnkr.co/edit/GCx35VxRoko314jJ3M7r?p=preview

Answer 3

您可以在工厂中返回功能。将您的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;
});

AngularJs json URL更换器

3 个答案: