5+ AngularJS Weather Apps Demos

So does a weather app coded in AngularJS actually increase your chances of predicting the weather? Probably not. But hey at least we get to code something cool to put on our portfolios. I’m aiming to code a quick demo of an angularjs weather app for my city Brisbane (its currently very hot here! like 30+) so below is a collection of angular weather app demos for you to choose from. Things which you may want to consider are which API your getting your weather data from, allowing for a search box so the user can search for their city/country and maybe a dropdown so they can choose between fahrenheit and celsius. I’ve also added a list of useful links and coding examples so without further delay decouple DOM manipulation from application logic and get coding! 😉

1. Javascript Premium Weather Widget (ng and bootstrap)

WiseLoop JavaScript Premium Weather Widget is an AngularJS based weather condition and forecast script. Its flexibility and easiness makes it perfect for displaying local or searched weather information in websites, blogs, portals, web and mobile apps. It features GEO location, address search, animations, theme support with really nice included themes that are responsive and compatible with mobile devices.

View Plugin Demo

2. Angular Weather

AngularJS APP To Provide Weather Forecast For Cities. Features language options, unit options, city name auto-completion, dynamic enable/disable search button, forecast 7 days weather of selected city, weather details of one certain day using OpenWeatherMap API.

View Code Demo

3. The Weather App

AngularJS application which uses OpenWeatherMap API to get the weather data by city.

View Code Demo

4. AngularJS Weather App

AngularJS weather app using AngularJS, Twitter Bootstrap 3, Open Weather Map API, CSS3. Luckily there are APIs where we can get our weather based on location for free. In today’s example we’re going to use openweathermap.org/API to get the weather data and HTML5 geolocation to get the users location.

View Article Demo

5. AngularJS Weather App using Onsen UI

A simple weather application using AngularJS, the popular open source web app framework, and Onsen UI, the open source UI framework where I work. The app will showcase a couple of new features added in version 1.2.0 of Onsen UI.

View Article Demo

Others you might want to check out which might be useful to you:

• AngularJS weather app: This is a weather App demo coded in CodePen: https://codepen.io/kvitsux/pen/vKeAn
• AngularJS weather app coded in Plunk: https://embed.plnkr.co/SsUCnE
• How to create a weather widget using Angular Js and open weather map: https://www.sharepointpals.com/post/How-to-create-a-weather-widget-using-Angular-Js-and-open-weather-map
• Video on how to code a weather app using angular: https://www.youtube.com/watch?v=r7EhBTPlQkk
• Building an iOS weather app with Angular and ClojureScript: https://keminglabs.com/blog/angular-cljs-weather-app/