An AngularJS weather application that pulls JSON formatted metadata from https://www.metaweather.com. It displays weather information for the following cities: Istanbul, Berlin, London, Helsinki, Dublin, Vancouver.

It uses a component-based architecture, by defining a weather component that displays the following weather metadata information:

• cityname
• current tempature
• maximum temperature
• minimum temperature
• weather icon

To run the weather application, open your terminal and run the following commands:

npm install -g bower gulp-cli

Clone repository from GitHub:

git clone https://github.com/daltino/weather-app.git

Jump into weather-app directory and install dependencies from npm registry:

cd weather-app
npm install
npm install -D babel-loader @babel/core @babel/preset-env webpack

Next, install dependencies from Bower registry:

bower install

And that's it!

Execute Gulp serving task to check if everything is fine:

gulp serve

Your default browser will be launched at http://localhost:3000 serving project. See other Gulp tasks and npm scripts you can use below.

• gulp serve or npm start - Build project, start watching for all changes and serve it using Browsersync.
• gulp default or npm run build - Clean used directories and build production version ready to deploy.

• gulp build - Build production version ready to deploy.
• gulp build-app - Build production version of app only, without assets.
• gulp clean - Clean distribution and temporary directories.
• gulp fonts - Copy and flatten fonts from Bower packages to distribution dir.
• gulp inject - Inject scripts and styles into HTML entry.
• gulp inject:reload - Start inject task and launch Browsersync reloading after.
• gulp locales - Build locales.
• gulp locales-angular - Build Angular locales only.
• gulp locales-angular:dist - Build Angular locales only to distribution dir.
• gulp locales:dist - Build locales to distribution dir.
• gulp locales:watch - Build locales and watch for changes.
• gulp other - Copy various not handled stuff to distribution dir.
• gulp partials - Create template cache from HTML partials.
• gulp scripts - Build scripts.
• gulp scripts:clean - Clean temporary scripts.
• gulp scripts:watch - Build scripts and watch for changes.
• gulp serve:dist or npm run start:dist - Build production version and serve it using Browsersync.
• gulp styles - Build styles.
• gulp styles:watch - Build styles and watch for changes.
• gulp watch - Build project and watch for all changes.

npm scripts are not related to the development flow itself, but can be helpful to keep your project up to date.

• npm run docs:gulp - Make markdown file containing Gulp tasks description as in the list above.
• npm run lint - Lint JavaScript files.
• npm run update:bower - Update dependencies versions in bower.json to the latest.
• npm run update:dev - Update dependencies versions in package.json to the latest.

After updating dependencies versions you actually need to install them, do it with the following commands:

bower install
npm install