For Example Code:
File name : index.html
<html ng-app="weatherApp">
<head>
<meta charset="utf-8" />
<title></title>
= <link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="weatherCtrl">
<form>
<div class="form-group">
<input class="form-control" type="number" ng-model="zip" placeholder="e.g. 84105" />
<input class="btn btn-default" type="submit" value="Search" ng-click="findWeather(zip)" />
</div>
</form>
<p ng-show="zip">Searching the forecasts for: {{zip}}</p>
<div>
<h1>Forecast For {{ place.location.city }}</h1>
<a ng-click="findWeather('84106'); zip = ''">reset</a>
<h3><img class="img-thumbnail forecast-img" src="http://l.yimg.com/a/i/us/we/52/{{place.item.condition.code}}.gif" />Current: {{ place.item.condition.text }} | {{ place.item.condition.temp }}</h3>
<div>
<div ng-repeat="forecast in place.item.forecast">
<h4><img class="img-thumbnail forecast-img" src="http://l.yimg.com/a/i/us/we/52/{{forecast.code}}.gif" /><strong>{{ forecast.date }}</strong></h4>
<p>{{ forecast.text }}</p>
<p>H: {{ forecast.high }} | L: {{ forecast.low }}</p>
</div>
</div>
</div>
</body>
</html>
File name : style.css
/* Put your css in here */
body {
padding: 10px;
}
a {
cursor: pointer;
}
.form-control {
float: left;
margin-right: 10px;
width: 70%;
}
.forecast-img {
margin-right: 10px;
width: 45px;
}
File name : app.js
var app = angular.module('weatherApp', []);
app.controller('weatherCtrl', ['$scope', 'weatherService', function($scope, weatherService) {
function fetchWeather(zip) {
weatherService.getWeather(zip).then(function(data){
$scope.place = data;
console.log(data);
});
}
fetchWeather('84105');
$scope.findWeather = function(zip) {
$scope.place = '';
fetchWeather(zip);
};
}]);
app.factory('weatherService', ['$http', '$q', function ($http, $q){
function getWeather (zip) {
var deferred = $q.defer();
$http.get('https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20weather.forecast%20WHERE%20location%3D%22' + zip + '%22&format=json&diagnostics=true&callback=')
.success(function(data){
deferred.resolve(data.query.results.channel);
})
.error(function(err){
console.log('Error retrieving markets');
deferred.reject(err);
});
return deferred.promise;
}
return {
getWeather: getWeather
};
}]);
No comments:
Post a Comment
Thanks to comment our blog. i will contact you as soon as possible