AngularJS json यूआरएल परिवर्तक

Question

मैं अभ्यास कारणों के लिए कोणीय में कुछ मेगा सरल मौसम एप्लिकेशन पर काम कर रहा हूँ और मैं अटक कर रहा हूँ ..

मैं इस तरह की एक कोणीय json फ़ीड यह index.html को फ़ीड लोड करता है। यह सब काम कर रहा है और अब मैं क्या चाहता हूं इंडेक्स पर एक इनपुट फॉर्म है जो एम्स्टर्डम जेएस/सेवाओं/forcast.js पर यूआरएल का हिस्सा बदलता है जहां उपरोक्त कोड दूसरे शहर में है ताकि लोग अपना शहर का मौसम देख सकें। http://dev.bigstoef.nl/workspace/shiva/weer/index.html

Ive के बारे में अब के बारे में सभी posable विकल्पों tryd और मैं 3 दिन आगे और इसकी एक नहीं जाने हूँ:

डेमो यहाँ देखें। यहां सही रास्ता क्या है?

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 लोड करने में सक्षम हैं जब आप की जरूरत हो सकता है:

Answer 1

पहले, एक "विन्यास" सेवा बनाने:

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

बदलें सेवा कोड एक समर्पित विधि है जो आप विभिन्न मापदंडों के साथ कई बार फोन कर सकते हैं (शहर) के लिए

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