How to create a weather widget using Angular Js and open weather map

Sriram Varadarajan
Sriram Varadarajan
March 16, 2015
Rate this article
[Total: 0    Average: 0/5]

In this article, let us see, How to create a web based weather widget using Angular JS. Copy the below Javascript snippet and save it as script file with .js as extension. In this example I am using Chennai as the location. Open Weather Map api is used to fetch weather details


 var app = angular.module('weatherApp', []);
 app.controller('weatherCtrl', ['$scope', 'weatherService', function($scope, weatherService) {
     function fetchWeather(zip) {
         weatherService.getWeather(zip).then(function(data) {
             $ = data;
     $scope.findWeather = function(zip) {
         $ = '';
 app.factory('weatherService', ['$http', '$q', function($http, $q) {
             function getWeather(zip) {
                 var deferred = $q.defer();
                 $http.get('http: //’)
                     .success(function(data) {
                     .error(function(err) {
                         console.log('Error retrieving markets');
                     return deferred.promise;
                 return {
                     getWeather: getWeather


 <!DOCTYPE html>
 <html ng-app="weatherApp">
     <meta charset="utf-8″ />
       AngularJS Plunker
     <link data-require="bootstrap-css@3.1.1″ data-semver="3.1.1″ rel="stylesheet" href="//" />
       document.write(‘<base href="‘ + document.location + ‘" />’);
     <link rel="stylesheet" href="style.css" />
     <script data-require="angular.js@1.2.x" src="; data-semver="1.2.16″>
     <script data-require="jquery@*" data-semver="2.0.3″ src="">
       <script data-require="bootstrap@*" data-semver="3.1.1″ src="//">
   <script src="app.js">
 <body ng-controller="weatherCtrl">
     <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)" />
   <p ng-show="zip">
     Searching the forecasts for: {{zip}}
       Forecast For {{}}
     <div class="col-xs-6″>
       <div class="panel panel-primary">
         <div class="panel-heading">
             <img class="img-thumbnail forecast-img" ng-src="{{ place.list[0].weather[0].icon }}.png" />
         <div class="panel-body">
             H: {{ place.list[0] }}° C

Create a HTML code and copy and paste the below code: (this will show weather as well as image of the weather)

Category : Angular, SharePoint

Author Info

Sriram Varadarajan
Sriram Varadarajan
Rate this article
[Total: 0    Average: 0/5]
Sriram is a Technology Evangelist with 15+ years experience in Microsoft Technologies. He is an enterprise architect working for large pharmaceutical organization which has presence globally with largest Microsoft implementation more

Leave a comment