AngularJS json URL Wechsler

Question

ich für die Praxis Gründen auf einige Mega einfache Wetter-App in Angular bin arbeiten, und ich bin fest ..

ich habe einen Winkel json Futter wie folgt aus:

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

und es lädt den Feed in die index.html. Alles funktioniert und was ich Zauberstab jetzt ist ein Eingabeformular auf Index, der die Amsterdam Teil der URL auf js/services/forcast.js ändert, wo der obige Code zu einer anderen Stadt ist, damit Leute ihr Stadtwetter sehen können.

Siehe die Demo hier: http://dev.bigstoef.nl/workspace/shiva/weer/index.html

Ive tryd über alle posable Optionen über jetzt und ich bin 3 Tage weiter und es ist ein no go. Was ist hier richtig?

Answer 1

zunächst eine "konfigurierbar" Dienst erstellen:

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

Dann können Sie einen Controller wie folgt erstellen:

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

Um eine Vorlage als die folgende

<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> 

zu implementieren

Sie können den Code hier arbeiten: http://plnkr.co/edit/rN14M8GGX62J8JDUIOl8?p=preview

Answer 2

ändern Service-Code ein spezielles Verfahren zu haben, das Sie mehrmals mit unterschiedlichen Parametern (Städte) anrufen:

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

Dann Controller würden Sie in der Lage sein forecat für andere Standorte zu laden, wenn Sie brauchen:

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

Demo:http://plnkr.co/edit/GCx35VxRoko314jJ3M7r?p=preview

Answer 3

Sie eine Funktion in yo zurückkehren Ihre Fabrik. Definieren Sie Ihre forcast als

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

}]); 

Dann in Ihrem Controller

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