Angular with api.worldweatheronline.com

Searching api.worldweatheronline.com with AngularJS

by Ricardo Pontual

HTML

<h3>Exemplo de two-way data binding com AngularJS com controller</h3>
<h4>Fonte de dados do binding: JSon do site worldweatheronline.com</h4>

<div ng-app="Workshop" ng-controller="workshopController">
    <p>
        Cidade: <input type="text" ng-model="cidade" />
    </p>
    <p>
        <input type="button" value="Pesquisar previsão do tempo" ng-click="listar()" />
    </p>
    
    <table>
        <tr>
            <th></th>
            <th>Data</th>
            <th>Mínima</th>
            <th>Máxima</th>
        </tr>
        <tr ng-repeat="previsao in listaDados.weather">
            <td><img src="{{ previsao.weatherIconUrl[0].value }}"></a></td>
            <td>{{ previsao.date }}</td>
            <td>{{ previsao.tempMinC }}</td>
            <td>{{ previsao.tempMaxC }}</td>
        </tr>
    </table>
    <p>
        Primeira data:
        <input type="text" ng-model="listaDados.weather[0].date" />
    </p>
</div>

CSS

table { background-color: #888 }
table th { background-color: #eee }
table td { background-color: #fff }

JavaScript

var app = angular.module('Workshop', []);


// Adicion um valor ao módulo
app.value("valorInicial", 10);

// Adiciono um serfiço, injetando a dependênica '$http'
app.service('apiServices', ['$http', function ($http) {
    this.listarWeather = function (val) {
        if (val == null) {
			return $http.get('https://api.worldweatheronline.com/free/v1/weather.ashx?q=sao+paulo&num_of_days=5&key=baey8kmn59dqtesenfvy24y6&tp=24&format=json');
        } else {
           var city = val.replace(' ','+');
           var surl= 'https://api.worldweatheronline.com/free/v1/weather.ashx?q='+city+'&num_of_days=5&key=baey8kmn59dqtesenfvy24y6&tp=24&format=json';
           return $http.get(surl);
		}
	}
}]);

app.controller('workshopController', ['$scope','apiServices', function($scope, apiServices) {
// Aqui serão armazenados os dados
$scope.listaDados;
$scope.cidade = 'sao paulo';    
$scope.greeting = 'Hola!';
$scope.pesquisar = function () {
	var city=$scope.cidade;
	apiServices.listarWeather(city)
		.success(function (data) {
			$scope.listaDados = data.data;
			alert(JSON.stringify(data));
			//alert(data.data.weather[0].weatherIconUrl[0].value);
		})
		.error(function (error) {
			alert('Erro ao obter dados: ' + error.message);
		});
};    
$scope.listar = function () {
	apiServices.listarWeather($scope.cidade)
		.success(function (data) {
			$scope.listaDados = data.data;
			//alert(JSON.stringify(data));
			//alert(data.data.weather[0].weatherIconUrl[0].value);
		})
		.error(function (error) {
			alert('Erro ao obter dados: ' + error.message);
		});
};                            
                                  
}]);