Storing environment variables

It's easy to miss, but the sample URL from previous sections contains a required appid parameter. You must store this key in your Angular app. You can store it in the weather service, but in reality, applications need to be able to target different sets of resources as they move from development to testing, staging, and production environments. Out of the box, Angular provides two environments: one prod and the other one as the default.

Before you can continue, you need to sign up for a free OpenWeatherMap account and retrieve your own appid. You can read the documentation for appid at http://openweathermap.org/appid for more detailed information.

  1. Copy your appid, which will have a long string of characters and numbers
  2. Store your appid in environment.ts
  3. Configure baseUrl for later use:
src/environments/environment.ts
export const environment = {
production: false,
appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
baseUrl: 'http://',
}

In code, we use a camel-case appId to keep our coding style consistent. Since URL parameters are case-insensitive, appId will work as well as appid.