angularjs json URL zmieniacz

Question

pracuję nad jakimś mega prosty app pogoda kątowa ze względów praktycznych i utknąłem ..

mam kątową paszy json tak:

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

i ładuje kanał do pliku index.html. to wszystko działa i co teraz robię jest formularzem wejściowym na indeksie, który zmienia adres Amsterdam część adresu URL na js/services/forcast.js, gdzie powyższy kod jest do innego miasta, aby ludzie mogli zobaczyć pogodę miasta.

Zobacz demo tutaj: http://dev.bigstoef.nl/workspace/shiva/weer/index.html

Ive tryd o wszystkich posable opcje odnośnie teraz i jestem 3 dni dalej i jego nie udać. Co tam jest właściwie?

Answer 1

pierwsze, stworzenie "konfigurowalny" usługę:

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

Następnie można utworzyć kontroler jak poniżej:

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

Do wdrożenia szablon jak poniżej

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

Można wyświetlić kod działający tutaj: http://plnkr.co/edit/rN14M8GGX62J8JDUIOl8?p=preview

Answer 2

Zmiana kodu serwis mieć specjalną metodę, którą można wywołać wiele razy z różnymi parametrami (miasta):

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

Następnie w kontrolerze można byłoby w stanie załadować forecat innych miejscach, gdy trzeba:

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

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

Answer 3

Możesz powrócić funkcję w yo ur fabryka. Zdefiniuj swoje forcast jak

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

}]); 

Następnie w kontrolerze

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