![[ info ]](http://1.bp.blogspot.com/-QO4lYeSXOPU/V0NEGiURb8I/AAAAAAAAAR8/2ZgqK1gaoCwuSCKVlZyVHulJTxBe8hXggCK4B/s1600/devinfo.png)
Hi friends, now a days most of people like to see the weather report of their particular cities. So everyone may have the doubt that how these weather application is implemented/developed and what is main concept behind this. So no need to worry and think about that much, because in this post we are going to see how can we develop our own Weather app using Angular JS.
Before stating this I just want to inform you that you should aware of Angular JS, REST Full API and JSON. If you don't know about these technologies, I will share some references and also later I will write blog on these technologies, so that you can get some idea.
Following are the steps to develop a Weather App using Angular JS,
- Get a Weather API WebService provided by any service provider.
- Design a HTML Template.
- Logic to process the API and displaying the data on the template.
Step 1 : (Getting the Weather API)
In this step we need to get the weather API.
What is Weather API : Weather API is nothing but a service, internally that has some functions or methods for giving the weather data (as JSON or XML format) of a particular location.
How to get weather API : There are so many service providers for giving the Weather report. In this example we will use the Weather API provided by Openweathermap.
How to Use Weather API : The Weather API service providers give a URL ( i.e Weather API URL ). When we call the URL then we will get some data in a particular format ( e.g JSON, XML, etc). In this example we will use JSON format data. After getting the data of any format, we need write the logic for displaying the data on the HTML Template. Following is the details of the Weather API and its use for this example,
We need to call the following URL,
http://api.openweathermap.org/data/2.5/weather?q=CITY_NAME/CITY_ID/ZIP_CODE
Where CITY_NAME/CITY_ID/ZIP_CODE is the parameter, we need to pass as a query string.
After calling this URL with CITY_NAME/CITY_ID/ZIP_CODE as a query string, we will get the weather data as JOSN format. For example we will pass 'london' as a parameter/querystring, then we will get the weather data as folloing JSON format,
{
"coord":{
"lon":-0.13,
"lat":51.51
},
"weather":[
{
"id":521,
"main":"Rain",
"description":"proximity shower rain",
"icon":"09d"
}
],
"base":"cmc stations",
"main":{
"temp":289.34,
"pressure":1018,
"humidity":59,
"temp_min":287.15,
"temp_max":291.15
},
"wind":{
"speed":6.2,
"deg":290
},
--------
--------
}
If you want to learn more about this API, just go through this link i.e 'http://openweathermap.org/forecast5#JSON'.
Now what we have to do is, we need to display these JSON data in the HTML template. How to display JSON data, we will see in next steps.
Step 2 : (Design a HTML Template)
Following is the HTML code to design the template, here in this template we will also use AngularJS expression for displaying the data.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="script.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.myBtn{
background: white;
border: 1px solid silver;
}
#whtrContent{
border: 1px solid silver;
background-color: burlywood;
}
#whtrImg{
width: 150px;height: 150px;
border: 1px solid burlywood
}
.cityName{
font-size: 100px;
}
.temp{
padding: 15px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div ng-app = "MyApp" ng-controller = "MyCont">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
<p align = "center">
<input type = "text" ng-model = "cityName" id = "textData" placeholder = "Enter Your City Name">
<input class = "myBtn" type = "button" value = "GetDetails" ng-click = "funGet()">
</p>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4" id = "whtrContent">
<h1 align="center">{{ cityName }}</h1>
<hr />
<p align = "center"> <img src="http://openweathermap.org/img/w/{{ imgCode }}.png"> </p>
<h1 align = "center" class = "cityName"> {{ tmp | number : 1 }}°C </h1>
<p align = "center"> <span class = "temp"> Min Temp : {{minTemp | number : 1 }}°C </span><span class = "temp"> Max Temp : {{maxTemp | number : 1 }}°C </span> </p>
<br>
</div>
<div class="col-md-2"></div>
</div>
</div>
</body>
</html>
Step 3 : (Processing the API and display the data on HTML template)
In this step we will write the logic for processing the Weather API and display the final data on the HTML template designed in above step. Basically we will write this logic inside the controller as follows,
var app = angular.module('MyApp', []);
app.controller('MyCont', function($scope, $http){
// Initialization of the scope variables.
$scope.cityName = "Your City";
$scope.tmp = 0;
$scope.minTemp = 0;
$scope.maxTemp = 0;
// Logic for the On-Click event.
$scope.funGet = function(){
var url = "http://api.openweathermap.org/data/2.5/weather?q=" + $scope.cityName;
$http.get(url)
.success(function(response) {
$scope.imgWidth = 150;
$scope.imgHeight = 150;
$scope.wtData = response.coord;
$scope.ct = response.name;
$scope.tmp = response.main.temp - 272.15;
$scope.minTemp = response.main.temp_min - 272.15;
$scope.maxTemp = response.main.temp_max - 272.15;
$scope.hmdy = response.main.humidity;
$scope.imgCode = response.weather[0].icon;
});
}
});
Download Demo
Note :
Your folder structure should be like as follows
WeatherApp
|
|
|-----------------> index.html (Code mentioned in Step 1)
|
|-----------------> script.js (Code mentioned in Step 2)
|
Note :
In this post we seen only the basic Weather Application with few basic features, later I will write about some advance features.
Great that you have mentioned clearly about the subject which I have missed at online Angularjs training. Thanks for the clear cut presentation of the information.
ReplyDeleteThanks for sharing this valuable information to our vision. You have posted
ReplyDeletea trust worthy blog keep sharing.
Angularjs Training In Hyderabad
Your Demo Link appears to be broken.
ReplyDeleteWonderful work! This is the type of info that are supposed to be shared around the internet. Disgrace on the search engines for no longer positioning this publish higher! Come on over and consult with my site . Thanks =)
ReplyDeleteOracle SOA Online Training Academy Institutue From Hyderabad India
Sap Fiori Training and Internship In Hyderabad India
Android Online Training Classes With Real Time Support From India
Hadoop Course Offered From Hyderabad India
Angular 2 Training in Chennai angular2 Training in Chennai | angular2 Training in Chennai
ReplyDeleteAngular 2 Training in Chennai AngularJS Training in Chennai AngularJS Training in Chennai Angularjs Training Angularjs Training AngularJS Training in Chennai AngularJS Training in Chennai
Apex Weather is a new weather app from the developers of Apex Launcher, one of the best Android launchers. This weather app is above average. You get your basic stuff like the current, daily, and hourly forecasts. It also includes a weather map, severe weather alerts, and some of the better clock and weather widgets we've seen in a while. It even shows less common stuff like sunrise and sunset times, air pressure, UV index, and more. You can get weather forecasts in the U.S., U.K., Canada, and Australia along with a rather bland news blog if you want one. The ads can be a tad annoying, but otherwise this weather app checks all of the boxes. You can also remove the ads with a single $5.99 payment.
ReplyDeleteApex Weather is a new weather app from the developers of Apex Launcher, one of the best Android launchers. This weather app is above average. You get your basic stuff like the current, daily, and hourly forecasts. It also includes a weather map, severe weather alerts, and some of the better clock and weather widgets we've seen in a while. It even shows less common stuff like sunrise and sunset times, air pressure, UV index, and more. You can get weather forecasts in the U.S., U.K., Canada, and Australia along with a rather bland news blog if you want one. The ads can be a tad annoying, but otherwise this weather app checks all of the boxes. You can also remove the ads with a single $5.99 payment.
ReplyDeleteApex Weather is a new weather app from the developers of Apex Launcher, one of the best Android launchers. This weather app is above average. You get your basic stuff like the current, daily, and hourly forecasts. It also includes a weather map, severe weather alerts, and some of the better clock and weather widgets we've seen in a while. It even shows less common stuff like sunrise and sunset times, air pressure, UV index, and more. You can get weather forecasts in the U.S., U.K., Canada, and Australia along with a rather bland news blog if you want one. The ads can be a tad annoying, but otherwise this weather app checks all of the boxes. You can also remove the ads with a single $5.99 payment.
ReplyDeleteApex Weather is a new weather app from the developers of Apex Launcher, one of the best Android launchers. This weather app is above average. You get your basic stuff like the current, daily, and hourly forecasts. It also includes a weather map, severe weather alerts, and some of the better clock and weather widgets we've seen in a while. It even shows less common stuff like sunrise and sunset times, air pressure, UV index, and more. You can get weather forecasts in the U.S., U.K., Canada, and Australia along with a rather bland news blog if you want one. The ads can be a tad annoying, but otherwise this weather app checks all of the boxes. You can also remove the ads with a single $5.99 payment.
ReplyDeleteApex Weather is a new weather app from the developers of Apex Launcher, one of the best Android launchers. This weather app is above average. You get your basic stuff like the current, daily, and hourly forecasts. It also includes a weather map, severe weather alerts, and some of the better clock and weather widgets we've seen in a while. It even shows less common stuff like sunrise and sunset times, air pressure, UV index, and more. You can get weather forecasts in the U.S., U.K., Canada, and Australia along with a rather bland news blog if you want one. The ads can be a tad annoying, but otherwise this weather app checks all of the boxes. You can also remove the ads with a single $5.99 payment.
ReplyDelete
ReplyDeleteThank you for sharing the article. The data that you provided in the blog is informative and effective. It is very useful who is looking forBest Devops Training Institute
I request to update the blog through step-by-step. Also, find the more technologies news at React js Online Training India
ReplyDeleteApex Weather is a new weather app from the developers of Apex Launcher, one of the best Android launchers. This weather app is above average. You get your basic stuff like the current, daily, and hourly forecasts. It also includes a weather map, severe weather alerts, and some of the better clock and weather widgets we've seen in a while. It even shows less common stuff like sunrise and sunset times, air pressure, UV index, and more. You can get weather forecasts in the U.S., U.K., Canada, and Australia along with a rather bland news blog if you want one. The ads can be a tad annoying, but otherwise this weather app checks all of the boxes. You can also remove the ads with a single $5.99 payment.
ReplyDeleteApex Weather is a new weather app from the developers of Apex Launcher, one of the best Android launchers. This weather app is above average. You get your basic stuff like the current, daily, and hourly forecasts. It also includes a weather map, severe weather alerts, and some of the better clock and weather widgets we've seen in a while. It even shows less common stuff like sunrise and sunset times, air pressure, UV index, and more. You can get weather forecasts in the U.S., U.K., Canada, and Australia along with a rather bland news blog if you want one. The ads can be a tad annoying, but otherwise this weather app checks all of the boxes. You can also remove the ads with a single $5.99 payment.
ReplyDeleteApex Weather is a new weather app from the developers of Apex Launcher, one of the best Android launchers. This weather app is above average. You get your basic stuff like the current, daily, and hourly forecasts. It also includes a weather map, severe weather alerts, and some of the better clock and weather widgets we've seen in a while. It even shows less common stuff like sunrise and sunset times, air pressure, UV index, and more. You can get weather forecasts in the U.S., U.K., Canada, and Australia along with a rather bland news blog if you want one. The ads can be a tad annoying, but otherwise this weather app checks all of the boxes. You can also remove the ads with a single $5.99 payment.
ReplyDeleteApex Weather is a new weather app from the developers of Apex Launcher, one of the best Android launchers. This weather app is above average. You get your basic stuff like the current, daily, and hourly forecasts. It also includes a weather map, severe weather alerts, and some of the better clock and weather widgets we've seen in a while. It even shows less common stuff like sunrise and sunset times, air pressure, UV index, and more. You can get weather forecasts in the U.S., U.K., Canada, and Australia along with a rather bland news blog if you want one. The ads can be a tad annoying, but otherwise this weather app checks all of the boxes. You can also remove the ads with a single $5.99 payment
ReplyDelete