angular-openweather-app's Introduction

angular-openweather-app — a weather forecast app written in AngularJS

Note: April 2023 housekeeping -> latest Release 0.3.2 fixes security vulnerabilities.

"OpenWeather App" is a small AngularJS project that makes use of the OpenWeatherMap service for fetching and displaying weather data and forecasts based on a given location (city).

This project basically serves as an example app I refer to within an article about AngularJS I wrote for the German web technology magazine t3n no. 34.

Demo

A demo site running this little app can be found here.

Why?

Points of interests:

Building an app with AngularJS (of course!)
Building an app based on the OpenWeatherMap API
Bootstrapping an AngularJS app: Basic modules and view definition, ng-app, ng-view
Defining a controller for handling the weather data in $scope
Defining a service for fetching weather data from openweathermap.com via JSONP
Defining a custom directive for instantly embedding sort of "weather data day panel"
Setting up unit and e2e-tests with karma/jasmine

angular-openweather-app uses:

Installation

Clone repository and install dependencies

via git and npm:

$ git clone [email protected]:atufkas/angular-openweather-app.git [my-app-name]
$ cd [my-app-name]
$ npm install

Run application via server

(see also angular-seed docs)

You can pick one of these options:

serve this repository with a webserver of-your-choice
having installed node/npm (> 5.2.1), you can start a simple web server with npx:

$ npx serve app

Then open http://localhost:3000/ in your browser.

Run tests

To run unit and end-2-end tests with karma/jasmine, call these scripts:

$ ./scripts/test.sh
$ ./scripts/e2e-test.sh

Contribute!

Ideas, suggestions and pull requests are welcome. Someone willing to suggest a fancy (responsive) design for desktop and mobile use?

Todo

Make use (and parse) more provided weather data (+ add filters, formatting)
Internationalization / Localization
Provide "use current location" and fetch data via lat/lon
Build a view with n-day-forecast in typical weather app style
Improve UI/UX by integrating a fancy design, transitions, effects

Star History

License

The MIT License

All data provided by the great service and API of OpenWeatherMap.

angular-openweather-app's People

Contributors

Stargazers

Watchers

angular-openweather-app's Issues

Angular service to use weatherforecast api from http://openweathermap.org/api

// SERVICES
weatherApp.service('cityService', function() {

this.city = "New York, NY";

});

//taking the weather API info and make a service out of it and then I will have the flexibility to use the service somewhere else
weatherApp.service('weatherService', ['$resource', function ($resource) {

this.GetWeather = function (city, days) {
var apiKey = '75ab4a21554c3eea638f0493fc501db1';
var weatherAPI = 
    $resource("http://api.openweathermap.org/data/2.5/forecast/daily", { callback: "JSON_CALLBACK" }, { get: { method: "JSONP" }});

return weatherAPI.get({ q: city, cnt: days, APPID: apiKey });
};

}]);

_Hope this helps_***

How did you transform forecast data from openweather api?

Helo, I'm developing similar app but on angular 2 and faced huge problem with getting forecast data for 5 days. I cannot show it in my template as it is array of 40 objects that comes from openweather. Could you please advice something or tell me how you did it?

Recommend Projects

atufkas / angular-openweather-app Goto Github PK